1.首先看一下目录结构
images文件夹放所需要播放的图片。
js文件夹放jquery库和main.js
2.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" alt=""></a></li>
<li><a href="#"><img src="./images/02.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/03.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/04.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/05.jpg" alt=""></a></li>
</ul>
<div class="nav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
3.main.js代码:
$(document).ready(function(){
var slideShow = $(".slideShow"), //获取div
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);
}
});
4.效果图
当然了，大小可以利用CSS自己进行调整！
声明：代码非原创，取自网络。