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

js编写无缝轮播图效果

2017-04-22 21:38 453 查看

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

*{margin:0;padding:0;}

.banner{width:1000px;height:350px;margin:50px auto;}

#list img{width:100%;height:100%;}

#list li {list-style: none;width:1000px;height:350px;float: left;}

li .active{z-index: 1;}

#span{width:400px;height:40px;margin:0 auto;}

#span span{width:40px;height:40px;background:#f99;float:left;display: block;

border-radius: 50%;margin-left:30px;}

#span .active{background:red;}
</style>

</head>

<body>

<button id="left">上一张</button>

<button id="right">下一张</button>
<div class="banner">

<ul id="list">

<li class="active"><img src="http://img.zcool.cn/community/focus/8b1858f629f100000148f059c79d.jpg" alt=""></li>
<li><img src="http://img.zcool.cn/community/focus/dff158f6299000000148f0dd05b7.jpg" alt=""></li>
<li><img src="http://img.zcool.cn/community/focus/7a3e58f6c39f00000148f06a7b92.jpg" alt=""></li>
<li><img src="http://img.zcool.cn/community/focus/dff158f6299000000148f0dd05b7.jpg" alt=""></li>
<li><img src="http://img.zcool.cn/community/focus/995558f62a0900000148f0a9ac3f.jpg" alt=""></li>
<li><img src="http://img.zcool.cn/community/focus/8b1858f629f100000148f059c79d.jpg" alt=""></li>

</ul>
</div>
<div id="span">

<span class="active"></span>

<span></span>

<span></span>

<span></span>

<span></span>
</div>

</body>

<script src="js/move.js"></script>

<script>

function $(select){

return document.querySelector(select);

}

var oList = $("#list");

var aLi = oList.children ;

var oSpan = $("#span").children;

var oLeft = $("#left");

var oRight = $("#right");

var index = 0 ;

oList.style.width = aLi[0].offsetWidth * aLi.length + "px" ;

oRight.onclick = function(){ //点击右键切换下一张图

if(index==aLi.length-1){

index = 1 ;

oList.style.marginLeft = 0 ;

}else{

index++;

}

movep();
}

oLeft.onclick = function(){ //点击左键切换上一张图

if(index==0){

index = aLi.length-2 ;

oList.style.marginLeft = -(aLi.length-1)*aLi[0].offsetWidth +"px";

}else{

index--;

}

movep();

}

function movep(){ //切图控制函数

move(oList,{marginLeft:-index*aLi[0].offsetWidth});

for(var i = 0 ; i < oSpan.length ; i++){

oSpan[i].className = "" ;

}

if(index == aLi.length-1){

oSpan[0].className = "active" ;

}else{

oSpan[index].className = "active" ;

}

}

for(var i = 0 ; i < oSpan.length ; i++){

oSpan[i].onclick = (function(n){

return function(){

index = n ;

movep();

}

})(i)
}

var timer = null ;
timer = setInterval(oLeft.onclick,2000);

for(var j = 0 ; j < aLi.length ; j++){ //循环内控制鼠标划过按钮体质自动按轮播

oLeft.onmouseover = oRight.onmouseover = oSpan[j].onmouseover = function(){

clearInterval(timer);

}

oLeft.onmouseout = oRight.onmouseout = oSpan[j].onmouseout = function(){

timer = setInterval(oLeft.onclick,2000);

}

}

</script>

</html>

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

标签：

相关文章推荐

新的分享

章节导航