大头盆盆

导航

无缝滚动 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  <style>
  *{margin: 0; padding: 0;} 
 
  img{ 
    border:0; 
  } 
   
  .container{ 
    width:1560px; 
    height: 280px; 
    margin:0 auto; 
    border:3px solid blue; 
    overflow: hidden; 
    position: relative; 
  } 
   
  .container ul{ 
    list-style: none; 
    width:10000px; 
    position: absolute; 
  } 
   
  .container ul li{ 
    float:left; 
    margin-right: 20px; 
  } 

  </style>
</head>
<body>
  <div class="container"> 
    <ul class="content"> 
      <li><a href="#"><img src="1.jpg"/></a></li> 
      <li><a href="#"><img src="2.jpg"/></a></li> 
      <li><a href="#"><img src="3.jpg"/></a></li> 
      <li><a href="#"><img src="4.jpg"/></a></li> 
      <li><a href="#"><img src="5.jpg"/></a></li> 
    </ul> 
  </div> 
  <script>
  jQuery(document).ready(function($) {
    var allWidth=0
    //先通过each遍历所有的li元素，计算出它们宽度之和。
    $(".content li").each(function() {
      allWidth+=$(this).outerWidth(true);    
    });
    //拷贝一份图片到现有图片的后面
    $(".content li").clone().appendTo($(".content"));
    run(8000);

    function run(interval){
      $(".content").animate({
        'left': -allWidth},
        interval,"linear", function() {
        $(".content").css('left', 0);
        run(8000);
      });

    }

    $(".container").mousemove(function(){ 
      $(".content").stop(); 
    }).mouseout(function(){ 
      var passedCourse = -parseInt($(".content").css("left")); 
      var time = 8000 * (1 - passedCourse/allWidth); 
      run(time); 
    });



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

 

posted on 2016-07-29 15:54  大头盆盆  阅读(86)  评论(0)    收藏  举报