jquery Banner輪播選項卡
更新時間:2016年12月26日 14:49:04 作者:itSeven7
這篇文章主要為大家詳細介紹了jquery Banner輪播選項卡效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery Banner輪播選項卡的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wraper{ width: 1200px; margin: 0 auto; position: relative; } .banner{ width: 100%; position: relative; height: 460px; } .banner ul{ position:absolute; left:0; top:0; width:10000px; } .ba_slider{ width:1920px; height:460px; position:absolute; overflow: hidden; left: 50%; margin-left: -960px; } .ba_center{ position: absolute; height: 460px; left: 50%; top: 0; margin-left:-600px; } .ba_slider ul{ position:relative; width: 100000px; } .ba_slider ul li{ position: relative; float: left; } .ba_slider img{ width:1920px; height:460px; } .ba_prev,.ba_next{ width:60px; height:100px; background:rgba(0,0,0,0.5); color:#fff; text-decoration:none; font-size:50px; line-height:100px; text-align:center; position:absolute; top:50%; margin-top:-50px; z-index:99; } .ba_prev{ left:0; } .ba_next{ right:0; } .ba_slider ol{ position:absolute; left:50%; bottom:10px; overflow:hidden; margin-left:-220px; } .ba_slider ol li{ width:100px; height:6px; background:rgb(85,85,85); float:left; margin-right:10px; } .ba_slider ol li.on{ background:#fff; } </style> </head> <body> <div class="banner"> <div class="ba_slider"> <div class="wraper ba_center"> <a class="ba_prev" href="javascript:;"><</a> <a class="ba_next" href="javascript:;">></a> </div> <ul> <li> <a href="javascript:;"> <img src="http://scimg.jb51.net/allimg/140708/11-140FQ53531Q9.jpg" alt="" /> </a> </li> <li> <a href="javascript:;"> <img src="http://sc.jb51.net/uploads/allimg/140520/10-140520212515A9.jpg" alt="" /> </a> </li> <li> <a href="javascript:;"> <img src="http://www.xxyo.com/pictures/xz/4.jpg" alt="" /> </a> </li> <li> <a href="javascript:;"> <img src="http://img1.3lian.com/2015/w7/85/d/25.jpg" alt="" /> </a> </li> </ul> <ol> <li class="on"></li> <li></li> <li></li> <li></li> </ol> </div> </div> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script> cBanner(); function cBanner(){ var iNow=0; //初始化自定義值 var w = $('.ba_slider ul img').width(); //獲取圖片寬度 function bTimer(){ //定時器 clearInterval(b_timer); //先關(guān)后開 var b_timer = setInterval(function(){ iNow++; if(iNow == $('.ba_slider ul li').length){ //判斷是否最后一張圖片 iNow=0; } tab(); //當前分頁器高亮 $('.ba_slider ul').eq(0).animate({ //ul運動距離 left:-iNow*w },1000); },2000); //定時器時間 $('.ba_slider').mouseover(function(){ //鼠標移入關(guān)閉定時器 clearInterval(b_timer); }); } bTimer(); //定時器函數(shù)調(diào)用 $('.ba_slider').mouseout(function(){ //鼠標移出調(diào)用定時器 bTimer(); }); $('.ba_next').click(function (){ //點擊切換下一個圖片 iNow++; if(iNow==$('.ba_slider ul li').length){ //判斷iNow是否為最后一張圖片 iNow=0; } $('.ba_slider ul').eq(0).animate({ //運動距離 left:-iNow*w },1000); tab(); //當前分頁器高亮 }); $('.ba_prev').click(function (){ //點擊切換上一個 iNow--; if(iNow==-1){ //判斷是否是第一張圖片 iNow = $('.ba_slider ul li').length-1 ; } $('.ba_slider ul').eq(0).animate({ //運動距離 left:-iNow*w },1000); tab(); //當前分頁器高亮 }); $('ol li').click(function (){ //點擊分頁器選擇圖片 iNow=$(this).index(); //iNow賦值為當前分頁器索引值 $('.ba_slider ul').eq(0).animate({ left:-iNow*w },1000); tab(); }); function tab(){ //分頁器高亮效果 $('ol li').removeClass('on'); $('ol li').eq(iNow).addClass('on'); } }; </script> </html>
github地址:https://github.com/seven-it/jqBanner
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery.alert 彈出式復選框?qū)崿F(xiàn)代碼
jquery alert 彈出式 復選框,需要的朋友可以參考下,代碼有點亂。2009-06-06Hallo.js基于jQuery UI所見即所得的Web編輯器
Hallo.js是一個簡單的富文本編輯器,基于jQuery UI的部件,利用HTML5的contentEditable功能實現(xiàn)了即時編輯功能,其主要目的是為了提供良好的書寫體驗,對Hallo.js感興趣的小伙伴們可以參考一下2016-01-01jQuery實現(xiàn)仿QQ頭像閃爍效果的文字閃動提示代碼
這篇文章主要介紹了jQuery實現(xiàn)仿QQ頭像閃爍效果的文字閃動提示代碼,涉及jQuery正則表達式及定時函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11jquery事件preventDefault()方法用法實例
這篇文章主要介紹了jquery事件preventDefault()方法用法,實例分析了preventDefault()方法的功能及使用技巧,需要的朋友可以參考下2015-01-01