带有控制按钮的图片滚动

上一次写了一个图片自动滚动功能，没有左右按钮控制的功能。今天花了点时间，写了一个带有左右按钮控制的图片滚动效果。所谓自动滚动，原理就是周期性的执行一个效果。在js中，通常是用setInterval这个函数来执行的，setInterval(func,speed),func表示所要执行的函数，speed表示周期时间，通常用毫秒来表示。

先看一下效果图：

图片滚动

这里一共有5张图片，而现在为什么只显示4张呢？这里用了css的overflow属性控制一下，我们不可能把所有要滚动的图片都显示出来，那样滚动就毫无意义了，用户不要滚动，就可以看到所有的图片了，也影响页面图片的加载时间。所以要把一些图片隐藏起来。

overflow的作用就是子级的宽度超过了父级的宽度，那么子级超过的宽度为隐藏起来，当然内容也会隐藏起来。

.subBox {
    padding: 0;
    margin: 0 10px;
    width: 830px;
    overflow: hidden;
}

.subBox ul {
    width: 100000px;
}

还有一点要做到无间隙的滚动，子级的宽度很宽，可显示区域如果滚动完了，就会出现空白，这里也考虑到了这一点，解决的方式是：向左滚动，就把最后一张图片放到最前面去，向右滚动就把第一张图片放到后面去。

obj.find("li:last").prependTo(obj);//向左滚动
obj.find("li:first").appendTo(obj);//向右滚动

因为是自动滚动的，当用户向鼠标移到图片上时让他停止，这里就用到了clearInterval功能，表示停止周期性滚动

clearInterval(moving);

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>带有控制按钮的图片滚动</title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var left = $("#left");
    var right = $("#right");
    var obj = $(".subBox ul");
    var w = obj.find("li").innerWidth();
    
    left.click(function(){
        obj.find("li:last").prependTo(obj);
        obj.css("margin-left",-w);
        obj.animate({"margin-left": 0});
    });
    
    right.click(function(){
        obj.animate({"margin-left": -w},function(){
            obj.find("li:first").appendTo(obj);
            obj.css("margin-left","0");
        });
    });
    
    var moving = setInterval(function(){left.click()},2000);
    
    obj.hover(function(){
        clearInterval(moving);
    },function(){
        moving = setInterval(function(){left.click()},2000);
    })
    
});
</script>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.box {
    margin: 10px auto;
    width: 880px;
    text-align: left;
}

.floatL {
    padding-top: 45px;
    float: left;
}

.subBox {
    padding: 0;
    margin: 0 10px;
    width: 830px;
    overflow: hidden;
}

.subBox ul {
    width: 100000px;
}

.subBox ul li {
    width: 210px;
    float: left;
}

</style>
</head>
<body>
<div class="box">
    <div class="floatL" id="left"><img src="left.gif" alt="" /></div>
    <div class="subBox floatL">
        <ul>
            <li><img src="0.jpg" alt="" /></li>
            <li><img src="1.jpg" alt="" /></li>
            <li><img src="2.jpg" alt="" /></li>
            <li><img src="3.jpg" alt="" /></li>
            <li><img src="4.jpg" alt="" /></li>
        </ul>
    </div>
    <div class="floatL" id="right"><img src="right.gif" alt="" /></div>
</div>
</body>
</html>

效果下载地址：demo下载

如有不足之处，还请大家提出宝贵意见，谢谢

posted @ 2012-06-21 11:41  高玉宝  阅读(3750)  评论(0)  编辑  收藏  举报