山猫的博客

山猫,研究网站设计与制作、后台程序开发、SEO优化和推广等。

基于jQuery的图片左右轮换代码

(发布于:2012-09-10 10:42)

可以实现左右按钮自定义,速度控制,需要使用jQuery才可以,但不能自动滚动。
不废话,直接上代码:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#wrap_slide{width:960px;height:350px;position:relative;margin: auto;}

#slide{width:981px;height:350px;overflow:hidden;position:absolute;}
#slide p{margin:10px 0 0 0;font-size:12px;line-height:20px;color:#545454;text-align:center;}
#slide > div{text-decoration:none;display:block;width:981px;height:350px;position:absolute;left:981px;}

#previous{width:16px;height:84px;line-height:99em;overflow:hidden;background:url(http://static.51zjxm.com/fenzhan/zs/images/index_r25_c3.jpg);position:absolute;left:-25px;top:120px;cursor:pointer;}
#next{width:16px;height:84px;line-height:99em;overflow:hidden;background:url(http://static.51zjxm.com/fenzhan/zs/images/index_r25_c25.jpg);position:absolute;left:970px;top:120px;cursor:pointer;}
</style>

<script type="text/javascript">
$(document).ready(function(){

        current = 1;
        button = 1;
        images = 3;
        width = 981;

        $('#p1').animate({"left":"0px"},400,"swing");

        $("#next").click(function(){
                button = current;
                current++
                if(current==(images + 1)){
                        current = 1
                }
                animateLeft(current, button)
        });

        $("#previous").click(function(){
                button = current;
                current--
                if(current == 0){
                        current = images
                }
                animateRight(current, button)
        });

        $("#abuttons li").mouseover(function(){
                button = current;
                clickButton = $(this).attr('id');
                current = parseInt(clickButton.slice(1));
                if(current > button){
                        animateLeft(current, button)
                }
                if(current < button){
                        animateRight(current, button)
                }
        });

        function animateLeft(current, button){
                $('#p' + current).css("left", width + "px");
                $('#p' + current).animate({"left": "0px"},400,"swing");
                $('#p' + button).animate({"left": -width + "px"},400,"swing");
                setbutton()
        }

        function animateRight(current, button) {
                $('#p' + current).css("left", -width + "px");
                $('#p' + current).animate({"left": "0px"},400,"swing");
                $('#p' + button).animate({"left": width + "px"},400,"swing");
                setbutton()
        }

        function setbutton(){
                $('#a' + button).children("a").removeClass("current");
                $('#a' + current).children("a").addClass("current");
        }

});
</script>

<div id="wrap_slide">
        <div id="slide">
                <div id="p1">
                        <img src="images/h1.jpg">
                </div>

                <div id="p2">
                        <img src="images/h2.jpg">
                </div>

                <div id="p3">
                        <img src="images/h3.jpg">
                </div>
        </div>
        <div id="previous">Previous</div>
        <div id="next">Next</div>
</div>

以上可以直接使用,其中ID为p1,p2,p3是三个可以轮换的图片,这个div的宽度是981,这个需要在css里设置,还有在js里面需要对应修改。js里面的images=3的意思是轮换的图片的个数,比如有四个轮换图片,ID为p1,p2,p3,p4的话,那么images就需要设置为4。

最下面的id=”previous”和id=”next”中可以自定义翻页按钮的图片。

评论

 提交评论