jQuery實(shí)現(xiàn)呼吸輪播圖
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)呼吸輪播圖的具體代碼,供大家參考,具體內(nèi)容如下
HTML
<div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/01.jpg" width="500" height="200" /></li> <li><img src="images/02.jpg" width="500" height="200" /></li> <li><img src="images/03.jpg" width="500" height="200" /></li> <li><img src="images/04.jpg" width="500" height="200" /></li> <li><img src="images/05.jpg" width="500" height="200" /></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> <div id="arr"> <span id="left"><</span> <span id="right">></span> </div> </div>
CSS
* { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 200px; overflow: hidden; position: relative; } .screen li { width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0; top: 0px; width: 2500px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current { background: yellow; } #arr { display: none; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑體'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; }
JS代碼
$(function () { var index = 0; //鼠標(biāo)移入 $('#box').mouseenter(function(){ $('#arr').show(); }) //鼠標(biāo)移出 $('#box').mouseleave(function(){ $('#arr').hide(); }) $('#right').click(function(){ if(index == $('.screen>ul>li').length-1){ //最后一張 index = 0; }else { index++; } $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200); //下方頁(yè)碼對(duì)應(yīng)高亮 $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current') }) $('#left').click(function(){ if(index == 0){ //第一張 index = $('.screen>ul>li').length-1; }else { index--; } $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200); //下方頁(yè)碼對(duì)應(yīng)高亮 $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current') }) //頁(yè)碼點(diǎn)擊輪播圖片 $('.screen>ol>li').click(function(){ index = $(this).index() $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200); $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current') }) });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery實(shí)現(xiàn)無(wú)縫輪播圖
- jQuery呼吸輪播圖制作原理詳解
- jQuery實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果
- 用jquery實(shí)現(xiàn)輪播圖效果
- jquery插件實(shí)現(xiàn)輪播圖效果
- JS+JQuery實(shí)現(xiàn)無(wú)縫連接輪播圖
- Swiper如何實(shí)現(xiàn)兩行四列輪播圖效果實(shí)例
- bootstrap實(shí)現(xiàn)輪播圖效果
- Bootstrap實(shí)現(xiàn)基于carousel.js框架的輪播圖效果
- jQuery實(shí)現(xiàn)的超簡(jiǎn)單輪播圖功能示例【代碼解釋】
相關(guān)文章
jQuery實(shí)現(xiàn)簡(jiǎn)易的天天愛消除小游戲
貌似最近騰訊手機(jī)游戲天天愛消除挺火的,我也是粉絲之一,最近對(duì)javascript一直比較感興趣然后想用js仿造一個(gè),應(yīng)該不是太難,2015-10-10jQuery動(dòng)態(tài)添加元素后元素注冊(cè)事件失效解決
這篇文章主要介紹了jQuery動(dòng)態(tài)添加元素后元素注冊(cè)事件失效解決,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08原生js實(shí)現(xiàn)addclass,removeclass,toggleclasss實(shí)例
下面小編就為大家?guī)?lái)一篇原生js實(shí)現(xiàn)addclass,removeclass,toggleclasss實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起 小編過(guò)來(lái)看看吧2016-11-11jquery入門必備的基本認(rèn)識(shí)及實(shí)例(整理)
本文整理了一些jquery入門必備的基本知識(shí)及相關(guān)實(shí)例,適合初學(xué)者學(xué)習(xí),另附一些jquery的常用事件,感興趣的各位可不要錯(cuò)過(guò)了哈2013-06-06JQuery實(shí)現(xiàn)動(dòng)態(tài)添加刪除評(píng)論的方法
這篇文章主要介紹了JQuery實(shí)現(xiàn)動(dòng)態(tài)添加刪除評(píng)論的方法,涉及jQuery處理鼠標(biāo)事件及json數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2015-05-05jQuery Ajax請(qǐng)求后臺(tái)數(shù)據(jù)并在前臺(tái)接收
這篇文章主要介紹了jQuery Ajax請(qǐng)求后臺(tái)數(shù)據(jù)并在前臺(tái)接收的相關(guān)資料,需要的朋友可以參考下2016-12-12jquery.Jcrop結(jié)合JAVA后臺(tái)實(shí)現(xiàn)圖片裁剪上傳實(shí)例
這篇文章主要介紹了jquery.Jcrop結(jié)合JAVA后臺(tái)實(shí)現(xiàn)圖片裁剪上傳實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-11-11