jQuery插件boxScroll實(shí)現(xiàn)圖片輪播特效

2024-05-06 16:23:05

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

本文給大家分享的是使用jQuery插件Boxscroll來(lái)實(shí)現(xiàn)簡(jiǎn)單的圖片輪播特效的代碼，非常簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。

BoxScroll

常見(jiàn)圖片輪播效果的簡(jiǎn)單實(shí)現(xiàn)。可以數(shù)字列表控制或者左右按鍵控制。邏輯很簡(jiǎn)單，到了盡頭得往回跑，看看注釋就知道了。

代碼如下:

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>簡(jiǎn)易圖片輪播插件</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

* 兼容等常見(jiàn)瀏覽器

*/

;(function($,window,document,undefined){

//定義構(gòu)造函數(shù)

var BoxObj=function(ele,opt){

this.$element=ele; //最外層對(duì)象

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(){

//接收對(duì)象屬性

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;//必須在外面定義保證全局針對(duì)這一功能只有這一個(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窗口沒(méi)有在動(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對(duì)象的方法，0為vertical，1為horizontal

$.fn.boxScroll=function(options){

//創(chuàng)建實(shí)體

var boxObj=new BoxObj(this,options);

//用尾調(diào)的形式調(diào)用對(duì)象方法

return boxObj.commonScroll();

}

})(jQuery,window,document);