实现轮播图插件

最新推荐文章于 2023-06-30 10:45:50 发布

lookBackward

最新推荐文章于 2023-06-30 10:45:50 发布

阅读量465

点赞数

分类专栏：前端文章标签：轮播图

本文链接：https://blog.csdn.net/lookBackward/article/details/78784313

版权

前端专栏收录该内容

30 篇文章 1 订阅

订阅专栏

先上效果：

为什么效果图没办法发布？

多图片轮播

html代码：

css代码：

/*轮播图style*/
.box{
width:1000px;
height:150px;
margin:20px auto;
overflow:hidden;
position:relative;
}
.picBox{
position:absolute;
margin:0px;
padding:0px;
list-style:none;
width:2000px;}
.picBox:hover{
cursor:pointer;
}
.picBox li{
float:left;
}
.picBox img{
width:200px;
height:150px;
}

.leftImage img,.rightImage img{
padding:80px 40px;
}

js代码：

// 
function rollOne(){
$(".picBox").animate({right:"0"},"linear",function(){
var litag=$(this).find('li:last').remove().clone(true)
$(this).find('li:first').before(litag).fadeIn("slow");
});
}
function rollRight(){
$(".picBox").animate({left:"0"},"linear",function(){
$(this).find('li:first').remove().clone(true).appendTo(".picBox").fadeIn("slow");
});
}

var startRollOne=setInterval(rollRight,1000);
//
$(".box").hover(function(){
clearInterval(startRollOne);
},function(){
startRollOne=setInterval(rollRight,1000);
});

$(".leftImage,.rightImage").hover(function(){
clearInterval(startRollOne);
},function(){
startRollOne=setInterval(rollRight,1000);
});

$(".leftImage").click(function(){
rollOne();
});
$(".rightImage").click(function(){
rollRight();
});