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。
以上所述就是本文的全部內容了，希望大家能夠喜歡。