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

2024-05-06 16:23:05

字体：大中小

来源：转载

供稿：网友

本文给大家分享的是使用jQuery插件Boxscroll来实现简单的图片轮播特效的代码，非常简单实用，有需要的小伙伴可以参考下。

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