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

jQuery實(shí)現(xiàn)輪播圖效果demo

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下

成都創(chuàng)新互聯(lián)主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計、VI標(biāo)志設(shè)計、全網(wǎng)整合營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式重慶網(wǎng)站建設(shè)公司、手機(jī)網(wǎng)站制作設(shè)計、微商城、網(wǎng)站托管及成都網(wǎng)站改版、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為電動窗簾行業(yè)客戶提供了網(wǎng)站維護(hù)服務(wù)。

效果展示：

jQuery實(shí)現(xiàn)輪播圖效果demo

編程思路：

1. 首先是基礎(chǔ)的布局，使用"子絕父相"等頁面布局方法，將圖片、左右按鈕以及每張圖片下方對應(yīng)的標(biāo)識小按鈕安排的明明白白。
2. JS中在通過點(diǎn)擊左右按鈕來切換圖片時，使用三個變量分別來表示當(dāng)前顯示的圖片序號、點(diǎn)擊上一張按鈕時候顯示的圖片序號、點(diǎn)擊下一張按鈕時候顯示的圖片序號。
3. 在自動輪播的時候，通過使用定時器來改變當(dāng)前顯示的圖片序號來控制輪播

具體代碼：

HTML代碼：

<div id="slideShow">
 <a href="#" class="slide_pic"><img src="../img/phone_photo/p1.jpg" alt="0"></a>
 <a href="#" class="slide_pic"><img src="../img/phone_photo/p2.jpg" alt="1"></a>
 <a href="#" class="slide_pic"><img src="../img/phone_photo/p3.jpg" alt="2"></a>
 <a href="#" class="slide_pic"><img src="../img/phone_photo/p4.jpg" alt="3"></a>
 <a href="#" class="slide_pic"><img src="../img/phone_photo/p5.jpg" alt="4"></a>
 <a href="#" class="slide_pic"><img src="../img/phone_photo/p6.jpg" alft="5"></a>

 <button class="prev_one"> < </button>
 <button class="next_one"> > </button>

 <ul id="mark_box">
  <li class="mark">1</li>
  <li class="mark">2</li>
  <li class="mark">3</li>
  <li class="mark">4</li>
  <li class="mark">5</li>
  <li class="mark">6</li>
 </ul>
</div>

CSS代碼：

#slideShow{
 width: 330px;
 height: 245px;
 background-color: #999999;
 text-align: center;
 left: 50%;
 margin-left: -165px;
 position: relative;
}
#slideShow .slide_pic{
 position: absolute;
 left: 0;
 top: 0;
}
#slideShow .prev_one{
 position: absolute;
 left: 0;
 top: 45%;
}
#slideShow .next_one{
 position: absolute;
 right: 0;
 top: 45%;
}
#slideShow #mark_box{
 position: absolute;
 bottom: 0;
}

#mark_box .mark{
 width: 20px;
 height: 20px;
 border-radius: 20px;
 padding: 2px;
 text-align: center;
 line-height: 20px;
 background-color: red;
 float: left;
 list-style: none;
 margin: 10px 10px;
 cursor: pointer;
}
#mark_box .active_img{
 background-color: green;
}

Javascript代碼：

$(function(){
 var prev_mark=0;    //點(diǎn)擊上一張按鈕時候的一個標(biāo)志位
 var next_mark=0;    //點(diǎn)擊下一張按鈕時候的一個標(biāo)志位
 var cur_pic=$('.slide_pic').length-1;   //當(dāng)前圖片的序號

 $('.prev_one').click(function(){
  prev_mark=cur_pic;   //獲取當(dāng)前圖片的序號
  if(prev_mark === 0){
   prev_mark=$('.slide_pic').length-1;
  }
  else{
   prev_mark--;
  }
  cur_pic=prev_mark;
  $('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
  $('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
 });

 $('.next_one').click(function(){
  next_mark=cur_pic;
  if(next_mark === $('.slide_pic').length-1){
   next_mark=0;
  }
  else{
   next_mark++;
  }
  cur_pic=next_mark;
  $('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
  $('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
 });

 // 輪播圖下面的指示點(diǎn)
 $.each($('.mark'),function(index,value){
  $(value).click(function(){
   cur_pic=this.innerHTML-1;
   $('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
   $(this).addClass('active_img').siblings('.mark').removeClass('active_img');
  });
 });

 // 鼠標(biāo)移入圖片則停止輪播；鼠標(biāo)移出圖片則開始輪播
 var slide_timer=setInterval(auto_slide,2000);
 $('#slideShow').mouseenter(function(){
  clearInterval(slide_timer);
 });
 $('#slideShow').mouseleave(function(){
  slide_timer=setInterval(auto_slide,2000);
 });

 // 自動輪播函數(shù)
 function auto_slide(){
  if(cur_pic === $('.slide_pic').length-1){
   cur_pic =0;
  }
  else {
   cur_pic++;
  }
  $('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
  $('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
 }
});

更多關(guān)于輪播圖效果的專題，請點(diǎn)擊下方鏈接查看學(xué)習(xí)

javascript圖片輪播效果匯總

jquery圖片輪播效果匯總

Bootstrap輪播特效匯總

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

網(wǎng)站欄目：jQuery實(shí)現(xiàn)輪播圖效果demo
瀏覽路徑：http://chinadenli.net/article42/jiejec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、網(wǎng)站維護(hù)、電子商務(wù)、手機(jī)網(wǎng)站建設(shè)

廣告

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

成都網(wǎng)站建設(shè)公司