jquery有缝滚动

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_30656145

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/alex-chi/archive/2012/12/04/2801388.html

版权

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 <head>
  <title>Alex_Kind</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
     <script src="http://js.3conline.com/min/temp/v1/lib-jquery1.4.2.js"></script>
     <style>
         *{margin:0px;padding:0px;}
         ul,li{margin:0px;padding:0px;}
         .fl{float:left; width:50px;display: inline;margin-top: 100px}
         .fl a{display:block;width:14px;height:67px; background:url("images/bg.png") left top no-repeat;}
         .fl a:hover{ background:url("images/bg.png") left bottom no-repeat;}
         .fr{float:right;width:50px;display: inline;margin-top: 100px}
         .fr a{display:block;width:14px;height:67px; background:url("images/bg.png") right top no-repeat;float:right;}
         .fr a:hover{ background:url("images/bg.png") right bottom no-repeat;}
          .main{height:252px; width:550px; margin:50px auto; overflow:hidden;}
          .boxX{ height:250px; width:440px;margin:0px auto;overflow:hidden; float:left;position:relative;}
          .boxX ul{position:absolute;}
          .boxX ul li{width:440px; height:250px;display:inline; float:left;}

     </style>
 </head>

 <body>

 <div class="main" id="scroll1">
    <div class="fl" id="fl1">
        <a href="#"></a>
    </div>
    <div class="boxX">
        <ul>
            <li><img src="images/01.jpg" width="440" height="250"></li>
            <li><img src="images/02.jpg" width="440" height="250"></li>
            <li><img src="images/03.jpg" width="440" height="250"></li>
            <li><img src="images/04.jpg" width="440" height="250"></li>
            <li><img src="images/05.jpg" width="440" height="250"></li>
            <li><img src="images/06.jpg" width="440" height="250"></li>
            <li><img src="images/07.jpg" width="440" height="250"></li>
        </ul>
    </div>
    <div class="fr" id="fr1">
        <a href="#"></a>
    </div>
</div>

<script type="text/javascript">
    var slide = {
        ul:$("#scroll1 ul"),
        li:$("#scroll1 ul li"),
        left:$("#fl1"),
        right:$("#fr1"),
        imgWidth:$('#scroll1 ul li img').width(),
        init:function(){
            slide.ul.width(slide.li.length * slide.li.width());
            slide.slideauto();
            slide.left.click(slide.slideleft).hover(slide.slidestop,slide.slideauto);
            slide.right.click(slide.slideright).hover(slide.slidestop,slide.slideauto);
            slide.ul.hover(slide.slidestop,slide.slideauto);
        },
        slideleft:function(){
            slide.left.unbind('click',slide.slideleft);
            slide.ul.animate({'left':-slide.imgWidth},350,function(){
                slide.ul.css('left','0');
                slide.ul.find("li:first").appendTo(slide.ul);
                slide.left.bind('click',slide.slideleft);
            });
            return false
        },
        slideright:function(){
            slide.right.unbind('click',slide.slideright);
            slide.ul.find('li:last').prependTo(slide.ul);
            slide.ul.css('left',-slide.imgWidth);
            slide.ul.animate({'left':0},350,function(){
                slide.right.bind('click',slide.slideright);
            });
            return false
        },
        slideauto:function(){
            slide.intervalId = window.setInterval(slide.slideleft,2000);
        },
        slidestop:function(){
            window.clearInterval(slide.intervalId);
        }
    };
    $(document).ready(function(){
        slide.init();

    });
</script>
 </body>
</html>