BoxScroll
常見圖片輪播效果的簡單實(shí)現(xiàn)。可以數(shù)字列表控制或者左右按鍵控制。邏輯很簡單，到了盡頭得往回跑，看看注釋就知道了。
代碼如下:
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;/*足夠大能放下即可,如果需要上下滾動(dòng)，改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){ //定義構(gòu)造函數(shù) var BoxObj=function(ele,opt){ this.$element=ele; //最外層對象 this.defaults={ 'style': 0 ,//滾動(dòng)樣式選擇,默認(rèn)為普通效果 'speed': 1 ,//默認(rèn)為1s 'direction': 'left',//默認(rèn)為向左邊滾動(dòng) 'toLeft':$(ele).children('.picOuterBox').children('.arrowLeft'),//默認(rèn)格式下重要位置 'toRight':$(ele).children('.picOuterBox').children('.arrowRight'), 'ControlUl':$(ele).children('.picControl').children('ul') }, this.options=$.extend({},this.defaults,opt ); //這里可以添加一些通用方法 } //給構(gòu)造函數(shù)添加方法 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(){//判斷當(dāng)前圖片的位置 imgIndex=Math.round(parseInt($(boxWindow).css("margin-left"))*(-1)/boxWidth); } var timer;//必須在外面定義保證全局針對這一功能只有這一個(gè)計(jì)時(shí)器 timer=setInterval(function(){ boxScroll(imgIndex,direction); },5000); function rest(){ clearInterval(timer); timer=setInterval(function(){ boxScroll(imgIndex,direction); },5000); } //綁定點(diǎn)擊按鈕 $(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')) {//當(dāng)ul窗口沒有在動(dòng)時(shí) if(!dir){//響應(yīng)ul li control操作 //此時(shí)dir=0，則依靠傳入的imgIndex imgIndex=index; //其它時(shí)候dir!=0,則依靠dir }else{//響應(yīng)toLeft和toRight if(dir==1){//向右動(dòng) getImgIndex(); if (imgIndex==(imgIndexMax-1)) { imgIndex=0; }else{ imgIndex+=1; } }else{//向左動(dòng) 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){ //創(chuàng)建實(shí)體 var boxObj=new BoxObj(this,options); //用尾調(diào)的形式調(diào)用對象方法 return boxObj.commonScroll(); } })(jQuery,window,document);詳細(xì)下載參見https://github.com/codetker/myBoxScroll。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
新聞熱點(diǎn)
疑難解答
