jQuery图片左右滚动代码 有左右按钮实例
用jquery封装了一个控制图片左右滚动的插件，有左右按钮可以点击实现图片滚动效果。
代码如下：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>slide</title>
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script><br><style>
*{
padding:0;
margin:0;
list-style:none
}
img{
border:none
}
#img-slider,#img-slider-2{
position:relative;
width:560px;
height:80px;
}
.slider-wrap{
width:480px;/*width的值要跟所有的li宽度总和一样*/
overflow:hidden;
position:relative;
height:150px;
margin-left:40px;
}
.slider-wrapul{
zoom:1;
position:absolute;
left:0;
top:0;
width:9999px;
}
.slider-wrapulli{
float:left;
width:120px;
text-align:center;
padding:5px0;
}
#prev,#next{
position:absolute;
top:30px;
left:0px;
width:40px
}
#next{
left:auto;
right:0px
}
</style><br><scripttype="text/javascript">
$(function(){
$("#img-slider").imgScroll();
$("#img-slider-2").imgScroll();
});
/*插件*/
(function($){
$.fn.imgScroll=function(){
varisDone=false,
scrollBox=$(this),
prevBtn=scrollBox.find("#prev"),
nextBtn=scrollBox.find("#next"),
imgBox=scrollBox.find("ul"),
next_over=imgBox.find("li").width()*imgBox.find("li").length,
slide_width=$(".slider-wrap").width();
returnthis.each(function(){
functionsetOpacity(){
imgBox.animate({
opacity:1
},800,function(){
isDone=false;
})
}
functionscrollNext(){
if(!isDone&&next_over+parseInt(imgBox.css("left"),10)>slide_width){
isDone=true;
imgBox.animate({
left:"+="+"-"+slide_width,
opacity:0.5
},800,setOpacity);
}
//isDone=false
}
functionscrollPrev(){
if(!imgBox.is(':animated')&&parseInt(imgBox.css("left"),10)!=0){
imgBox.animate({
left:"+="+slide_width,//不断左移
opacity:0.5
},800,setOpacity);
}
}
prevBtn.bind('click',scrollPrev);//向前滚动
nextBtn.bind('click',scrollNext);//向后滚动
})
}
})(jQuery);
</script>
</head>
<body>
<divid="img-slider">
<buttonid="prev">prev</button>
<divclass="slider-wrap">
<ul>
<li><ahref="#"><imgsrc="https://www.nhooo.com/images/logo.gif"width="100"/></a></li>
<li><ahref="#"><imgsrc="https://www.nhooo.com/images/logo.gif"width="100"/></a></li>
<li><ahref="#"><imgsrc="https://www.nhooo.com/images/logo.gif"width="100"/></a></li>
<li><ahref="#"><imgsrc="https://www.nhooo.com/images/logo.gif"width="100"/></a></li>
<li><ahref="#"><imgsrc="https://www.nhooo.com/images/logo.gif"width="100"/></a></li>
<li><ahref="#"><imgsrc="https://www.nhooo.com/images/logo.gif"width="100"/></a></li>
</ul>
</div>
<buttonid="next">next</button>
</div>
<divid="img-slider-2">
<buttonid="prev">prev</button>
<divclass="slider-wrap">
<ul>
<li><ahref="#"><imgsrc="https://www.nhooo.com/images/logo.gif"width="100"/></a></li>
<li><ahref="#"><imgsrc="https://www.nhooo.com/images/logo.gif"width="100"/></a></li>
<li><ahref="#"><imgsrc="https://www.nhooo.com/images/logo.gif"width="100"/></a></li>
<li><ahref="#"><imgsrc="https://www.nhooo.com/images/logo.gif"width="100"/></a></li>
<li><ahref="#"><imgsrc="https://www.nhooo.com/images/logo.gif"width="100"/></a></li>
<li><ahref="#"><imgsrc="https://www.nhooo.com/images/logo.gif"width="100"/></a></li>
</ul>
</div>
<buttonid="next">next</button>
</div>
</body>
</html>
大家可以直接复制上面的代码，保存成html测试。
以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持毛票票。