運行效果圖

html代碼

<div id="banner"><ul><li><img src="images/lbt1.jpg"></li><li><img src="images/lbt2.jpg"/></li><li><img src="images/lbt3.jpg"/></li></ul><div id="direction"><a href="##"><</a><a href="##">></a></div><div id="btn"><a href="##" class="active">1</a><a href="##">2</a><a href="##">3</a></div></div>

css代碼

*{margin: 0;padding: 0; } li {list-style: none; } a {font-size:12px;color: #333333;text-decoration: none; } #banner{width:1211px;height: 400px;position: relative;overflow: hidden;margin: 0 auto;} #banner>ul>li{float: left;position: absolute;opacity: 0;} #banner>ul>li:nth-of-type(1){opacity: 1; } #banner>ul>li>img{width:1435px;height: 400px;cursor: pointer;} #direction{display: none;position: relative; } #direction>a{position: absolute;width:40px;height:40px;font-size: 20px;text-align: center;line-height:40px;color: #fff;text-decoration: none;background: #000;top:160px;opacity: 0.5;border-radius:50px 60px; } #direction>a:hover{opacity: 1; } #direction>a:nth-child(2){right: 0;}#direction>a:nth-child(1){left: 40px; } #btn{position: absolute;left:50%;bottom:0;} #btn>a{float: left;width:25px;height: 25px;line-height: 25px;text-align: center;background: #444444;color: #FFFFFF;border-radius: 50%;margin:5px;} #btn>.active{background:#669933;}

JS代碼

/*把屬性寫在構造函數里*/ function Banner(ele){this.aLi = ele.find("li"); this.next = 0;this.iNow = 0;this.dir1 = $("#direction>a").first();this.dir2 = $("#direction>a").last();this.banner = $("#banner");this.direction = $("#direction");this.timer = null; this.aBtn = $("#btn>a");this.index = null;this.init(); }/*對jquery對象擴展方法，把方法添加到原型對象上*/ $.extend(Banner.prototype,{// 初始化init:function(){this.autoplay();this.indicator();this.dir1.on("click",$.proxy(this.dire,this));this.dir2.on("click",$.proxy(this.handleAuto,this));this.banner.on("mouseover",$.proxy(this.stopPlay,this));this.banner.on("mouseout",$.proxy(this.continuePlay,this));},//點擊右邊的按鈕及自動播放handleAuto:function(){if(this.next>=this.aLi.length-1){this.next = 0;}else{this.next ++;}this.toImg();},//點擊左邊的按鈕dire:function () {if (this.next == 0) {this.next =this.aLi.length - 1;} else {this.next--;}this.toImg();},// 指示器indicator:function(){this.aBtn.each($.proxy(this.handleIndicatorEach,this))},handleIndicatorEach:function(index,val){this.aBtn.eq(index).on("mouseover",index,$.proxy(this.dicator,this))},dicator:function(e){// 保存當前下標this.index = e.data;this.aBtn.eq(this.index).addClass("active").siblings().removeClass();//移入的時候讓當前這個li顯示this.aLi.eq(this.index).fadeTo(500,1).siblings().fadeTo(500,0);// 因為next與this.index不是同一個東西 因此需要他們兩個同步this.next = this.index;},//移入的時候輪播停止stopPlay:function(){clearInterval(this.timer);this.direction.attr("style","display:block");},//移出的時候輪播繼續continuePlay:function(){this.autoplay();this.direction.attr("style","display:none");}，//自動輪播autoplay:function(){this.timer = setInterval($.proxy(this.handleAuto,this),3000)},//運動原理toImg:function(){this.aLi.eq(this.iNow).fadeTo(500,0);this.aLi.eq(this.next).fadeTo(500,1);this.iNow = this.next;$(this.aBtn[this.next]).addClass("active").siblings().removeClass();} }) new Banner($("#banner"));

總結

以上是生活随笔為你收集整理的面向对象写轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。