js编写无缝轮播图效果

最新推荐文章于 2024-09-14 17:54:00 发布

54D小童鞋

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量398

点赞数 1

分类专栏： js效果小例子文章标签： js html5 css 无缝轮播

本文链接：https://blog.csdn.net/qq_38337985/article/details/70477452

版权

js效果小例子专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>