jquery控制左右箭头滚动图片列表的实例_jquery

来源：动视网责编：小采时间：2020-11-27 21:09:54

jquery控制左右箭头滚动图片列表的实例_jquery

jquery控制左右箭头滚动图片列表的实例_jquery: 代码如下: jq控制左右箭头滚动图片列表 *{ margin:0; padding:0;font-size: 12px;} ul{ list-style:none;} .slider{ width:760px;border: 1px #708090 solid; padding:10px 20px;height: 130px;ma

推荐度：

点击下载本文 文档为doc格式

导读jquery控制左右箭头滚动图片列表的实例_jquery: 代码如下: jq控制左右箭头滚动图片列表 *{ margin:0; padding:0;font-size: 12px;} ul{ list-style:none;} .slider{ width:760px;border: 1px #708090 solid; padding:10px 20px;height: 130px;ma

代码如下:

jq控制左右箭头滚动图片列表

$(function(){
var oPic=$('#slider_pic').find('ul');
var oImg=oPic.find('li');
var oLen=oImg.length;
var oLi=oImg.width();
var prev=$("#prev");
var next=$("#next");

oPic.width(oLen*210);//计算总长度
var iNow=0;
var iTimer=null;
prev.click(function(){
if(iNow>0){
iNow--;

}
ClickScroll();
})
next.click(function(){
if(iNow iNow++
}
ClickScroll();
})

function ClickScroll(){

iNow==0? prev.addClass('no_click'): prev.removeClass('no_click');
iNow==oLen-3?next.addClass("no_click"):next.removeClass("no_click");

oPic.animate({left:-iNow*210})
}

})

<<
>>