焦点图无缝轮播原理:一开始先把第一张图片克隆并粘贴在图片列表的最后,我简单用数字代表图片一下,1 2 3 4 5 1,这里的数字就是不同的图片,可以看见有五张不同的图片,但是要把第一张复制粘贴到列表的最后,这样我们在滑动到 5 这张图片的时候再滑动就可以无缝到"第一张"的感觉,但是还没完,得想办法回去真正的第一张,我们就可以用一个if来判断,当无缝滑动到克隆的 1 以后,获取图片列表对象,调用css方法设置left回到第一张,这个办法回去肉眼是看不出来的,是一瞬间的事情,所以继续滑动也就形成了完美的无缝循环。接下来是代码。
<script src="js/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
/*按钮移入效果*/
$(".image-box .btn_L").mouseover(function(){
$(this).css({"color":"#4B0082","font-size":"45px","font-weight":"bold"});
})
$(".image-box .btn_L").mouseout(function(){
$(this).css({"color":"#fff","font-size":"35px","font-weight":"normal"});
})
$(".image-box .btn_R").mouseover(function(){
$(this).css({"color":"#4B0082","font-size":"45px","font-weight":"bold"});
})
$(".image-box .btn_R").mouseout(function(){
$(this).css({"color":"#fff","font-size":"35px","font-weight":"normal"});
})
/*按钮移入效果*/
/*图像移动函数*/
var i = 0;
var clone=$(".image-box .img li").first().clone();//复制第一张
$(".image-box .img").append(clone);//粘贴复制的到列表后面
var size = $(".image-box .img li").length;//获取图片长度
$(".image-box .btn_L").click(function(){
moveL();
})
$(".image-box .btn_R").click(function(){
moveR();
})
function moveL()
{
i++;
if(i==size)
{
$(".image-box .img").css({left:0});
i = 1;
}
$(".image-box .img").stop().animate({left:-i*800},400);
if(i == size-1)
{
$(".image-box .num li").eq(0).addClass("on").siblings().removeClass("on");
}
else
{
$(".image-box .num li").eq(i).addClass("on").siblings().removeClass("on");
}
}
function moveR()
{
i--;
if(i==-1)
{
$(".image-box .img").css({left:-(size-1)*800});
i=size-2;
}
$(".image-box .img").stop().animate({left:-i*800},400);
$(".image-box .num li").eq(i).addClass("on").siblings().removeClass("on");
}
/*图像移动函数*/
/*鼠标滑入原点--很简单*/
$(".image-box .num li").hover(function(){
var index= $(this).index();
i = index;
/*获取完了就移动图像*/
$(".image-box .img").stop().animate({left:-i*800},400);
$(this).addClass("on").siblings().removeClass("on");
})
/*鼠标滑入原点--很简单*/
/*自动滑动*/
var T = setInterval(moveL,2000);//就是设置一个定时器就ok
/*自动滑动*/
/*对定时器的操作*/
$(".image-box").hover(function(){
clearInterval(T);//定时器的关闭
},function(){
T = setInterval(moveL,2000);//定时器的重启
})
/*对定时器的操作*/
});
</script>
下面是html,很简单,就一个div,那个图片的话可以根据自己项目的实际情况来更改
<body>
<div class="image-box">
<ul class="img">
<li><a href="#"><img alt="" src="images/one.jpg"></a></li>
<li><a href="#"><img alt="" src="images/two.jpg"></a></li>
<li><a href="#"><img alt="" src="images/three.jpg"></a></li>
<li><a href="#"><img alt="" src="images/four.jpg"></a></li>
</ul>
<ul class="num">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="btn btn_L"><</div>
<div class="btn btn_R">></div>
</div>
</body>
下面是css样式
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
}
.image-box
{
width:800px;
height:500px;
position:relative;
border:3px solid #000;
margin:100px auto;
overflow:hidden;
}
.image-box .img
{
width:5000px;
position:absolute;
left:0;
top:0;
}
.image-box .img li
{
float:left;
}
.image-box .num
{
position:absolute;
width:100%;
text-align:center;
font-size:5px;
left:0;
bottom:10px;
}
.image-box .num li
{
width:10px;
height:10px;
background:white;
border-radius:50%;
display:inline-block;/*一行显示*/
margin: 0 3px;
cursor:pointer;
text-align:center;
}
.image-box .num li.on
{
background:#DC143C;
}
.image-box .btn
{
width:30px;
height:50px;
background:rgba(0,0,0,0.5);
position:absolute;
top:50%;
margin-top:-25px;
cursor:pointer;
text-align:center;
line-height:50px;
color:#fff;
font-size:35px;
font-family:"宋体";
}
.image-box .btn_L
{
left:0;
}
.image-box .btn_R
{
right:0;
}
</style>
好了,到这里 就实现了一个无缝轮播。