輪播圖我們很常見的功能，可以使用原生的js進行實作，也可以使用jQuery進行實作，還可以使用H5C3進行實作，當然也可以使用swiper插件很友善的實作，這裡先用jQuery實作一個無縫的輪播。
思路：
1、首先擷取要操作的對象
2、設定滑鼠移入移出時顯示和隐藏左右按鈕
3、給左右按鈕添加點選事件，讓ul移動一個圖檔的寬度
4、給對應的小按鈕設定點選事件，已經添加背景色
5、添加一個定時器讓圖檔循環移動
<!DOCTYPE html>
<html>
<head >
<meta charset="UTF-8">
<title></title>
<style>
body,ul,ol,li,img {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 700px;
height: 400px;
/*padding: 5px;*/
/*background-color: red;*/
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.ad {
width: 700px;
height: 400px;
position: relative;
}
#box img {
width: 700px;
height: 400px;
}
.ad ul li{
width: 700px;
height: 400px;
overflow: hidden;
float: left;
}
.ad ul {
position: absolute;
left: 0;
top: 0;
width: 4200px;
}
.ad ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.ad ol li {
width: 20px;
height: 20px;
float: left;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.ad ol li.current {
background: yellow;
}
.ad ul li.current {
background: yellow;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
line-height: 40px;
position: absolute;
/*left: 5px;*/
top: 50%;
margin-top: -20px;
background-color: #000;
cursor: pointer;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #left{
left: 5px;
}
#arr #right {
right: 5px;
/*left: auto;*/
}
</style>
</head>
<body>
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><img src="imgs/1.jpg" alt=""/></li>
<li><img src="imgs/2.jpg" alt=""/></li>
<li><img src="imgs/3.jpg" alt=""/></li>
<li><img src="imgs/4.jpg" alt=""/></li>
<li><img src="imgs/5.jpg" alt=""/></li>
<li><img src="imgs/1.jpg" alt=""/></li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
//擷取小按鈕
var $oLi = $("ol>li");
//擷取圖檔的寬度
var imgW = $("#imgs > li").width();
//滑鼠移入盒子顯示左右按鈕
$("#box").on("mouseenter", function () {
$("#arr").css("display", "block");
});
//滑鼠移出盒子隐藏左右按鈕
$("#box").on("mouseleave", function () {
$("#arr").css("display", "none");
});
//預設第一個小按鈕是活動
$($oLi[0]).addClass("current");
//給左按鈕注冊點選事件
$("#left").click(function () {
//判斷小按鈕中哪個按鈕是活動的
var num;
$oLi.each(function () {
//将ul向右移動
if($(this).hasClass("current")) {
num = $(this).index() - 1;
//當達到最左邊時，移動到最右邊
if(num < 0) {
num = 4;
}
$("#imgs").animate({
left: -num * imgW + "px"
}, 300);
}
});
//小按鈕的背景色相應的改變
$($oLi[num]).addClass("current").siblings().removeClass("current");
});
//給右按鈕注冊點選事件
$("#right").click(function () {
//判斷小按鈕中哪個按鈕是活動的
var num;
$oLi.each(function () {
//将ul向右移動
if($(this).hasClass("current")) {
num = $(this).index() + 1;
//當達到最左邊時，移動到最右邊
if(num > 5) {
num = 1;
}
$("#imgs").animate({
left: -num * imgW + "px"
}, 300);
}
});
//小按鈕的背景色相應的改變
$($oLi[num]).addClass("current").siblings().removeClass("current");
});
//點選小按鈕，圖檔移動，并給小按鈕設定背景顔色
$oLi.on("click", function () {
//将活動的小按鈕添加一個類
$(this).addClass("current").siblings().removeClass("current");
//擷取索引
var num = $(this).index();
$("#imgs").animate({
left: -num * imgW + "px"
}, 300);
});
//循環播放
var timeId = setInterval(function () {
//判斷小按鈕中哪個按鈕是活動的
var num;
$oLi.each(function () {
//将ul向右移動
if($(this).hasClass("current")) {
//得到活動的索引,然後加1
num = $(this).index() + 1;
//讓圖檔移動
$("#imgs").animate({
left: -num * imgW + "px"
}, 300);
//到達最後一張，讓ul從頭開始
if(num== $oLi.length) {
$("#imgs").animate({
left: "0px"
}, 0);
num = 0;
}
}
});
//小按鈕的背景色相應的改變
$($oLi[num]).addClass("current").siblings().removeClass("current");
}, 2000);
})
</script>
</body>
</html>
demo下載下傳位址 jQuery實作無縫輪播
![Android ViewPager 幾種開發案例的使用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)