欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

一、輪播器

成都創(chuàng)新互聯(lián)公司是工信部頒發(fā)資質IDC服務器商，為用戶提供優(yōu)質的服務器托管服務

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; //定時器的開關
 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);   
  //圖片的移動，行元素的左側距離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++;        //圖片控制計數(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(){   
  //圖片的移動，行元素的左側距離wrap的左側-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);   
 //圖片的移動，行元素的左側距離wrap的左側-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屬性的設置},500,function())其中function就是在500ms執(zhí)行完之后的操作；

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

*難點

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標題：jquery實現(xiàn)圖片輪播器
文章URL：http://chinadenli.net/article24/gsghje.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站建設、品牌網站設計、網頁設計公司、域名注冊、網站排名、企業(yè)建站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

網站優(yōu)化排名