BoxScroll
常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单,到了尽头得往回跑,看看注释就知道了。
代码如下:
HTML
CSS
}
.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;
}
.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
//给构造函数添加方法
BoxObj.prototype={
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,document);
详细下载参见。
以上所述就是本文的全部内容了,希望大家能够喜欢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。