您的位置：首页 > Web前端 > JavaScript

原生js实现图片循环轮播效果

2018-08-16 21:56 645 查看

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;padding: 0;
}
.block{
position: relative;
width:1000px;
height: 400px;
border: 1px solid grey;
margin: 10% auto;
overflow: hidden;
}
.ullist{
width:7000px;
height: 400px;
}
.ullist li{
float: left;
width:1000px;
list-style: none;
height:400px;
}
.b{
transition: all 0.5s ease-in-out;
}
img{
width:1000px;
height:400px;
}
.banner{
position: absolute;
bottom: 0;
width:160px;
height: 20px;
margin-left: 420px;
}
.dian{
float: left;
width:15px;
height: 15px;
border:1px solid silver;
border-radius: 50%;
background-color: black;
margin: 0px 2px;
}
</style>
</head>
<body>
<div class="block">
<ul class="ullist">
<li><img src="./img/demo1.jpg"></li>
<li><img src="./img/demo2.jpg"></li>
<li><img src="./img/demo3.jpg"></li>
<li><img src="./img/demo4.jpg"></li>
<li><img src="./img/demo5.jpg"></li>
<li><img src="./img/demo6.jpg"></li>
<li><img src="./img/demo1.jpg"></li>
</ul>
<div class="banner" >
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
</div>
</div>
<script>
//轮播
var times;
var count=0;
window.onload=function() {
//获取ul
//获取block
var ullist = document.getElementsByClassName("ullist")[0];
var par = document.getElementsByClassName("block")[0];
var dian=document.getElementsByClassName("dian");
dian[0].style.backgroundColor="red";
par.onmouseenter = function () {
clearInterval(times);
};
par.onmouseleave = function () {
times = setInterval(function () {
imgbo();
}, 2000);
};
//整体循环执行
times = setInterval(function () {
//给ul添加属性b,过渡执行count<ullist.children.length-2的图片
imgbo();
}, 2000);
//鼠标进入dian
for(var i=0;i<dian.length;i++){
dian[i].index =i;
dian[i].onmouseenter =function(){
dian[count].style.backgroundColor="black";
this.style.backgroundColor="red";
count=this.index;
ullist.className="ullist b";
ullist.style.marginLeft=(-1000*count)+"px";
}
}
function imgbo() {
ullist.className = "ullist b";
dian[count].style.backgroundColor="black";
count++;

ullist.style.marginLeft = (-1000 * count) + "px";
console.log(count);
setTimeout(function () {//只执行一次
if (count > ullist.children.length - 2) {
ullist.className = "ullist";//
count = 0;
ullist.style.marginLeft = "0px";
}
dian[count].style.backgroundColor="red";
}, 500);
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航