溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js如何實現(xiàn)從右往左勻速顯示圖片

發(fā)布時間：2020-06-29 16:37:14 來源：億速云 閱讀：235 作者：清晨 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細講解有關(guān)js如何實現(xiàn)從右往左勻速顯示圖片，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

前言：

勻速顯示圖片，一般用于重復(fù)顯示公司活動系列圖片

背景圖片：

js如何實現(xiàn)從右往左勻速顯示圖片

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8" />
 <style type="text/css">
 *{
  margin: 0;
  padding: 0;
 }
   .sider{
    height: 300px;
   background: url(zbg.png)no-repeat;
   background-size: 100% 100%;
   box-sizing: border-box;
   position: relative;
   overflow: hidden;
   }
   .box{
    position: absolute;
    top: 48px;
    left: 0;
    height: 300px;
    width: 10000px;
   }
   .uls,.uls2{
    display: inline-block;
   }
   .uls li,.uls2 li{
    display: inline-block;
    width: 320px;
    height: 206px;
    margin-right: 10px;
    background: red;
   }
   .uls li img,.uls2 li img{
    width: 100%;
    height: 100%;
   }
 </style>
</head>
<body>
 <div class="sider">
 <div class="box">
  <ul class="uls">
  <li>這是圖片1</li><li>
  這是圖片2</li><li>
  這是圖片3</li><li>
  這是圖片4</li><li>
  這是圖片5</li><li>
  這是圖片6</li>
  </ul><ul class="uls2"><ul>
 </div>
 </div>
  <script src="jquery.min.js"></script>
  <script>
   $(function(){
   var i=0;
   var sizess = $(".uls li").length;
   var sizesspx = sizess*330;
   var clone = $(".uls").html();
   $(".uls2").html(clone);
   var t=setInterval(moveL,30);
   
//  封裝的動畫函數(shù)
   function moveL(){
    i++;
    var sizess = $(".uls li").length;
    if(i>sizesspx){
    $(".box").css({left:0});
    i=0
    }
    $(".box").css({left:-i+'px'});
   }
   })
  </script>
</body>
</html>

運行效果：

js如何實現(xiàn)從右往左勻速顯示圖片

關(guān)于js如何實現(xiàn)從右往左勻速顯示圖片就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手