使用jQuery實(shí)現(xiàn)圖片輪播效果

更新時(shí)間：2022年02月23日 12:01:45 作者：平丘君

這篇文章主要為大家詳細(xì)介紹了使用jQuery實(shí)現(xiàn)圖片輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

jQuery是對(duì)JavaScript的簡(jiǎn)化，語(yǔ)法沒(méi)有太大區(qū)別，比較JavaScript更加容易理解，代碼量更少。

用jQuery實(shí)現(xiàn)圖片輪播需要有以下步驟：

? 1.對(duì)圖片區(qū)域獲取，想象中我們所用的圖片是按照順序排列起來(lái)，按照一定的時(shí)間切換圖片的位置來(lái)實(shí)現(xiàn)輪播

? 2.對(duì)左右兩個(gè)按鈕設(shè)置監(jiān)聽(tīng)，當(dāng)點(diǎn)擊按鈕時(shí)，要切換到前一張或者后一張

? 3.對(duì)圖片底部的小圓點(diǎn)設(shè)置監(jiān)聽(tīng)事件，當(dāng)點(diǎn)擊小圓點(diǎn)時(shí)，切換到相應(yīng)的圖片位置，而且小圓點(diǎn)也要點(diǎn)亮

? 4.對(duì)圖片整體設(shè)置定時(shí)器，讓圖片自己輪播，再設(shè)置一個(gè)監(jiān)聽(tīng)函數(shù)，讓鼠標(biāo)在圖片區(qū)域懸停的時(shí)候停止定時(shí)器，挪開(kāi)的之后繼續(xù)輪播。

html+css區(qū)域代碼：

<!DOCTYPE html>
<html>

<head>
? ? <meta charset="UTF-8">
? ? <title>焦點(diǎn)輪播圖</title>
? ? <style type="text/css">
? ? ? ? /*去除內(nèi)邊距,沒(méi)有鏈接下劃線*/
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? text-decoration: none;
? ? ? ? }

? ? ? ? /*讓<body有20px的內(nèi)邊距*/
? ? ? ? body {
? ? ? ? ? ? padding: 20px;
? ? ? ? }

? ? ? ? /*最外圍的div*/
? ? ? ? #container {
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? position: relative; /*相對(duì)定位*/
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }

? ? ? ? /*包含所有圖片的<div>*/

? ? ? ? #list {
? ? ? ? ? ? width: 4200px; /*7張圖片的寬: 7*600 */
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? position: absolute; /*絕對(duì)定位*/
? ? ? ? ? ? z-index: 1;

? ? ? ? }

? ? ? ? /*所有的圖片<img>*/
? ? ? ? #list img {
? ? ? ? ? ? float: left; /*浮在左側(cè)*/
? ? ? ? }

? ? ? ? /*包含所有圓點(diǎn)按鈕的<div>*/
? ? ? ? #pointsDiv {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? z-index: 2;
? ? ? ? ? ? bottom: 20px;
? ? ? ? ? ? left: 250px;
? ? ? ? }

? ? ? ? /*所有的圓點(diǎn)<span>*/

? ? ? ? #pointsDiv span {
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? float: left;
? ? ? ? ? ? border: 1px solid #fff;
? ? ? ? ? ? width: 10px;
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? background: #333;
? ? ? ? ? ? margin-right: 5px;
? ? ? ? }

? ? ? ? /*第一個(gè)<span>*/

? ? ? ? #pointsDiv .on {
? ? ? ? ? ? background: orangered;
? ? ? ? }

? ? ? ? /*切換圖標(biāo)<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;
? ? ? ? }

? ? ? ? /*鼠標(biāo)移到切換圖標(biāo)上時(shí)*/
? ? ? ? .arrow:hover {
? ? ? ? ? ? background-color: RGBA(0, 0, 0, 0.7);
? ? ? ? }

? ? ? ? /*鼠標(biāo)移到整個(gè)div區(qū)域時(shí)*/
? ? ? ? #container:hover .arrow {
? ? ? ? ? ? display: block; /*顯示*/
? ? ? ? }

? ? ? ? /*上一個(gè)切換圖標(biāo)的左外邊距*/
? ? ? ? #prev {
? ? ? ? ? ? left: 20px;
? ? ? ? }

? ? ? ? /*下一個(gè)切換圖標(biāo)的右外邊距*/
? ? ? ? #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">&lt;</a>
? ? <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>
</body>

</html>

jsp相關(guān)代碼：

//導(dǎo)入jQuery庫(kù)
<script src="jquery-1.10.1.js"></script>
<script>
? ? //得到所有照片的div
? ? var $div = $('#list');
? ? var $span = $('#pointsDiv>span')
? ? //獲取照片當(dāng)前的位置
? ? var index = 1;
? ? var isToggleImagEnd = true;
? ? //點(diǎn)擊按鍵往左移動(dòng)
? ? $('#prev').click(function () {
? ? ? ? isToggleImg(0)
? ? });
? ? //點(diǎn)擊按鍵往右移動(dòng)
? ? $('#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;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //設(shè)置圖片輪播時(shí)，從最后一張?zhí)降谝粡埐粫?huì)有間隙，跟其他圖片一樣跳轉(zhuǎn)
? ? ? ? ? ? ? ? $div.css('left', index * (-600))
? ? ? ? ? ? ? ? //設(shè)置圖片下面的圓點(diǎn)狀態(tài)，更改其類屬性
? ? ? ? ? ? ? ? $span.removeClass('on');
? ? ? ? ? ? ? ? $($span.get(index - 1)).addClass('on')
? ? ? ? ? ? ? ? isToggleImagEnd = true;
? ? ? ? ? ? })
? ? ? ? }
? ? }
?? ?//設(shè)置延時(shí)函數(shù)，讓圖片自己定時(shí)輪播下一張
? ? var interval = setInterval(function () {
? ? ? ? isToggleImg(1);
? ? }, 1000)
?? ?
? ? //鼠標(biāo)圖片上圖片停止輪播，挪開(kāi)繼續(xù)輪播
? ? $("#container").hover(function () {
? ? ? ? clearInterval(interval)
? ? }, function () {
? ? ? ? interval = setInterval(function () {
? ? ? ? ? ? isToggleImg(1);
? ? ? ? }, 1000)
? ? })
?? ?
?? ?//對(duì)小圓點(diǎn)設(shè)置監(jiān)聽(tīng)事件，點(diǎn)擊小圓點(diǎn)，圖片跳轉(zhuǎn)
? ? $span.click(function () {
? ? ? ? index = $(this).index();
? ? ? ? isToggleImg()
? ? })
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: