首頁 > 開發者 > JavaScript
jquery實現圖片輪播器，jquery實現圖片
一、輪播器
1、HTML架構
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>圖片輪播器</title> <link rel="stylesheet" type="text/css" href="slider.css" rel="external nofollow" /> <script src="Jquery.js"></script> <script src="slider.js"></script> </head> <body> <div class="wrap"> <!--快速鍵 .wrap>(ul>li*4>img[src=$.jpg])+ol>li*4 --> <ul> <li><img src="1.jpg" alt="11" /></li> <li><img src="2.jpg" alt="22" /></li> <li><img src="3.jpg" alt="33" /></li> <li><img src="4.jpg" alt="44" /></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <p class="introduce"></p> </div> </body></html>
2、css的樣式
/*清除列表前預設黑點*/*{ margin: 0; padding: 0;}img{ border:0;}ol, ul ,li{list-style: none;} body{ margin: 50px;}.wrap{ width: 500px;/*一張圖片的高和寬*/ height: 350px; border: 1px solid red; position: relative;/*以這一張圖的邊框為基準位置*/ overflow: hidden;/* 將超過這個長寬高的部分隱藏 */}.wrap ul{ width: 2000px;/*列表的行是四張圖片的寬度*/ position: absolute;/* 防止圖片溢出 */ left: 0; top: 0;}.wrap ul li { float: left;/* 將四張圖片緊挨著橫著排列 */ width: 500px;}.wrap ol{ position: absolute; bottom: 10px; right:10px;}.wrap ol li{ float: left;/* 達到 橫著排列 的目的*/ width: 16px; height: 16px; line-height: 16px; text-align: center;/* 字型在列元素中舉重顯示 */ color: #fff; background: #000; border: 1px solid yellow; margin-right: 3px;/* 列與列之間的距離 */ cursor: pointer;}.wrap ol li.current{ background: #fff; color:#000;}.wrap .introduce{ width:400px ; height: 30px; line-height: 30px;background: rgba(0, 0, 0, 0.5);/* 達到透明顯示的作用；或者用“opacity:0.5 ; filter: alpha(opacity = 50);” */ color: #fff; position: absolute; bottom: 0; left: 0;}
3、JS控制
$(document).ready(function(){ var oul = $('.wrap ul'); //擷取 行； var ali = $('.wrap ul li'); //擷取 列； var numLi = $('.wrap ol li');//擷取數位 列； var aliWidth = $('.wrap ul li').eq(0).width(); //擷取單張圖片的寬度； var _now = 0;//這個控制數字樣式的計數器 var _now2 = 0;//這個是控製圖片運動距離的計數器 var timeId; //定時器的開關 var aimg = $('.wrap ul img');//擷取wrap中img元素 var op = $('.wrap p') //擷取wrap中p元素 numLi.click(function() { //滑鼠點擊觸發的函數； var index = $(this).index(); //如果點擊第一張圖片，index=0； _now = index; //不管_now還是_now2都要和點擊時index同步； _now2 = index; var imgAlt = aimg.eq(_now).attr('alt');//擷取 _now時刻的的alt值 op.html(imgAlt); //並將atl值顯示 $(this).addClass('current').siblings().removeClass(); //數字樣式 的 增和刪； oul.animate({'left':-aliWidth*index},500); //圖片的移動，行元素的左側距離wrap的左側-500*index }); function slider(){ if (_now==numLi.size()-1) { //當滾動到第四張圖片的時候 ali.eq(0).css({ //通過定位的方法將第一張移到最後一張； 'position':'relative', 'left':oul.width() }); _now=0; } else{ _now++; //如果沒達到第四張，那就將_new+1； } _now2++; //圖片控制計數器 +1； numLi.eq(_now).addClass('current').siblings().removeClass(); //數字樣式 的 增和刪； var imgAlt = aimg.eq(_now).attr('alt'); //擷取 _now時刻的的alt值 op.html(imgAlt); //並將atl值顯示 oul.animate({'left':-aliWidth*_now2},500,function(){ //圖片的移動，行元素的左側距離wrap的左側-500*now2 if (_now==0) { ali.eq(0).css('position','static'); oul.css('left',0); _now2=0; } }); } timeId = setInterval(slider,1500); //每1500ms，自動切換圖片 //滑鼠點擊圖片則停止計時器，停止“自動切換圖片”；離開則繼續定時器切換圖片 // $('.wrap').mouseover(function(event) { // clearInterval(timeId); // }); // $('.wrap').mouseover(function(event) { // timeId = setInterval(slider,1500); // }); $('.wrap').hover(function() { clearInterval(timeId); }, function() { timeId = setInterval(slider,1500); });});
*重要函數
1、擷取各個標籤值並顯示
var imgAlt = aimg.eq(_now).attr('alt');//擷取 _now時刻的的alt值 op.html(imgAlt); //並將atl值顯示
2、改變數字樣式
$(this).addClass('current').siblings().removeClass(); //數字樣式 的 增和刪；
3、滾動圖片
oul.animate({'left':-aliWidth*index},500); //圖片的移動，行元素的左側距離wrap的左側-500*index
*注意點
1、同步
_now = index;
//不管_now還是_now2都要和點擊時index同步；
//index可能在點擊滑鼠之後變成3,；鬆開滑鼠後我們希望_now變成從3變成0，但是因為setInterval之後_now加1，_now其實還是從0變成1；所以需要同步_now和index；
2、計數器
_now2的作用是防止父元素在第一張留出空白圖片；數字定時器和圖片運動控制定時器是不同步的
var _now = 0;//這個控制數字樣式的計數器var _now2 = 0;//這個是控製圖片運動距離的計數器
3、去relative屬性
if (_now==0) { ali.eq(0).css('position','static');//去relative屬性 oul.css('left',0);//當去完relative之後，要還原ul的“left”值為0； _now2=0;
4、去屬性的時機
Oul.animate({css屬性的設定},500,function())其中function就是在500ms執行完之後的操作；
oul.animate({'left':-aliWidth*_now2},500,function(){ //圖片的移動，行元素的左側距離wrap的左側-500*now2 //根據一組css執行屬性動畫 if (_now==0) { ali.eq(0).css('position','static'); oul.css('left',0); _now2=0; //當_now為0的時候，_now2也應該還原回去為0； } });
*痛點
首先，要學會擷取元素值；
其次，瞭解幾種函數；
再則，變數的靈活使用，達到瞭解變數每時每刻的值；
最後，定時器的控制是最難的；
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
