jQuery实现无缝轮播图
实现的主要功能,自动轮播,鼠标移动到图片轮播停止,离开继续轮播。
用到的jq知识点:
animate(json数据,毫秒数,回调函数)
clone()克隆元素
addclass()添加
removeclass()移除
appendTo()将一个元素添加到父元素中
is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。
:animated 选择器选取当前的所有动画元素
siblings()姊妹选择器
stop()停止当前正在运行的动画
效果
html文件
<div class="sec" id="sec">
<ul class="top-img" id="top-img">
<li><img src="./img/pic1.png"alt=""></li>
<li><img src="./img/pic2.png"alt=""></li>
<li><img src="./img/pic3.png"alt=""></li>
<li><img src="./img/pic4.png"alt=""></li>
<li><img src="./img/pic5.png"alt=""></li>
</ul>
<div class="btns" id="btns">
<a href="javascript:;" class="btnLeft" id="btnLeft"><</a>
<a href="javascript:;" class="btnRight" id="btnRight">></a>
</div>
<ol class="down-btn" id="down-btn">
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
CSS文件
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #000;
}
.sec{
width: 600px;
height: 350px;
margin: 150px auto;
border: 1px solid #000;
position: relative;
overflow: hidden;
border-radius: 15px;
}
.sec .top-img{
width: 4000px;
height: 350px;
list-style: none;
position: relative;
}
.sec .top-img li{
width: 600px;
height: 350px;
float: left;
}
.sec .btns a{
display: block;
position: absolute;
top: 50%;
width: 50px;
height: 50px;
font-family: serif;
font-size: 25px;
text-align: center;
line-height: 50px;
margin-top: -25px;
border-radius: 50%;
text-decoration: none;
color: #fff;
opacity: 0.3;
background-color: rgba(0,0,0,.3);
}
.sec .btns a.btnRight{
right: 0;
}
.sec .btns a:hover{
text-shadow: 0 0 20px #fff;
opacity: 0.8;
}
.sec .down-btn{
list-style: none;
width: 140px;
height: 18px;
position: absolute;
bottom: 5px;
left: 50%;
font-family: serif;
font-size: 13px;
margin-left: -75px;
}
.sec .down-btn li{
float: left;
width: 18px;
height: 18px;
border-radius: 50%;
margin: 0 5px;
text-align: center;
line-height: 18px;
cursor: pointer;
color: #fff;
background-color: rgba(0,0,0,.3)
}
.sec .down-btn li:hover{
background-color: rgba(0,0,0,.7)
}
.sec .down-btn .cur{
background-color: rgba(0,0,0,.7)
}
</style>
js文件(第一行附带jq文件)
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var idx = 0;
var $length = $("#top-img li").length;
$("#top-img li").eq(0).clone().appendTo("#top-img");
$("#btnRight").click(move)
function move(){
if($("#top-img").is(":animated")) return
idx++;
$("#top-img").animate({"left":-idx * 600},800,function(){
if(idx > $length-1){
idx = 0;
$("#top-img").css("left",0)
}
$("#down-btn li").eq(idx).addClass("cur").siblings().removeClass("cur");
})
}
$("#btnLeft").click(function(){
if($("#top-img").is(":animated")) return
idx--;
if(idx < 0){
idx = $length -1;
$("#top-img").css("left",-$length * 600);
}
$("#top-img").animate({"left":-idx * 600},800,function(){
$("#down-btn li").eq(idx).addClass("cur").siblings().removeClass("cur")
})
})
$("#down-btn li").mouseenter(function(){
index = $(this).index();
$("#top-img").stop(true).animate({"left":-index * 600},800);
$("#down-btn li").eq(index).addClass("cur").siblings().removeClass("cur")
})
var timer = setInterval(move,2500);
$("#sec").mouseenter(function(){
clearInterval(timer)
})
$("#sec").mouseleave(function(){
clearInterval(timer);
timer = setInterval(move,2500);
})
</script>