点击按钮左右滚动，图片没有的时候按钮变成不可点

菜鸟级别的前端制作写的jquery滚动代码，不废话了垃圾代码

style

*{ padding:0px; margin:0px;}
li{ list-style:none;}
#scroll,#scroll1{width:600px; margin:20px auto; position:relative; height:160px; overflow:hidden;}
.list{
height:120px;
position:absolute;
left:0px;
top:20px;
overflow:hidden;}
.list li{
width:100px;
float:left;
text-align:center;}
.list li a,.list li p{
display:block;
width:90px;
margin:0px auto;
}
.list li a{
background:#F00;
height:90px;}
.list li p{
height:30px;
line-height:30px;}

html

<div id="scroll">
<a class="btn_l" href="javascript:void(0)">向左</a>
<a class="btn_r" href="javascript:void(0)">向右</a>
<ul class="list">
<li>
<a href=""></a>
<p>1111</p>
</li>
<li>
<a href=""></a>
<p>2222</p>
</li>
<li>
<a href=""></a>
<p>3333</p>
</li>
<li>
<a href=""></a>
<p>4444</p>
</li>
<li>
<a href=""></a>
<p>5555</p>
</li>
<li>
<a href=""></a>
<p>6666</p>
</li>
<li>
<a href=""></a>
<p>7777</p>
</li>
<li>
<a href=""></a>
<p>8888</p>
</li>
<li>
<a href=""></a>
<p>9999</p>
</li>
</ul>
</div>

js

(function($){
$.fn.scrollFn = function(btn1,btn2,ul){
var word=['不可点击','向左','向右']
var timer=null;
var visibleLen = 6;//显示个数
var Len = ul.find('li').length;//获取子元素的个数
var liWidth=ul.find('li').width();//获取li宽度
var ulWidth = parseInt(Len * liWidth);//获取整个ul的宽度
if(parseInt(ul.css('left'))==-(Len%visibleLen)*liWidth){//默认加载的时候图片是否可点
btn1.unbind( "click" );
btn2.html(word[0]);
}
else if(parseInt(ul.css('left'))==0){//默认加载的时候图片是否可点
btn2.unbind( "click" );
btn2.html(word[0]);
}
//btn1点击 向左滚动
btn1.click(function(){
if(!ul.is(':animated')){//避免点击按钮过快产生图片滚动过快的bug
if(parseInt(ul.css('left'))==-(Len%visibleLen)*liWidth){//当没有图片的时候显示不可点
return false;
}
else{
btn1.html(word[1])
btn2.html(word[2]);
ul.animate({
left:'-='+liWidth
},
'slow',
function(){
if(parseInt(ul.css('left'))==-(Len%visibleLen)*liWidth){
btn1.html(word[0]);
}
})
}
}

})
//btn2点击 向右滚动
btn2.click(function(){
//console.log(ul.css('left'))
if(parseInt(ul.css('left'))==0){
btn2.html(word[0]);
}
else{
if(!ul.is(':animated')){
//console.log(ul.css('left'))
$(this).html(word[2]);
btn1.html(word[1]);
ul.animate({
left:'+='+liWidth
},
'slow',
function(){
if(parseInt(ul.css('left'))==0){
btn2.html(word[0]);
}
}
)
}
}
})
}
})(jQuery)
$(function(){
$('#scroll').scrollFn($('.btn_l'),$('.btn_r'),$('#scroll').find('ul'));
})

转载于:https://www.cnblogs.com/dm511418503/archive/2013/03/11/2953929.html