上下无缝轮播

最新推荐文章于 2022-11-05 16:33:29 发布

chuangbeng6809

最新推荐文章于 2022-11-05 16:33:29 发布

阅读量207

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3873061/blog/1848914

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,ul,li,img{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#box{
width: 500px;
height: 300px;
position: relative;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
#ul_1{
width: 500px;
height: 300px;
position: absolute;
}
img{
display: block;
width: 500px;
height: 300px;
border: 0;
}
#box>div{
width: 50px;
height: 50px;
background: rgba(0,0,0,0.5);
text-align: center;
color: #fff;
line-height: 50px;
font-size: 50px;
cursor:pointer;
right: 10px;
}
#top_{
position: absolute;
top: 110px;
}
#bottom_{
position: absolute;
top: 170px;
}
#ul_2{
position: absolute;
bottom: 10px;
left: 200px;
margin: auto;
}
#ul_2>li{
float: left;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 50%;
margin: 0 10px;
}
#ul_2>li:hover,#ul_2 .hover{
background: #fff;
}
</style>
</head>
<body>
<div id="box">
<ul id="ul_1">
<li><img src="imgs/img1.jpg"></li>
<li><img src="imgs/img2.jpg"></li>
<li><img src="imgs/img3.jpg"></li>
<li><img src="imgs/img1.jpg"></li>
</ul>
<ul id="ul_2">
<li class="hover"></li>
<li></li>
<li></li>
</ul>
<div id="top_" >&blacktriangle;</div>
<div id="bottom_">&blacktriangledown;</div>
</div>
<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script>
   $(function(){
   var i = 0;
   //设置计数
   var timer = setInterval(move,3000);
   //每3秒动一次

   function move() {
       i++;
       if(i==$("#ul_1 li").length){
           $("#ul_1").css("top",0);
                   i=1;
       }
       if(i == -1 ){
           $("#ul_1").css("top",-$("#ul_1 li").outerHeight()*($("#ul_1 li").length-1));
   i = $("#ul_1 li").length - 2;
   }

       if(i == $("#ul_1 li").length-1){
   $("#ul_2 li").eq(0).addClass("hover").siblings().removeClass("hover");
      }else {
   $("#ul_2 li").eq(i).addClass("hover").siblings().removeClass("hover");
   }

   $("#ul_1").css("height",$("#ul_1 li").outerHeight()*$("#ul_1 li").length);
               $("#ul_1").stop().animate({"top":$("#ul_1 li").outerHeight()*-i},1000);
   }

   for(let a=0;a<$("#ul_2 li").length;a++){
$("#ul_2 li").eq(a).mouseover(function () {
    $("#ul_2 li").eq(a).addClass("hover").siblings().removeClass("hover");
i = a - 1;
move();
})
   }

   $("#top_").click(function(){
   move();
   });
   $("#bottom_").click(function(){
   i = i-2;
   move();
   });
   $("#box").mouseover(function () {
   clearInterval(timer);
   });
   $("#box").mouseout(function () {
   timer = setInterval(move,3000);
   });
})

</script>
</body>
</html>