图片左右滚动
Posted 社会主义虫不胖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片左右滚动相关的知识，希望对你有一定的参考价值。
图片左右滚动，有时候无缝比较难实现，可以让图片在向左滚动结束然后接着倒着滚动，这样也可以说是一种无缝滚动，在网上下载了一个点击按钮左右滚动的例子，我经过修改，可以左右自由滚动，鼠标滑上停止滚动，图片放大，滑下接着滚动，点击按钮也可以控制左右。看代码：
先看jsp:
<body>
<div class="sliderbox">
<div id="btn-left" class="arrow-btn dasabled" onclick="left2()"></div>
<div class="slider" id="slider">
<ul>
<li><a href="" target="_blank"><img src=\‘#\‘" /go-launcher-ex.jpg"/></a></li>
<li><a href="" target="_blank"><img src=\‘#\‘" /go-sms.jpg"/></a></li>
<li><a href="" target="_blank"><img src=\‘#\‘" /imgwww20120104173328332830083.png"/></a></li>
<li><a href="" target="_blank"><img src=\‘#\‘" /imgwww20120222114514451461239.jpg"/></a></li>
<li><a href="" target="_blank"><img src=\‘#\‘" /ggbook.jpg"/></a></li>
<li><a href="" target="_blank"><img src=\‘#\‘" /imgwww20120621153035303523388.png"/></a></li>
<li><a href="" target="_blank"><img src=\‘#\‘" /lianxiren.jpg"/></a></li>
<li><a href="" target="_blank"><img src=\‘#\‘" /go-touch.jpg"/></a></li>
<li><a href="" target="_blank"><img src=\‘#\‘" /3g-android-market.jpg"/></a></li>
<li><a href="" target="_blank"><img src=\‘#\‘" /3ggoucai.jpg"/></a></li>
<li><a href="" target="_blank"><img src=\‘#\‘" /3.jpg"/></a></li>
<li><a href="" target="_blank"><img src=\‘#\‘" /4.jpg"/></a></li>
<li><a href="" target="_blank"><img src=\‘#\‘" /5.jpg"/></a></li>
</ul>
</div>
<div id="btn-right" class="arrow-btn" onclick="right2()"></div>
</div>
再看css样式：
*{margin:0;padding:0;list-style-type:none;}
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";background:#eee;}
.sliderbox{url(.. /images/index-bottom.jpg) no-repeat 0 -1px;width:530px;height:200px;overflow:hidden;padding:50px 0 0 0;margin:20px auto;}
.arrow-btn{margin:35px 0 0 0;display:inline;url(.. /images/arrow-btn.png) no-repeat;width:26px;height:124px;overflow:hidden;cursor:pointer;}
#btn-left{float:left;margin-left:12px;background-position:0 0;}
#btn-left.dasabled{background-position:0 -124px;}
#btn-right{float:right;margin-right:6px;cursor:pointer;background-position:-26px 0;}
#btn-right.dasabled{background-position:-26px -124px;}
.slider{width:450px;overflow:hidden;position:relative;height:166px;float:left;}
.slider ul{position:absolute;left:0px;top:32px;width:1800px;height:140px;list-style:none;}
.slider li{float:left;width:150px;height:140px;}
.slider a{display:block;text-decoration:none;color:#073a5e;font-size:12px;font-weight:bold;text-align:center;margin-top:24px;}
.slider img{width:90px;display:inline-block!important;}
最后看js:
<script type="text/javascript">
var _scrolling="";
var a=1; //定义a变量，判断鼠标滑上图片是向哪个方向，滑下鼠标控制方向不变
var $slider = $(‘.slider ul‘);
var $slider_child_l = $(‘.slider ul li‘).length;
var $slider_width = $(‘.slider ul li‘).width();
$slider.width($slider_child_l * $slider_width);
var slider_count = 0;
if ($slider_child_l <=3) {
$(‘#btn-right‘).css({cursor: ‘auto‘});
$(‘#btn-right‘).removeClass("dasabled");
}
var time="";
function right1(){//自由向右滚动
if (slider_count >= $slider_child_l - 3){
a=0;
left1();//滚动结束，调用向左的函数，图片向左滚动
}else{
slider_count++;
$slider.animate({left: ‘-=‘ + $slider_width + ‘px‘}, ‘slow‘);
slider_pic();
time = setTimeout("right1()",2000);
}
}
function left1(){//自由向左滚动
if (slider_count <= 0) {
a=1;
right1(); //滚动结束，调用向右函数，图片向右滚动
}else{
slider_count--;
$slider.animate({left: ‘+=‘ + $slider_width + ‘px‘}, ‘slow‘);
slider_pic();
time = setTimeout("left1();",2000);
}
}
function right2(){//点击向右触发函数
if (slider_count >= $slider_child_l - 3){
return false;
}else{
slider_count++;
$slider.animate({left: ‘-=‘ + $slider_width + ‘px‘}, ‘slow‘);
slider_pic();
}
}
function left2(){//点击向左触发函数
if (slider_count <= 0) {
return false;
}else{
slider_count--;
$slider.animate({left: ‘+=‘ + $slider_width + ‘px‘}, ‘slow‘);
slider_pic();
}
}
function slider_pic() {
if (slider_count >= $slider_child_l - 3) {
$(‘#btn-right‘).css({cursor: ‘auto‘});
$(‘#btn-right‘).addClass("dasabled");
}
else if (slider_count > 0 && slider_count <= $slider_child_l - 3) {
$(‘#btn-left‘).css({cursor: ‘pointer‘});
$(‘#btn-left‘).removeClass("dasabled");
$(‘#btn-right‘).css({cursor: ‘pointer‘});
$(‘#btn-right‘).removeClass("dasabled");
}
else if (slider_count <= 0) {
$(‘#btn-left‘).css({cursor: ‘auto‘});
$(‘#btn-left‘).addClass("dasabled");
}
}
$(‘.slider a‘).hover(function() {
if ($(this).find(‘img:animated‘).length) return;
$(this).animate({marginTop: ‘0px‘}, 300);
$(this).find(‘img‘).animate({width: ‘150px‘}, 300);
}, function() {
$(this).animate({marginTop: ‘24px‘}, 200);
$(this).find(‘img‘).animate({width: ‘90px‘}, 200);
});
$(function(){
right1();
$("#slider>ul").hover(function(){
//鼠标移动DIV上停止
clearTimeout(time);
},function(){
//离开继续调用
if(a==1){
right1();
}else if(a==0){
left1();
}
});
});
</script>
以上是关于图片左右滚动的主要内容，如果未能解决你的问题，请参考以下文章