Jquery代碼實(shí)現(xiàn)圖片輪播效果(一)
文章寫的不好,還請(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)的地方。
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開(kāi)發(fā)必備
- 原生js和jquery實(shí)現(xiàn)圖片輪播特效
- jQuery圖片輪播的具體實(shí)現(xiàn)
- 基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- jquery實(shí)現(xiàn)定時(shí)自動(dòng)輪播特效
- 原生js和jquery實(shí)現(xiàn)圖片輪播淡入淡出效果
- jquery 實(shí)現(xiàn)輪播圖詳解及實(shí)例代碼
- 利用jquery寫的左右輪播圖特效
- jQuery實(shí)現(xiàn)碎片輪播效果
- jQuery實(shí)現(xiàn)炸裂輪播效果
相關(guān)文章
微信小程序購(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-11input輸入密碼變黑點(diǎn)密文的實(shí)現(xiàn)方法
本文主要介紹了Jquery Easyui驗(yàn)證擴(kuò)展,Easyui驗(yàn)證,Easyui校驗(yàn),js正則表達(dá)式。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01微信小程序?qū)崿F(xiàn)加入購(gòu)物車滑動(dòng)軌跡
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)加入購(gòu)物車滑動(dòng)軌跡,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11Web componentd組件內(nèi)部事件回調(diào)及痛點(diǎn)剖析
這篇文章主要為大家介紹了Web componentd組件內(nèi)部事件回調(diào)示例及其痛點(diǎn)的剖析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2021-11-11