jquery實現(xiàn)圖片輪播器

更新時間：2017年05月23日 08:33:11 作者：hanyuwebant

這篇文章主要為大家詳細介紹了jquery實現(xiàn)圖片輪播器的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、輪播器

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');//獲取數(shù)字的 列；
 var aliWidth = $('.wrap ul li').eq(0).width(); //獲取單張圖片的寬度；
 var _now = 0;//這個控制數(shù)字樣式的計數(shù)器
 var _now2 = 0;//這個是控制圖片運動距離的計數(shù)器
 var timeId; //定時器的開關(guān)
 var aimg = $('.wrap ul img');//獲取wrap中img元素
 var op = $('.wrap p')  //獲取wrap中p元素
 
 
 numLi.click(function() {       //鼠標點擊觸發(fā)的函數(shù)；
  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();
  //數(shù)字樣式 的 增和刪；
  oul.animate({'left':-aliWidth*index},500);   
  //圖片的移動，行元素的左側(cè)距離wrap的左側(cè)-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++;        //圖片控制計數(shù)器 +1；
  numLi.eq(_now).addClass('current').siblings().removeClass();       //數(shù)字樣式 的 增和刪；
  var imgAlt = aimg.eq(_now).attr('alt'); //獲取 _now時刻的的alt值
  op.html(imgAlt);       //并將atl值顯示
  oul.animate({'left':-aliWidth*_now2},500,function(){   
  //圖片的移動，行元素的左側(cè)距離wrap的左側(cè)-500*now2
   if (_now==0) {
    ali.eq(0).css('position','static');
    oul.css('left',0);
    _now2=0;
   }
  });
 }
 
timeId = setInterval(slider,1500);   
//每1500ms，自動切換圖片
 //鼠標點擊圖片則停止計時器，停止“自動切換圖片”；離開則繼續(xù)定時器切換圖片
 // $('.wrap').mouseover(function(event) {
 //  clearInterval(timeId);
 // });
 
 // $('.wrap').mouseover(function(event) {
 //  timeId = setInterval(slider,1500);
 // });
 
 $('.wrap').hover(function() {    
  clearInterval(timeId);
 
 }, function() {
  timeId = setInterval(slider,1500);
  
 });
});

*重要函數(shù)

1、獲取各個標簽值并顯示

var imgAlt = aimg.eq(_now).attr('alt');//獲取 _now時刻的的alt值
  op.html(imgAlt);    //并將atl值顯示

2、改變數(shù)字樣式

 $(this).addClass('current').siblings().removeClass();
  //數(shù)字樣式 的 增和刪；

3、滾動圖片

 oul.animate({'left':-aliWidth*index},500);   
 //圖片的移動，行元素的左側(cè)距離wrap的左側(cè)-500*index

*注意點

1、同步

_now = index;
//不管_now還是_now2都要和點擊時index同步；
//index可能在點擊鼠標之后變成3,；松開鼠標后我們希望_now變成從3變成0，但是因為setInterval之后_now加1，_now其實還是從0變成1；所以需要同步_now和index；

2、計數(shù)器

_now2的作用是防止父元素在第一張留出空白圖片；數(shù)字定時器和圖片運動控制定時器是不同步的

var _now = 0;//這個控制數(shù)字樣式的計數(shù)器
var _now2 = 0;//這個是控制圖片運動距離的計數(shù)器

3、去relative屬性

if (_now==0) {
    ali.eq(0).css('position','static');//去relative屬性
    oul.css('left',0);//當去完relative之后，要還原ul的“l(fā)eft”值為0；
    _now2=0;

4、去屬性的時機

Oul.animate({css屬性的設(shè)置},500,function())其中function就是在500ms執(zhí)行完之后的操作；

oul.animate({'left':-aliWidth*_now2},500,function(){     
  //圖片的移動，行元素的左側(cè)距離wrap的左側(cè)-500*now2
  //根據(jù)一組css執(zhí)行屬性動畫   
   if (_now==0) {
    ali.eq(0).css('position','static');
    oul.css('left',0);
    _now2=0; //當_now為0的時候，_now2也應(yīng)該還原回去為0；
   }
  });

*難點

首先，要學(xué)會獲取元素值；
其次，了解幾種函數(shù)；
再則，變量的靈活使用，達到了解變量每時每刻的值；
最后，定時器的控制是最難的；

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

您可能感興趣的文章: