使用jQuery實現圖片輪播效果
jQuery是對JavaScript的簡化，語法沒有太大區別，比較JavaScript更加容易理解，代碼量更少。
用jQuery實現圖片輪播需要有以下步驟：
1.對圖片區域獲取，想象中我們所用的圖片是按照順序排列起來，按照一定的時間切換圖片的位置來實現輪播
2.對左右兩個按鈕設置監聽，當點擊按鈕時，要切換到前一張或者後一張
3.對圖片底部的小圓點設置監聽事件，當點擊小圓點時，切換到相應的圖片位置，而且小圓點也要點亮
4.對圖片整體設置定時器，讓圖片自己輪播，再設置一個監聽函數，讓鼠標在圖片區域懸停的時候停止定時器，挪開的之後繼續輪播。
html+css區域代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>焦點輪播圖</title>
<style type="text/css">
/*去除內邊距,沒有鏈接下劃線*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/*讓<body有20px的內邊距*/
body {
padding: 20px;
}
/*最外圍的div*/
#container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative; /*相對定位*/
margin: 0 auto;
}
/*包含所有圖片的<div>*/
#list {
width: 4200px; /*7張圖片的寬: 7*600 */
height: 400px;
position: absolute; /*絕對定位*/
z-index: 1;
}
/*所有的圖片<img>*/
#list img {
float: left; /*浮在左側*/
}
/*包含所有圓點按鈕的<div>*/
#pointsDiv {
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}
/*所有的圓點<span>*/
#pointsDiv span {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
/*第一個<span>*/
#pointsDiv .on {
background: orangered;
}
/*切換圖標<a>*/
.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: RGBA(0, 0, 0, 0.3);
color: #fff;
}
/*鼠標移到切換圖標上時*/
.arrow:hover {
background-color: RGBA(0, 0, 0, 0.7);
}
/*鼠標移到整個div區域時*/
#container:hover .arrow {
display: block; /*顯示*/
}
/*上一個切換圖標的左外邊距*/
#prev {
left: 20px;
}
/*下一個切換圖標的右外邊距*/
#next {
right: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/5.jpg" alt="5"/>
<img src="img/1.jpg" alt="1"/>
<img src="img/2.jpg" alt="2"/>
<img src="img/3.jpg" alt="3"/>
<img src="img/4.jpg" alt="4"/>
<img src="img/5.jpg" alt="5"/>
<img src="img/1.jpg" alt="1"/>
</div>
<div id="pointsDiv">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>
jsp相關代碼：
//導入jQuery庫
<script src="jquery-1.10.1.js"></script>
<script>
//得到所有照片的div
var $div = $('#list');
var $span = $('#pointsDiv>span')
//獲取照片當前的位置
var index = 1;
var isToggleImagEnd = true;
//點擊按鍵往左移動
$('#prev').click(function () {
isToggleImg(0)
});
//點擊按鍵往右移動
$('#next').click(function () {
isToggleImg(1)
});
function isToggleImg(n) {
if (isToggleImagEnd) {
isToggleImagEnd = false;
if (n == 0) {
index--;
} else {
index++;
}
$div.animate({
left: index * (-600)
}, 500, function () {
if (index == 0) {
index = 5
}
if (index == 6) {
index = 1;
}
//設置圖片輪播時，從最後一張跳到第一張不會有間隙，跟其他圖片一樣跳轉
$div.css('left', index * (-600))
//設置圖片下面的圓點狀態，更改其類屬性
$span.removeClass('on');
$($span.get(index - 1)).addClass('on')
isToggleImagEnd = true;
})
}
}
//設置延時函數，讓圖片自己定時輪播下一張
var interval = setInterval(function () {
isToggleImg(1);
}, 1000)
//鼠標圖片上圖片停止輪播，挪開繼續輪播
$("#container").hover(function () {
clearInterval(interval)
}, function () {
interval = setInterval(function () {
isToggleImg(1);
}, 1000)
})
//對小圓點設置監聽事件，點擊小圓點，圖片跳轉
$span.click(function () {
index = $(this).index();
isToggleImg()
})
</script>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。