使用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>