快捷導(dǎo)航

js實(shí)現(xiàn)圖片無(wú)縫循環(huán)輪播

更新時(shí)間：2019年10月28日 11:35:00 作者：KD-倘若沒(méi)有倘若

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

本文實(shí)例為大家分享了js實(shí)現(xiàn)圖片無(wú)縫循環(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)于輪播圖效果的專(zhuān)題，請(qǐng)點(diǎn)擊下方鏈接查看學(xué)習(xí)

javascript圖片輪播效果匯總

jquery圖片輪播效果匯總

Bootstrap輪播特效匯總

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)根據(jù)當(dāng)前文字選擇返回被選中的文字
這篇文章主要介紹JS如何實(shí)現(xiàn)根據(jù)當(dāng)前文字選擇返回被選中的文字,需要的朋友可以參考下
2014-05-05
微信小程序?qū)崿F(xiàn)左滑動(dòng)刪除效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左滑動(dòng)刪除效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
javascript new 需不需要繼續(xù)使用
在javascript你不需要使用new Object()，你該使用{}就可以了。
2009-07-07
bootstrap手風(fēng)琴制作方法詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap手風(fēng)琴的制作方法，制作聲明式觸發(fā)手風(fēng)琴，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
原生JS實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)方法(附帶封裝的運(yùn)動(dòng)框架)
下面小編就為大家?guī)?lái)一篇原生JS實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)方法(附帶封裝的運(yùn)動(dòng)框架)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
js GridView 實(shí)現(xiàn)自動(dòng)計(jì)算操作代碼
js操作GridView,實(shí)現(xiàn)自動(dòng)計(jì)算的實(shí)現(xiàn)代碼，下面的代碼運(yùn)行即可
2009-03-03
怎樣用Javascript實(shí)現(xiàn)單例模式
這篇文章主要介紹了怎樣用Javascript實(shí)現(xiàn)單例模式，想學(xué)習(xí)設(shè)計(jì)模式的同學(xué)，可以參考下
2021-04-04
淺談Javascript中Object與Function對(duì)象
JavaScript的面向?qū)ο笫腔谠蔚模袑?duì)象都有一條屬于自己的原型鏈。Object與Function可能很多看Object instanceof Function ， Function instanceof Object都為true而迷惑，所以首先看下對(duì)象的實(shí)例
2015-09-09
axios利用params/data發(fā)送參數(shù)給springboot?controlle的正確獲取方式
這篇文章主要給大家介紹了關(guān)于axios利用params/data發(fā)送參數(shù)給springboot?controlle的正確獲取方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-02-02