带有控制按钮的图片滚动

原文地址:

http://www.cnblogs.com/gaoyubao/archive/2012/06/21/2557502.html

 

带有控制按钮的图片滚动

上一次写了一个图片自动滚动功能,没有左右按钮控制的功能。今天花了点时间,写了一个带有左右按钮控制的图片滚动效果。所谓自动滚动,原理就是周期性的执行一个效果。在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下载

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

你可能感兴趣的:(图片滚动)