jQuery插件boxScroll實現圖片輪播特效

2024-05-06 16:23:05

字體：大中小

來源：轉載

供稿：網友

本文給大家分享的是使用jQuery插件Boxscroll來實現簡單的圖片輪播特效的代碼，非常簡單實用，有需要的小伙伴可以參考下。

BoxScroll

常見圖片輪播效果的簡單實現?？梢詳底至斜砜刂苹蛘咦笥野存I控制。邏輯很簡單，到了盡頭得往回跑，看看注釋就知道了。

代碼如下:

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);