没有合适的资源?快使用搜索试试~ 我知道了~
代码分两个部分:1、HTML部分,根据注释处理即可;2、play.js插件部分,引到HTML里面即可。 1、HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>/*style标签及其内的内容,在实际项目中可以不要*/ * { margin: 0; padding: 0; } </style> </head> <body> <!--body标签里的内容,没说可以增减或更改的,不要增减或更改--> <div
资源推荐
资源详情
资源评论
原生原生JS轮播图插件轮播图插件
代码分两个部分:代码分两个部分:1、、HTML部分,根据注释处理即可;部分,根据注释处理即可;2、、play.js插件部分,引到插件部分,引到HTML里面即可。里面即可。
1、、HTML部分:部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>/*style标签及其内的内容,在实际项目中可以不要*/
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--body标签里的内容,没说可以增减或更改的,不要增减或更改-->
<div id="box">
<div>
<!--以下是可增减区域-->
<div><img src="img/banner1.jpg" alt=""/></div>
<div><img src="img/banner2.jpg" alt=""/></div>
<div><img src="img/banner3.jpg" alt=""/></div>
<div><img src="img/banner4.jpg" alt=""/></div>
<div><img src="img/banner5.jpg" alt=""/></div>
<div><img src="img/banner6.jpg" alt=""/></div>
<div><img src="img/banner7.jpg" alt=""/></div>
<!--以上是可增减区域-->
</div>
</div>
<script src="play.js"></script>
<script>
var play= new Banner('1000px', '500px');
/*这两个参数分别是轮播区的宽和高,可以根据需要更改*/
</script>
</body>
</html>
2、、play.js插件部分插件部分
function Banner(width, height) {/*类*/
/*以下最外层div*/
var that = this;
this.width = width;
this.height = height;
this.oBox = document.getElementById("box");
this.oBox.style.width = width;
this.oBox.style.height = height;
this.oBox.style.margin = "0 auto";
this.oBox.style.overflow = "hidden";
this.oBox.style.position = "relative";
/*以下轮播区的div*/
this.oBoxInner = this.oBox.getElementsByTagName('div')[0];
this.oBoxInner.style.height = height;
this.oBoxInner.style.position = "absolute";
this.oBoxInner.style.left = 0;
this.oBoxInner.style.right = 0;
this.aDiv = this.oBoxInner.getElementsByTagName('div');//单个轮播图
this.oBoxInner.innerHTML/* 轮播区的内部后面*/ += this.aDiv[0].outerHTML/*第一个轮播图片的外部*/;
this.oBoxInner.style.width = parseFloat(width) * this.aDiv.length + "px";//轮播区的宽度
for (var i = 0; i < this.aDiv.length; i++) {/*遍历轮播区的每个div及其内部的图片*/
this.aDiv[i].style.width = width;
this.aDiv[i].style.height = height;
this.aDiv[i].style.float = "left";
this.aDiv[i].aImg = this.aDiv[i].getElementsByTagName('img')[0];
this.aDiv[i].aImg.style.width = "100%";
this.aDiv[i].aImg.style.height = "100%";
}
/*以下是焦点区部分(定位在轮播区的右下方)*/
var oUl=document.createElement('ul');
for(i=0; i<this.aDiv.length-1; i++){
oUl.innerHTML+='<li class='+i+'===1?"on":null></li>';
}
this.oBox.appendChild(oUl);
资源评论
weixin_38629939
- 粉丝: 11
- 资源: 926
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功