js實現圖片無縫循環(huán)輪播
更新時間：2019年10月28日 11:35:00 作者：KD-倘若沒有倘若
這篇文章主要為大家詳細介紹了js實現圖片無縫循環(huán)輪播，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現圖片無縫循環(huán)輪播的具體代碼，供大家參考，具體內容如下
代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#container{
overflow:hidden;
width:400px;
height:300px;
margin:auto;
}
#front,#container{
display:flex;
flex-direction:row;
}
#container img{
width:400px;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<div id="front">
<img src="k2.jpg" alt="">
<img src="k1.jpg" alt="" >
<img src="k3.jpg" alt="">
<img src="k4.jpg" alt="">
</div>
<div id="back"><img src="k5.jpg" alt=""></div>
</div>
</body>
<script>
front.style="position:relative;left:0px;";
back.style="position:relative;left:0px;";
setInterval(moveimg,100);
var fleft,bleft;
function moveimg(){
fleft = parseInt(front.style.left);
bleft = parseInt(back.style.left);
if(fleft == -1600){
front.style.left = 400+"px";
fleft = parseInt(front.style.left);
}
if(bleft == -2000) {
back.style.left = 0+"px";
bleft = parseInt(back.style.left);
}
front.style.left = (fleft-10)+"px";
back.style.left = (bleft-10)+"px";
}
</script>
</html>
更多關于輪播圖效果的專題，請點擊下方鏈接查看學習
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了SVG實現時鐘效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
今天是看到UCDChina上的一篇文章文章 ，是關于SNS的用戶體驗問題，發(fā)覺文中提到的第一個細節(jié)，UCHOME就做的不好，于是改進了一下。2011-01-01
Java中int與integer的區(qū)別（基本數據類型與引用數據類型）
這篇文章主要介紹了int與integer的區(qū)別（基本數據類型與引用數據類型）,簡單的說 int 是基本數據類型，integer 是引用數據類型，具體區(qū)別詳解大家參考下本文2017-02-02
這篇文章主要教大家如何簡單實現jQuery輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
JavaScript 文件加載與阻塞問題之性能優(yōu)化案例詳解
這篇文章主要介紹了JavaScript 文件加載與阻塞問題之性能優(yōu)化案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了JS簡單實現數組去重的方法,結合具體實例形式分析了javascript數組遍歷、判斷實現去重復的相關操作技巧與注意事項,需要的朋友可以參考下2017-10-10
下面小編就為大家?guī)硪黄猨avascript的列表切換【實現代碼】。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。2016-05-05
Chrome中模態(tài)對話框showModalDialog返回值問題的解決方法
chrome中彈出模態(tài)對話框，通過window.returnValue賦返回值關閉后，有的情況下無法取得返回值。2010-05-05
這篇文章主要介紹了JavaScript實現in-place思想的快速排序方法的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了JavaScript eval()函數定義及使用方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07