jquery實現圖片無縫輪播顯示（由這裏開始記錄前端）

時間 2019-11-13

原文原文鏈接

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圖片無縫輪播顯示</title>
<script type="text/javascript" src="JavaScript/jquery-1.11.2.min.js"></script>
<style>
  .box,.box2{
    width:800px;
    height:260px;
    margin:160px auto;
    overflow:hidden;
    position:relative;}
  .box,.box2 p{
    text-align:center;}
  .picBox,.picBox2{
    margin:0px;
    padding:0px;
    list-style:none;
    width:1500px;}	 <!--此處很關鍵，在實現無疑輪播時這個寬度必定要比顯示圖片數量+1的寬度寬-->
  .picBox:hover,.picBox2:hover{
    cursor:pointer;}
  .picBox li,.picBox2 li{
    float:left;}
  .picBox img,.picBox2 img{
    width:200px;
    height:240px;}
</style>
</head>
<body>
  <div class="box">
    <p>第一種圖片輪播：非無縫輪播</p>
    <ul class="picBox">
      <li><img src="images/1.jpg"/></li>
      <li><img src="images/2.jpg"/></li>
      <li><img src="images/3.jpg"/></li>
      <li><img src="images/4.jpg"/></li>
      <li><img src="images/5.jpg"/></li>
    </ul>
  </div>
  <div class="box2">
    <p>第二種圖片輪播：無縫輪播</p>
    <ul class="picBox2">
      <li><img src="images/1.jpg"/></li>
      <li><img src="images/2.jpg"/></li>
      <li><img src="images/3.jpg"/></li>
      <li><img src="images/4.jpg"/></li>
      <li><img src="images/5.jpg"/></li>
    </ul>
  </div>
<script>
  $(function(){
    <!--第一種圖片輪播：非無縫輪播-->
    function rollOne(){
      $(".picBox li:first").animate({left:"-=200px"},"linear",function(){
        $(this).remove().clone(true).appendTo(".picBox").fadeIn("slow");	
      });		
    }
    var startRollOne=setInterval(rollOne,2000);
    <!--鼠標移入中止移出繼續-->	
    $(".box").hover(function(){
      clearInterval(startRollOne);	
    },function(){
      startRollOne=setInterval(rollOne,2000);	
    });
    <!--第二種圖片輪播：無縫輪播-->
    <!--這種無縫輪播能夠經過設置animate動畫播放速度值和setInterval中的函數調用時間間隔實現間隔無縫輪播-->
    function rollTwo(){
      $(".picBox2").animate({marginLeft:"-200px"},2000,"linear",function(){
        $(".picBox2").css({marginLeft:"0px"});
        $(".picBox2 li:first").remove().clone(true).appendTo(".picBox2");	
      })	
    }
    var startRollTwo=setInterval(rollTwo,2000);
    <!--鼠標移入中止移出繼續-->
    $(".picBox2").hover(function(){
      clearInterval(startRollTwo);	
    },function(){
      startRollTwo=setInterval(rollTwo,2000);	
    });
  });
</script>
</body>
</html>