jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果完整實(shí)例
本文實(shí)例講述了jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>圖片輪播</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel=" rel="external nofollow" stylesheet"> <style type="text/css"> html,body{ padding: 0; margin: 0; } ul,ul li{ list-style: none; margin: 0; padding: 0; } .box{ } #banner{ position: relative; height:auto; overflow: hidden; } #banner ul{ position:absolute; } #banner ul li{ float: left; } #banner ul li img{ width: 100%; height: 100%; } #banner #prevBtn,#banner #nextBtn{ height:80px; width:30px; background:rgba(0,0,0,0.5); position:absolute; top:50%; margin-top:-40px; font-size:30px; line-height:80px; text-align:center; text-decoration:none; color:white; opacity: 0; transition: opacity 0.8s ease; } #banner #prevBtn{ left:0; } #banner #nextBtn{ right:0; } #banner:hover #prevBtn,#banner:hover #nextBtn{ opacity: 1; } .dot{ height:10px; width:10px; border-radius:10px; background:#2196f3; display:inline-block; margin:5px; } .on{ background: #009688; } </style> </head> <body> <div class="box"> <div id="banner"> <ul id="banner-wrap"> <li> <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img1.jpg"> </li> <li> <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img2.jpg"> </li> <li> <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img3.jpg"> </li> <li> <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img4.jpg"> </li> <li> <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img5.jpg"> </li> </ul> </div> </div> <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script> <script type="text/javascript"> (function($,window,document,undefinen){ $.fn.bannerSwiper=function(option){ this.default={ boxWrap:null,//必填 nextBtn:false,//是否往下啟動(dòng)按鈕 prevBtn:false,//是否往上啟動(dòng)按鈕 autoPlay:false,//是否啟動(dòng)自動(dòng)播放 times:3000,//自動(dòng)輪播的時(shí)間間隔, speed:600,//點(diǎn)擊按鈕是切換的速度 circle:false,//是否啟動(dòng)小圓點(diǎn) circleAlign:"center",//小圓點(diǎn)的對(duì)其方式 circleClick:false//小圓點(diǎn)是否可以點(diǎn)擊 } var self=this; this.time=null; this.options=$.extend({},this.default,option); self.flag=true; // 插件入口 this.init=function(){ this.bulid(); } this.bulid=function(){ var self=this; var wrap=self.options.boxWrap; self.num=1; self.nowTime=+new Date(); self.width=$(window).width(); var firstImg=$(wrap).find('li').first(); var lastImg=$(wrap).find('li').last(); $(wrap).append(firstImg.clone()); $(wrap).prepend(lastImg.clone()); self.length=$(wrap).find('li').length; $(wrap).width(self.width*self.length); $(wrap).find('li').width(self.width) $(wrap).parent().height(480); $(wrap).parent().width(self.width); $(wrap).css({'left':-self.width*self.num}) // 是否啟動(dòng)自動(dòng)輪播 if(self.options.autoPlay){ self.plays(); } // 是否啟動(dòng)按鈕 if(self.options.nextBtn){ self.NextBtn(); } // 是否啟動(dòng)按鈕 if(self.options.prevBtn){ self.prevBtn(); } // 是否啟動(dòng)小圓點(diǎn) if(self.options.circle){ self.circle() } if(self.options.circleClick){ self.clickCircle(); } } // // 鼠標(biāo)移入時(shí) self.on('mouseenter',function(){ self.stops(); }) // 鼠標(biāo)移出時(shí) self.on('mouseleave',function(){ self.plays(1); }) // 開(kāi)始計(jì)時(shí)器,自動(dòng)輪播 this.plays=function(){ var self=this; // self.stops(); console.log('play') this.time=setInterval(function(){ self.go(-self.width) },self.options.times); } // 停止計(jì)時(shí)器 this.stops=function(){ console.log('stop'); clearInterval(self.time) } // 手動(dòng)創(chuàng)建按鈕元素 this.prevBtn=function(){ var self=this; var ele=$("<a href='javascript:;' id='prevBtn'><</a>"); self.append(ele); $('#prevBtn').bind("click",function(){ self.go(self.width); }) } // 手動(dòng)創(chuàng)建按鈕元素 this.NextBtn=function(){ var self=this; var ele=$("<a href='javascript:;' id='nextBtn'>></a>"); self.append(ele) $('#nextBtn').bind("click",function(){ self.go(-self.width); }) } // 手動(dòng)創(chuàng)建小圓點(diǎn) this.circle=function(){ var self=this; var ele=$('<div id="circle-wrap"></div>'); for(var i=0;i<self.length-2;i++){ $('<a class="dot" href="javascript:;" rel="external nofollow" ></a>').appendTo(ele) } ele.css({ "position":"absolute", 'bottom':'0', 'right':'0', 'left':'0', 'height':'20px', "padding":"0 10px", 'text-align':self.options.circleAlign }); self.append(ele); self.playCircle(this.num-1); } //小圓點(diǎn)指定當(dāng)前項(xiàng) this.playCircle=function(num){ $('#circle-wrap').find('.dot').eq(num).addClass('on').siblings().removeClass('on'); } // 點(diǎn)擊小圓點(diǎn) this.clickCircle=function(){ var self=this; $('#circle-wrap').find('.dot').on('click',function(){ self.num=$(this).index()+1; self.circlePlay() }) } // 點(diǎn)擊小圓點(diǎn),圖片切換 this.circlePlay=function(){ self.flag=true; if(self.flag){ self.flag=false; $(self.options.boxWrap).stop().animate({ 'left':-self.num*self.width },self.options.speed,function(){ self.flag=true; }); } self.playCircle(this.num-1); } // 點(diǎn)擊按鈕,進(jìn)行輪播,以及自動(dòng)輪播 this.go=function(offset){ var self=this; if(self.flag){ self.flag=false; if(offset<0){ self.num++; if(self.num>self.length-2){ self.num=1; } } if(offset>0){ self.num--; if(self.num<=0){ self.num=self.length-2 } } if(Math.ceil($(self.options.boxWrap).position().left)<-(self.length-2)*self.width){ $(self.options.boxWrap).css({ 'left':-self.width }); } if(Math.ceil($(self.options.boxWrap).position().left)>-self.length){ $(self.options.boxWrap).css({ 'left':-self.width*(self.length-2) }) } self.playCircle(this.num-1); $(self.options.boxWrap).stop().animate({ 'left':$(self.options.boxWrap).position().left+offset },self.options.speed,function(){ self.flag=true; }); } } this.init(); } })(jQuery,window,document) $('#banner').bannerSwiper({ boxWrap:"#banner-wrap", nextBtn:true, prevBtn:true, autoPlay:true, circle:true, circleClick:true }) </script> </body> </html>
運(yùn)行效果:
感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery.parseJSON()函數(shù)詳解
- jQuery each和js forEach用法比較
- 詳解JavaScript原生封裝ajax請(qǐng)求和Jquery中的ajax請(qǐng)求
- Jquery實(shí)現(xiàn)無(wú)縫向上循環(huán)滾動(dòng)列表的特效
- jquery無(wú)縫圖片輪播組件封裝
- 在Vue項(xiàng)目中引入JQuery-ui插件的講解
- 在vue項(xiàng)目中使用Jquery-contextmenu插件的步驟講解
- Node.js Event Loop各階段講解
- 零基礎(chǔ)之Node.js搭建API服務(wù)器的詳解
- Jquery的autocomplete插件用法及參數(shù)講解
相關(guān)文章
jquery基礎(chǔ)知識(shí)第一講之認(rèn)識(shí)jquery
jquery基礎(chǔ)知識(shí)第一講之初次見(jiàn)面,對(duì)jquery有一個(gè)初步認(rèn)識(shí),為之后的學(xué)習(xí)打下基礎(chǔ),感興趣的小伙伴們可以參考一下2016-03-03jquery使用echarts實(shí)現(xiàn)有向圖可視化功能示例
這篇文章主要介紹了jquery使用echarts實(shí)現(xiàn)有向圖可視化功能,結(jié)合完整實(shí)例形式分析了jquery的echarts.js插件實(shí)現(xiàn)有向圖可視化相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-11-11jQuery+PHP+MySQL實(shí)現(xiàn)無(wú)限級(jí)聯(lián)下拉框效果
這篇文章主要介紹了jQuery+PHP+MySQL實(shí)現(xiàn)無(wú)限級(jí)聯(lián)效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02jquery實(shí)現(xiàn)全選、不選、反選的兩種方法
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)全選、不選、反選的兩種方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09jQuery實(shí)現(xiàn)選項(xiàng)聯(lián)動(dòng)輪播效果【附實(shí)例】
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)選項(xiàng)聯(lián)動(dòng)輪播效果【附實(shí)例】。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04jQuery AJAX 調(diào)用WebService實(shí)現(xiàn)代碼
用jQuery調(diào)用其他項(xiàng)目的WebService的代碼,需要的朋友可以參考下。2010-03-03