BoxScroll
常見圖片輪播效果的簡單實現。可以數字列表控制或者左右按鍵控制。邏輯很簡單，到了盡頭得往回跑，看看注釋就知道了。
代碼如下:
HTML
<!doctype html><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta content="" name="keywords" /><meta content="" name="description" /><meta name="author" content="codetker" /><head><title>簡易圖片輪播插件</title><link href="style/reset.css" rel="stylesheet" type="text/css"><link href="style/style.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/jquery.codetker.boxScroll.js"></script></head><body> <div class="wrap"> <div class="scrollBox"> <div class="picOuterBox boxStyle"> <div class="arrow arrowLeft">ToLeft</div> <div class="arrow arrowRight">ToRight</div> <ul class="picInnerBox boxStyle"> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> </ul> </div> <div class="picControl"> <ul> <li class="liSelected">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </div><script type="text/javascript"> $(document).ready(function(){ $(".scrollBox").boxScroll(); });</script></body></html>CSS
@charset "utf-8";/* CSS Document */body{ margin:0 0; padding:0 0; height:100%; width:100%;}.wrap{ font-family:"微軟雅黑","宋體", Times, "Times New Roman", serif; font-size:14px; margin:0 0; padding:0 0; height:100%; width:100%; overflow:hidden;}.boxStyle{/*照片大小*/ width: 500px; height: 256px;}.scrollBox{ position: relative; width: 500px; margin: 0 auto;}.picInnerBox{ width: 10000px;/*足夠大能放下即可,如果需要上下滾動，改height*/ overflow: hidden;}.picInnerBox li{ cursor: pointer; float: left;}.picOuterBox{ overflow: hidden;}.arrow{ position: absolute; top: 45%; height: 40px; cursor: pointer; z-index: 99; }.arrow:hover{ color: #fff;}.arrowLeft{ float: left; left: 5%;}.arrowRight{ float: right; right: 5%;}.picControl{ overflow: auto; width: 100px; margin: 0 auto;}.picControl ul li{ cursor: pointer; float: left; width: 20px; height: 20px; text-align: center;}.picControl ul li:hover{ color:red;}.liSelected{ color: red;}JavaScript
/* * boxScroll 0.1 * 兼容等常見瀏覽器 */ ;(function($,window,document,undefined){ //定義構造函數 var BoxObj=function(ele,opt){ this.$element=ele; //最外層對象 this.defaults={ 'style': 0 ,//滾動樣式選擇,默認為普通效果 'speed': 1 ,//默認為1s 'direction': 'left',//默認為向左邊滾動 'toLeft':$(ele).children('.picOuterBox').children('.arrowLeft'),//默認格式下重要位置 'toRight':$(ele).children('.picOuterBox').children('.arrowRight'), 'ControlUl':$(ele).children('.picControl').children('ul') }, this.options=$.extend({},this.defaults,opt ); //這里可以添加一些通用方法 } //給構造函數添加方法 BoxObj.prototype={ commonScroll:function(){ //接收對象屬性 var boxWindow=$(this.$element).children('.picOuterBox').children('.picInnerBox'); var speed=this.defaults.speed; var style=this.defaults.style; var direction=(this.defaults.direction=='left')? 1 : -1; var toLeft=this.defaults.toLeft; var toRight=this.defaults.toRight; var Control=this.defaults.ControlUl; var boxWidth=$(boxWindow).children('li').width(); var imgIndexMax=$(boxWindow).children('li').length; var imgIndex; function getImgIndex(){//判斷當前圖片的位置 imgIndex=Math.round(parseInt($(boxWindow).css("margin-left"))*(-1)/boxWidth); } var timer;//必須在外面定義保證全局針對這一功能只有這一個計時器 timer=setInterval(function(){ boxScroll(imgIndex,direction); },5000); function rest(){ clearInterval(timer); timer=setInterval(function(){ boxScroll(imgIndex,direction); },5000); } //綁定點擊按鈕 $(Control).delegate('li', 'click', function() { boxScroll($(this).index(),0); rest(); }); //綁定左右按鈕 $(toLeft).click(function() { boxScroll(0,-1); rest(); }); $(toRight).click(function() { boxScroll(0,1); rest(); }); function boxScroll(index,dir){ if (!$(boxWindow).is(':animated')) {//當ul窗口沒有在動時 if(!dir){//響應ul li control操作 //此時dir=0，則依靠傳入的imgIndex imgIndex=index; //其它時候dir!=0,則依靠dir }else{//響應toLeft和toRight if(dir==1){//向右動 getImgIndex(); if (imgIndex==(imgIndexMax-1)) { imgIndex=0; }else{ imgIndex+=1; } }else{//向左動 getImgIndex(); if (imgIndex==0) { imgIndex=(imgIndexMax-1); }else{ imgIndex-=1; } } } $(Control).children('li').eq(imgIndex).addClass('liSelected'); $(Control).children('li').eq(imgIndex).siblings().removeClass('liSelected'); $(boxWindow).animate({ "margin-left":imgIndex*boxWidth*(-1)+'px' }, 1000*speed); } } } } //在插件中使用windowObj對象的方法，0為vertical，1為horizontal $.fn.boxScroll=function(options){ //創建實體 var boxObj=new BoxObj(this,options); //用尾調的形式調用對象方法 return boxObj.commonScroll(); } })(jQuery,window,document);詳細下載參見https://github.com/codetker/myBoxScroll。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
