js實(shí)現(xiàn)從右往左勻速顯示圖片（無(wú)縫輪播）

更新時(shí)間：2020年06月29日 17:15:48 作者：dongsdh

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)從右往左勻速顯示圖片，無(wú)縫輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)從右往左勻速顯示圖片的具體代碼，供大家參考，具體內(nèi)容如下

前言：

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

背景圖片：

<!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);
  
// 封裝的動(dòng)畫(huà)函數(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>

運(yùn)行效果：

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)Jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScrip實(shí)現(xiàn)一個(gè)有時(shí)間限制的緩存類的方式
本文將探索 JavaScript 中一種基于自動(dòng)過(guò)期機(jī)制的時(shí)間限制緩存實(shí)現(xiàn)方式,提高數(shù)據(jù)緩存策略的靈活性和效率,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-01-01
easyui-datagrid特殊字符不能顯示的處理方法
下面小編就為大家?guī)?lái)一篇easyui-datagrid特殊字符不能顯示的處理方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
javascript ES6 Template String模板字符串使用方法
這篇文章主要介紹了javascript ES6 模板字符串(Template String)是增強(qiáng)版的字符串，用反引號(hào)(`)標(biāo)識(shí)，它可以當(dāng)作普通字符串使用，也可以用來(lái)定義多行字符串，或者在字符串中嵌入變量,需要的朋友可以參考下
2023-06-06
JavaScript如何獲取到導(dǎo)航條中HTTP信息
這篇文章主要為大家詳細(xì)介紹了JavaScript如何獲取到導(dǎo)航條中HTTP信息，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
JavaScript深度復(fù)制（deep clone）的實(shí)現(xiàn)方法
本文給大家介紹JavaScript深度復(fù)制（deep clone）的實(shí)現(xiàn)方法，涉及到j(luò)s深度復(fù)制相關(guān)知識(shí)，本文介紹的非常詳細(xì)，特此分享腳本之家平臺(tái)供大家參考
2016-02-02
javascript點(diǎn)擊才出現(xiàn)驗(yàn)證碼
用javascript[js]實(shí)現(xiàn)的必須經(jīng)過(guò)點(diǎn)擊才能出現(xiàn)嚴(yán)重碼效果代碼
2008-04-04
javascript判斷并獲取注冊(cè)表中可信任站點(diǎn)的方法
這篇文章主要介紹了javascript判斷并獲取注冊(cè)表中可信任站點(diǎn)的方法,可實(shí)現(xiàn)針對(duì)域名和IP的可信任站點(diǎn)判斷功能,需要的朋友可以參考下
2015-06-06
JS實(shí)現(xiàn)在網(wǎng)頁(yè)中彈出一個(gè)輸入框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)在網(wǎng)頁(yè)中彈出一個(gè)輸入框的方法,實(shí)例分析了prompt的用法,可用來(lái)設(shè)置密碼,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
JavaScript中的全局對(duì)象介紹
這篇文章主要介紹了JavaScript中的全局對(duì)象介紹,對(duì)于任何JavaScript程序,當(dāng)程序開(kāi)始運(yùn)行時(shí),JavaScript解釋器都會(huì)初始化一個(gè)全局對(duì)象以供程序使用,需要的朋友可以參考下
2015-01-01
深入理解javascript prototype的相關(guān)知識(shí)
這篇文章主要介紹了深入理解javascript prototype的相關(guān)知識(shí),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09