您的位置：首页 > 其它

控制图片左右滚动

2011-08-11 19:11 176 查看
用jquery封装了一个控制图片左右滚动的插件：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>slide</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<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-wrap ul {
zoom: 1;
position: absolute;
left: 0;
top: 0;
width: 9999px;
}
.slider-wrap ul li {
float: left;
width: 120px;
text-align: center;
padding: 5px 0;
}
#prev, #next {
position: absolute;
top: 30px;
left: 0px;
width: 40px
}
#next {
left: auto;
right: 0px
}
</style>
<script type="text/javascript">
$(function () {
$("#img-slider").imgScroll();
$("#img-slider-2").imgScroll();

});

/*插件*/
(function ($) {
$.fn.imgScroll = function () {
var isDone = 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();

return this.each(function(){
function setOpacity() {
imgBox.animate({
opacity: 1
}, 800,function(){
isDone = false;
})
}
function scrollNext() {
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
}
function scrollPrev() {
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>
<div id="img-slider">
<button id="prev">prev</button>
<div class="slider-wrap">
<ul>
<li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
<li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
<li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
<li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
<li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
<li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
</ul>
</div>
<button id="next">next</button>
</div>

<div id="img-slider-2">
<button id="prev">prev</button>
<div class="slider-wrap">
<ul>
<li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
<li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
<li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
<li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
<li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
<li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
</ul>
</div>
<button id="next">next</button>
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航