使用jQ制作简易轮播图
思路和使用原生js制作的一样，只是方法换为了jq库里的方法
这里只实现了轮播和移入移出的动画没有下一张和上一张的切换按钮和底部小圆点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.banner{
margin: 100px auto;
width: 590px;
overflow: hidden;
}
ul{
width: 2950px;
list-style:none;
/* margin-left: -590px; */
}
li{
float: left;
}
</style>
</head>
<body>
<div class="banner">
<ul class="imgLists">
<li> <img src="images/1.jpg" > </li>
<li> <img src="images/2.jpg" > </li>
<li> <img src="images/3.jpg" > </li>
<li> <img src="images/4.jpg" > </li>
<li> <img src="images/1.jpg" > </li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
var $imgLists = $('.imgLists');
var $li = $('.imgLists li');
var timer;
var index = 1;
function startAuto(){
timer = setInterval(function(){
//调用anmiate function 回调函数
$imgLists.animate({'margin-left':'-=' + 590},1000,function(){
index++;
if(index === $li.length){
index=1;
$imgLists.css('margin-left',0);
}
})
},3500);
}
//移入移出
$imgLists.on('mouseenter',stopAuto).on('mouseleave',startAuto );
function stopAuto(){
clearInterval(timer);
timer = null;
}
startAuto();
})
</script>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
