欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery代碼實(shí)現(xiàn)圖片輪播效果(一)

 更新時(shí)間:2015年08月12日 14:58:02   作者:qq791967024  
經(jīng)理交給我一個(gè)網(wǎng)站新聞資訊網(wǎng)頁(yè)開(kāi)發(fā)的活兒,對(duì)于我這樣的java程序員,沒(méi)有接觸過(guò)網(wǎng)頁(yè)設(shè)計(jì)這么高端的東東,該怎么搞呢,去度娘那搜索到不少結(jié)果,而且很大部分都是用jquery做的,于是根據(jù)自己的一些的理解,提供了這篇jquery輪播效果的講解,有需要的朋友可以來(lái)參考下

文章寫的不好,還請(qǐng)各位高手指教,不廢話了,先上張效果圖吧看下:

在線演示         下載源碼

首先是初始化部分:將除了第一張輪播圖片意外的圖片都隱藏,并且隱藏向前、向后按鈕,使第一個(gè)索引按鈕處于激活狀態(tài)。

事件部分:通過(guò)jquery的hover()綁定鼠標(biāo)上懸以及離開(kāi)時(shí)的事件處理, jquery的bind()方法綁定鼠標(biāo)點(diǎn)擊事件處理向前、向后翻動(dòng)、輪播控制:pre(), next(), play(), start()開(kāi)始自動(dòng)輪播,stop()停止自動(dòng)輪播。

下篇是一個(gè)純粹的jquery輪播插件, 該插件可以定制各種效果,方便的配置以及可擴(kuò)展。

下面是整體的代碼:

index.html
[html] view plaincopy
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jquery輪播效果圖 </title> 
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script> 
<style type="text/css"> 
 * { 
 padding: 0px; 
 margin: 0px; 
 } 
 a { 
 text-decoration: none; 
 } 
 ul { 
 list-style: outside none none; 
 } 
 .slider, .slider-panel img, .slider-extra { 
 width: 650px; 
 height: 413px; 
 } 
 .slider { 
 text-align: center; 
 margin: 30px auto; 
 position: relative; 
 } 
 .slider-panel, .slider-nav, .slider-pre, .slider-next { 
 position: absolute; 
 z-index: 8; 
 } 
 .slider-panel { 
 position: absolute; 
 } 
 .slider-panel img { 
 border: none; 
 } 
 .slider-extra { 
 position: relative; 
 } 
 .slider-nav { 
 margin-left: -51px; 
 position: absolute; 
 left: 50%; 
 bottom: 4px; 
 } 
 .slider-nav li { 
 background: #3e3e3e; 
 border-radius: 50%; 
 color: #fff; 
 cursor: pointer; 
 margin: 0 2px; 
 overflow: hidden; 
 text-align: center; 
 display: inline-block; 
 height: 18px; 
 line-height: 18px; 
 width: 18px; 
 } 
 .slider-nav .slider-item-selected { 
 background: blue; 
 } 
 .slider-page a{ 
 background: rgba(0, 0, 0, 0.2); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 
 color: #fff; 
 text-align: center; 
 display: block; 
 font-family: "simsun"; 
 font-size: 22px; 
 width: 28px; 
 height: 62px; 
 line-height: 62px; 
 margin-top: -31px; 
 position: absolute; 
 top: 50%; 
 } 
 .slider-page a:HOVER { 
 background: rgba(0, 0, 0, 0.4); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
 } 
 .slider-next { 
 left: 100%; 
 margin-left: -28px; 
 } 
</style> 
<script type="text/javascript"> 
 $(document).ready(function() { 
 var length, 
  currentIndex = 0, 
  interval, 
  hasStarted = false, //是否已經(jīng)開(kāi)始輪播 
  t = 3000; //輪播時(shí)間間隔 
 length = $('.slider-panel').length; 
 //將除了第一張圖片隱藏 
 $('.slider-panel:not(:first)').hide(); 
 //將第一個(gè)slider-item設(shè)為激活狀態(tài) 
 $('.slider-item:first').addClass('slider-item-selected'); 
 //隱藏向前、向后翻按鈕 
 $('.slider-page').hide(); 
 //鼠標(biāo)上懸時(shí)顯示向前、向后翻按鈕,停止滑動(dòng),鼠標(biāo)離開(kāi)時(shí)隱藏向前、向后翻按鈕,開(kāi)始滑動(dòng) 
 $('.slider-panel, .slider-pre, .slider-next').hover(function() { 
  stop(); 
  $('.slider-page').show(); 
 }, function() { 
  $('.slider-page').hide(); 
  start(); 
 }); 
 $('.slider-item').hover(function(e) { 
  stop(); 
  var preIndex = $(".slider-item").filter(".slider-item-selected").index(); 
  currentIndex = $(this).index(); 
  play(preIndex, currentIndex); 
 }, function() { 
  start(); 
 }); 
 $('.slider-pre').unbind('click'); 
 $('.slider-pre').bind('click', function() { 
  pre(); 
 }); 
 $('.slider-next').unbind('click'); 
 $('.slider-next').bind('click', function() { 
  next(); 
 }); 
 /** 
  * 向前翻頁(yè) 
  */ 
 function pre() { 
  var preIndex = currentIndex; 
  currentIndex = (--currentIndex + length) % length; 
  play(preIndex, currentIndex); 
 } 
 /** 
  * 向后翻頁(yè) 
  */ 
 function next() { 
  var preIndex = currentIndex; 
  currentIndex = ++currentIndex % length; 
  play(preIndex, currentIndex); 
 } 
 /** 
  * 從preIndex頁(yè)翻到currentIndex頁(yè) 
  * preIndex 整數(shù),翻頁(yè)的起始頁(yè) 
  * currentIndex 整數(shù),翻到的那頁(yè) 
  */ 
 function play(preIndex, currentIndex) { 
  $('.slider-panel').eq(preIndex).fadeOut(500) 
  .parent().children().eq(currentIndex).fadeIn(1000); 
  $('.slider-item').removeClass('slider-item-selected'); 
  $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); 
 } 
 /** 
  * 開(kāi)始輪播 
  */ 
 function start() { 
  if(!hasStarted) { 
  hasStarted = true; 
  interval = setInterval(next, t); 
  } 
 } 
 /** 
  * 停止輪播 
  */ 
 function stop() { 
  clearInterval(interval); 
  hasStarted = false; 
 } 
 //開(kāi)始輪播 
 start(); 
 }); 
