js實現(xiàn)從右往左勻速顯示圖片（無縫輪播）
更新時間：2020年06月29日 17:15:48 作者：dongsdh
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)從右往左勻速顯示圖片，無縫輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)從右往左勻速顯示圖片的具體代碼，供大家參考，具體內(nèi)容如下
前言：
勻速顯示圖片，一般用于重復(fù)顯示公司活動系列圖片
背景圖片：
<!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>
運(yùn)行效果：
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)Jquery程序設(shè)計有所幫助。
相關(guān)文章
JavaScrip實現(xiàn)一個有時間限制的緩存類的方式
本文將探索 JavaScript 中一種基于自動過期機(jī)制的時間限制緩存實現(xiàn)方式,提高數(shù)據(jù)緩存策略的靈活性和效率,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
下面小編就為大家?guī)硪黄猠asyui-datagrid特殊字符不能顯示的處理方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
javascript ES6 Template String模板字符串使用方法
這篇文章主要介紹了javascript ES6 模板字符串(Template String)是增強(qiáng)版的字符串，用反引號(`)標(biāo)識，它可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量,需要的朋友可以參考下2023-06-06
JavaScript如何獲取到導(dǎo)航條中HTTP信息
這篇文章主要為大家詳細(xì)介紹了JavaScript如何獲取到導(dǎo)航條中HTTP信息，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
JavaScript深度復(fù)制（deep clone）的實現(xiàn)方法
本文給大家介紹JavaScript深度復(fù)制（deep clone）的實現(xiàn)方法，涉及到j(luò)s深度復(fù)制相關(guān)知識，本文介紹的非常詳細(xì)，特此分享腳本之家平臺供大家參考2016-02-02
用javascript[js]實現(xiàn)的必須經(jīng)過點擊才能出現(xiàn)嚴(yán)重碼效果代碼2008-04-04
這篇文章主要介紹了javascript判斷并獲取注冊表中可信任站點的方法,可實現(xiàn)針對域名和IP的可信任站點判斷功能,需要的朋友可以參考下2015-06-06
JS實現(xiàn)在網(wǎng)頁中彈出一個輸入框的方法
這篇文章主要介紹了JS實現(xiàn)在網(wǎng)頁中彈出一個輸入框的方法,實例分析了prompt的用法,可用來設(shè)置密碼,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JavaScript中的全局對象介紹,對于任何JavaScript程序,當(dāng)程序開始運(yùn)行時,JavaScript解釋器都會初始化一個全局對象以供程序使用,需要的朋友可以參考下2015-01-01
深入理解javascript prototype的相關(guān)知識
這篇文章主要介紹了深入理解javascript prototype的相關(guān)知識,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09