创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery SlideShow</title>
<style>
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
.slideShow{position: relative;margin: 100px auto;height: 140px;width:340px;overflow: hidden;}
.slideShow ul{position: relative;width: 2000px;}
.slideShow ul li{float: left;width: 340px;}
.slideShow .nav{text-align: center;position: absolute;right: 10px;bottom:10px;font-size: 12px;line-height: 18px;}
.slideShow .nav span{-webkit-user-select:none;user-select:none;float: left;cursor: pointer;border-radius:9px;display: inline-block;width: 18px;height: 18px;background: rgba(0,0,0,0.7);margin-left: 2px;color: #fff;opacity:0.5;}
.slideShow .nav span.active{opacity: 1;}
</style>
</head>
<body>
<div class="slideShow">
<ul>
<li><a href="#"><img src="images/01.jpg"></a></li>
<li><a href="#"><img src="images/02.jpg"></a></li>
<li><a href="#"><img src="images/03.jpg"></a></li>
<li><a href="#"><img src="images/04.jpg"></a></li>
</ul>
<div class="nav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/main1.js"></script>
</body>
</html>
创建main1.js
$(document).ready(function(){
var slideShow=$(".slideShow"),
ul=slideShow.find("ul"),
nav=slideShow.find(".nav span"),
oneWidth=ul.find("li").eq(0).width(),
timer=null,
iNow=0;
slideShow.hover(function(){
clearInterval(timer);
},autoPlay);
nav.on("click",function(){
var me=$(this),
index=me.index();
iNow=index;
ul.animate({
"left":-oneWidth*iNow
});
nav.removeClass("active");
me.addClass("active");
});
autoPlay();
function autoPlay(){
timer=setInterval(function(){
iNow++;
if(iNow>nav.length-1){
iNow=0;
}
nav.eq(iNow).trigger("click");
},2000);
}
});