js實現(xiàn)圖片無縫循環(huán)輪播
更新時間：2019年10月28日 11:35:00 作者：KD-倘若沒有倘若
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)圖片無縫循環(huán)輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)圖片無縫循環(huán)輪播的具體代碼，供大家參考，具體內(nèi)容如下
代碼如下
<!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>
更多關(guān)于輪播圖效果的專題，請點擊下方鏈接查看學(xué)習(xí)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實現(xiàn)根據(jù)當(dāng)前文字選擇返回被選中的文字
這篇文章主要介紹JS如何實現(xiàn)根據(jù)當(dāng)前文字選擇返回被選中的文字,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左滑動刪除效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
在javascript你不需要使用new Object()，你該使用{}就可以了。2009-07-07
這篇文章主要為大家詳細(xì)介紹了bootstrap手風(fēng)琴的制作方法，制作聲明式觸發(fā)手風(fēng)琴，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
原生JS實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)
下面小編就為大家?guī)硪黄鶭S實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
微信小程序scroll-view組件實現(xiàn)滾動動畫
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view組件實現(xiàn)滾動動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
js操作GridView,實現(xiàn)自動計算的實現(xiàn)代碼，下面的代碼運行即可2009-03-03
這篇文章主要介紹了怎樣用Javascript實現(xiàn)單例模式，想學(xué)習(xí)設(shè)計模式的同學(xué)，可以參考下2021-04-04
淺談Javascript中Object與Function對象
JavaScript的面向?qū)ο笫腔谠蔚模袑ο蠖加幸粭l屬于自己的原型鏈。Object與Function可能很多看Object instanceof Function ， Function instanceof Object都為true而迷惑，所以首先看下對象的實例2015-09-09
axios利用params/data發(fā)送參數(shù)給springboot?controlle的正確獲取方式
這篇文章主要給大家介紹了關(guān)于axios利用params/data發(fā)送參數(shù)給springboot?controlle的正確獲取方式,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02