</script> 
</head> 
<body> 
 <div class="slider"> 
 <ul class="slider-main"> 
  <li class="slider-panel"> 
  <a href="http://www.dbjr.com.cn" target="_blank"><img alt="關(guān)注腳本之家" title="關(guān)注腳本之家" src="images/1.jpg"></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="http://www.dbjr.com.cn" target="_blank"><img alt="關(guān)注腳本之家" title="關(guān)注腳本之家" src="images/2.jpg"></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="http://www.dbjr.com.cn" target="_blank"><img alt="關(guān)注腳本之家" title="關(guān)注腳本之家" src="images/3.jpg"></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="http://www.dbjr.com.cn" target="_blank"><img alt="關(guān)注腳本之家" title="關(guān)注腳本之家" src="images/4.jpg"></a> 
  </li> 
 </ul> 
 <div class="slider-extra"> 
  <ul class="slider-nav"> 
  <li class="slider-item">1</li> 
  <li class="slider-item">2</li> 
  <li class="slider-item">3</li> 
  <li class="slider-item">4</li> 
  </ul> 
  <div class="slider-page"> 
  <a class="slider-pre" href="javascript:;;"><</a> 
  <a class="slider-next" href="javascript:;;">></a> 
  </div> 
 </div> 
 </div> 
</body> 
</html>

至此一個(gè)簡(jiǎn)單的jquery輪播效果就完成了,當(dāng)然還有很多需要改進(jìn)的地方。

相關(guān)文章

  • JS對(duì)HTML表格進(jìn)行增刪改操作

    JS對(duì)HTML表格進(jìn)行增刪改操作

    這篇文章主要為大家詳細(xì)介紹了JS對(duì)HTML表格進(jìn)行增刪改操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-08-08
  • 如何用JavaScript讓你的瀏覽器說(shuō)話

    如何用JavaScript讓你的瀏覽器說(shuō)話

    這篇文章主要介紹了如何用JavaScript讓你的瀏覽器說(shuō)話,對(duì)語(yǔ)音感興趣的同學(xué),可以實(shí)驗(yàn)一下
    2021-04-04
  • 微信小程序購(gòu)物車、父子組件傳值及calc的注意事項(xiàng)總結(jié)

    微信小程序購(gòu)物車、父子組件傳值及calc的注意事項(xiàng)總結(jié)

    這篇文章主要給大家介紹了關(guān)于微信小程序購(gòu)物車、父子組件傳值及calc的注意事項(xiàng)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2018-11-11
  • js的邏輯運(yùn)算符 ||

    js的邏輯運(yùn)算符 ||

    初次見(jiàn)到這樣語(yǔ)句 a=a || [] 還有些納悶,因?yàn)樵谄渌Z(yǔ)言中沒(méi)見(jiàn)過(guò)有如此用法。
    2010-05-05
  • input輸入密碼變黑點(diǎn)密文的實(shí)現(xiàn)方法

    input輸入密碼變黑點(diǎn)密文的實(shí)現(xiàn)方法

    本文主要介紹了Jquery Easyui驗(yàn)證擴(kuò)展,Easyui驗(yàn)證,Easyui校驗(yàn),js正則表達(dá)式。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-01-01
  • JS/HTML5游戲常用算法之追蹤算法實(shí)例詳解

    JS/HTML5游戲常用算法之追蹤算法實(shí)例詳解

    這篇文章主要介紹了JS/HTML5游戲常用算法之追蹤算法,結(jié)合吃豆人游戲的算法原理以實(shí)例形式詳細(xì)分析了追蹤算法的相關(guān)算法操作技巧與注意事項(xiàng),需要的朋友可以參考下
    2018-12-12
  • javascript 鍵盤事件總結(jié) 推薦

    javascript 鍵盤事件總結(jié) 推薦

    在進(jìn)入正題前,我們看一下瀏覽器對(duì)于鍵盤的一些默認(rèn)事件,這有助于我們用javascript截獲鍵盤事件。
    2009-12-12
  • 微信小程序?qū)崿F(xiàn)加入購(gòu)物車滑動(dòng)軌跡

    微信小程序?qū)崿F(xiàn)加入購(gòu)物車滑動(dòng)軌跡

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)加入購(gòu)物車滑動(dòng)軌跡,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • 原生JS實(shí)現(xiàn)拖拽效果

    原生JS實(shí)現(xiàn)拖拽效果

    這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • Web componentd組件內(nèi)部事件回調(diào)及痛點(diǎn)剖析

    Web componentd組件內(nèi)部事件回調(diào)及痛點(diǎn)剖析

    這篇文章主要為大家介紹了Web componentd組件內(nèi)部事件回調(diào)示例及其痛點(diǎn)的剖析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2021-11-11

最新評(píng)論