php轮播插件,jQuery插件boxScroll实现图片轮播特效_jquery

BoxScroll

常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单，到了尽头得往回跑，看看注释就知道了。

代码如下:

HTML

简易图片轮播插件

ToLeft

ToRight

1

2

3

4

5

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

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文原创发布php中文网，转载请注明出处，感谢您的尊重！