使用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"><</a>
? ? <a href="javascript:;" id="next" class="arrow">></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)，更改其類(lè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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開(kāi)發(fā)必備
- Jquery代碼實(shí)現(xiàn)圖片輪播效果（一）
- 原生js和jquery實(shí)現(xiàn)圖片輪播特效
- jQuery圖片輪播的具體實(shí)現(xiàn)
- 基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- 原生js和jquery實(shí)現(xiàn)圖片輪播淡入淡出效果
- jQuery手動(dòng)點(diǎn)擊實(shí)現(xiàn)圖片輪播特效
- 基于jQuery實(shí)現(xiàn)左右圖片輪播（原理通用）
- 基于jquery的圖片輪播 tab切換組件
- jQuery左右滾動(dòng)支持圖片放大縮略圖圖片輪播代碼分享
相關(guān)文章
將form表單通過(guò)ajax實(shí)現(xiàn)無(wú)刷新提交的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇將form表單通過(guò)ajax實(shí)現(xiàn)無(wú)刷新提交的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建CRUD應(yīng)用
這篇文章主要幫大家輕松學(xué)習(xí)jQuery插件EasyUI，并利用EasyUI創(chuàng)建CRUD應(yīng)用，感興趣的小伙伴們可以參考一下2015-11-11
Jquery+JSon 無(wú)刷新分頁(yè)實(shí)現(xiàn)代碼
基于jquery+json格式文件的無(wú)刷新分頁(yè)實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
jquery-ui 進(jìn)度條功能示例【測(cè)試可用】
這篇文章主要介紹了jquery-ui 進(jìn)度條功能,結(jié)合完整實(shí)例形式分析了jquery-ui 結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)進(jìn)度條功能相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
讓jQuery與其他JavaScript庫(kù)并存避免沖突的方法
為了解決jQuery和其他JavaScript庫(kù)中$()函數(shù)的沖突，需要取消jQuery的$()函數(shù)，下面有個(gè)不錯(cuò)的方法，感興趣的朋友可以參考下2013-12-12
jquerydom對(duì)象的事件隱藏顯示和對(duì)象數(shù)組示例
本文為大家介紹下jquery的dom對(duì)象的事件隱藏顯示和對(duì)象數(shù)組，感興趣的朋友可以參下2013-12-12
使用jquery讀取html5 localstorage的值的方法
在HTML 5中，localstorage是個(gè)不錯(cuò)的東西，在支持localstorage的瀏覽器中， 能持久化用戶表單的輸入，即使關(guān)掉瀏覽器，下次重新打開(kāi)瀏覽器訪問(wèn)，也能讀出其值,很不錯(cuò)的一個(gè)東西，接下來(lái)實(shí)例介紹，需要的朋友可以參考下2013-01-01
簡(jiǎn)單的jQuery banner圖片輪播實(shí)例代碼
這篇文章主要介紹了簡(jiǎn)單的jQuery banner圖片輪播實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-03-03
ajax+jQuery實(shí)現(xiàn)級(jí)聯(lián)顯示地址的方法
這篇文章主要介紹了ajax+jQuery實(shí)現(xiàn)級(jí)聯(lián)顯示地址的方法,涉及jQuery操作Ajax實(shí)現(xiàn)級(jí)聯(lián)顯示的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
JavaScript的jQuery庫(kù)中ready方法的學(xué)習(xí)教程
這篇文章主要介紹了JavaScript的jQuery庫(kù)中ready方法的學(xué)習(xí)教程,包括ready的相關(guān)簡(jiǎn)短寫(xiě)法,rally cool,需要的朋友可以參考下2015-08-08