基於jquery的簡單輪播效果
- 無縫輪播、前進後退、指示器（分頁器）
- 使用時注意設置組外層寬高
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css" />
<script src="jquery-1.11.0.js"></script>
<script src="index.js"></script>
<style>
/* 使用此代碼，需要手動設置最外層的大小 */
.swiper {
width: 1000px;
height: 300px;
}
</style>
</head>
<body>
<div class="swiper">
<!--輪播圖-->
<ul class="inner clearfix">
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
</ul>
<!--指示器-->
<ol class="indicators clearfix"></ol>
<!--控制器-->
<div class="control">
<span class="prev"><</span>
<span class="next">></span>
</div>
</div>
</body>
</html>
css代碼
/*初始化*/
*{
margin: 0;
padding: 0;
}
/* 清除浮動 */
.clearfix:after{
content: "";
display: block;
clear: both;
}
ul,ol,li{
list-style: none;
}
/*清楚圖片的底部留白*/
img{
vertical-align: middle;
}
/*輪播區域*/
.swiper{
margin: 0 auto;
position: relative;
overflow: hidden;
background-color: pink;
}
/*輪播圖*/
.swiper ul.inner{
position: absolute;
left: 0;
top: 0;
height: 100%;
}
.swiper ul.inner li{
float: left;
height: 100%;
}
.swiper ul.inner li:hover{
cursor: move;
}
.swiper ul.inner li img{
width: 100%;
height: 100%;
}
/*指示器*/
.swiper ol.indicators{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
}
.swiper ol.indicators li{
float: left;
width: 5vw;
height: 5vw;
max-width: 15px;
max-height: 15px;
text-align: center;
cursor: pointer;
background-color: lightgray;
margin: 0 3px;
border-radius: 50%;
border: 3px darkslategray solid;
}
.swiper ol.indicators li.current{
background-color: orange;
border-color: #fff;
}
/*控制器*/
.control span{
vertical-align: middle;
font-size: 32px;
position: absolute;
width: 50px;
height: 50px;
text-align: center;
line-height: 45px;
cursor: pointer;
background-color: rgba(255,255,255,0);
border-radius: 5px;
color: #ccc;
}
.control span.prev{
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.control span.next{
right: 10px;
top: 50%;
margin-top: -25px;
}
.control span:hover{
background-color: rgba(0,0,0,.3);
color: white;
}
jquery代碼
$(function() {
/* 初始化頁面 */
// 輪播總個數
var lists = $(".inner li").length
// 輪播圖大小設置
$(".inner").width(100 * (lists + 1) + "%")
$(".inner li").width(100 / (lists + 1) + "%")
// 創建指示器
for (var i = 0; i < lists; i++) {
$("<li></li>").appendTo(".swiper .indicators")
}
$(".indicators li").eq(0).addClass("current")
/*定義參考值*/
var index = 0;
// 每次位移的距離
var step = $(".inner li").width();
/*鼠標選擇指示器時，改變指示器狀態，圖片對應移動*/
$(".indicators li")
.mouseenter(function() {
//鼠標滑過的指示器，添加.current,去掉所有兄弟的.current
$(this).addClass("current").siblings().removeClass("current")
//獲取鼠標滑過的爲第幾個
index = $(this).index()
//輪播圖針對性位移：使用動畫改變位置，動畫執行時間爲500ms
$(".inner").stop().animate({
left: -index * step
}, 500)
})
/*實現無縫對接 --將第一張圖克隆一份到最後。這樣總共有6張圖，5個指示器。接下來就是數學運算的過程*/
$(".inner li").eq(0).clone(true).appendTo(".inner")
/*鼠標點擊左側*/
$(".prev").click(function() {
// 每次位移的距離
step = $(".inner li").width();
//定義結束條件：不能一直變大。某個值時將參考值歸零，並將整個輪播圖瞬間歸位
if (index == lists) {
$(".inner").css("left", 0)
index = 0;
}
index++;
//點擊之後，參考值加一，圖片動畫移動
$(".inner").stop().animate({
left: -index * step
}, 500)
//顯示最後一張圖時，指示器指示第一個，其餘情況指示器對應指示
if (index == lists) {
$(".indicators li").eq(0).addClass("current").siblings().removeClass("current")
} else {
$(".indicators li").eq(index).addClass("current").siblings().removeClass("current")
}
})
//右側點擊
$(".next").click(function() {
// 每次位移的距離
step = $(".inner li").width();
//定義結束條件
if (index == 0) {
$(".inner").css("left", -lists * step)
index = lists;
}
index--;
$(".inner").stop().animate({
left: -index * step
}, 500)
$(".indicators li").eq(index).addClass("current").siblings().removeClass("current")
})
//使用定時器，循環點擊 左側按鈕
var time = setInterval(function() {
$(".prev").trigger('click')
}, 2000)
//鼠標進入 輪播範圍停止輪播，離開之後重新開啓輪播
$(".swiper").hover(function() {
clearInterval(time)
}, function() {
time = setInterval(function() {
$(".prev").trigger('click')
}, 2000)
})
})