快捷導(dǎo)航

js實(shí)現(xiàn)自動(dòng)圖片輪播代碼

更新時(shí)間：2017年03月22日 12:02:36 作者：程序猿？

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)自動(dòng)輪播的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了輪播的具體代碼，自動(dòng)輪播，居中顯示，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  #div1{
   width: 192px;
   height: 120px;
   border: 1px solid gray;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
  }
  #div1 img{
   position: absolute;
  }
 </style>
</head>
<body>
<div id="div1">
 <img src="images/1.jpg" alt="" width="192"/>
 <img src="images/2.jpg" alt="" width="192"/>
 <img src="images/3.jpg" alt="" width="192"/>
 <img src="images/4.jpg" alt="" width="192"/>
</div>
<div id="div2">

</div>
<script>
 //獲取頁(yè)面元素
 var div1 = document.getElementById('div1');
 var div2 = document.getElementById('div2');
 var imgs = div1.getElementsByTagName('img');
 //初始化頁(yè)面圖片的位置
 window.onload=function(){
  for(var i=0; i<imgs.length; i++){
   imgs[i].style.left = i*192 +'px'
  }
 };
 //輪播移動(dòng)的函數(shù)
 function imgMove(){
  var b1 = false;
  for(var i = 0; i < imgs.length; i++) {
   imgs[i].style.left = imgs[i].offsetLeft-1 + 'px';
   if(imgs[i].offsetLeft==0){
    b1=true;
    if(i==0)
    imgs[imgs.length-1].style='576px';
    else
    imgs[i-1].style.left='576px'
   }
  }
  if(!b1)
   setTimeout(imgMove,20);
  else
   setTimeout(imgMove,2000);
 }
 setTimeout(imgMove,3000);
</script>
</body>
</html>

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

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

您可能感興趣的文章:

js
輪播

相關(guān)文章

javascript表單事件處理方法詳解
這篇文章主要為大家詳細(xì)介紹了javascript表單事件處理方法，感興趣的小伙伴們可以參考一下
2016-05-05
JS實(shí)現(xiàn)的適合做faq或menu滑動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的適合做faq或menu滑動(dòng)效果,結(jié)合實(shí)例形式分析了基于JS實(shí)現(xiàn)的頁(yè)面元素滑動(dòng)漸變效果的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-11-11
JavaScript三大變量聲明詳析
這篇文章主要介紹了JavaScript三大變量聲明詳析,三大變量聲明主要包括var、const和let，下面文章我們就圍繞三者展開詳細(xì)內(nèi)容介紹，需要的朋友可以參考一下
2022-06-06
Javascript 異步加載詳解(瀏覽器在javascript的加載方式)
本文總結(jié)一下瀏覽器在 javascript 的加載方式,需要的朋友可以參考下
2012-05-05
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹實(shí)現(xiàn)查找最小值、最大值、給定值算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹實(shí)現(xiàn)查找最小值、最大值、給定值算法,涉及javascript二叉樹定義、賦值、遍歷、查找等相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
微信小程序view與scroll-view組件的使用介紹
小程序中的組件也是由宿主環(huán)境提供的，開發(fā)者可以使用組件快速搭建出頁(yè)面結(jié)構(gòu)，這篇文章主要介紹了微信小程序view與scroll-view組件的使用
2022-10-10
詳解javascript常用工具類的封裝
本篇文章主要給大家詳細(xì)分析了javascript常用工具類的封裝相關(guān)知識(shí)點(diǎn)，有興趣的朋友參考下吧。
2018-01-01
原生JavaScript實(shí)現(xiàn)Ajax異步請(qǐng)求
ajax現(xiàn)在是一種非常流行的技術(shù)，現(xiàn)在雖然可以利用JQuery或者一些第三方插件甚至微軟提供的一些控件可以方面的實(shí)現(xiàn)ajax功能，但是明白其原理也是非常重要的，下面是來(lái)使用純javascript實(shí)現(xiàn)獲取服務(wù)器端的功能來(lái)展示如何使用純javascript實(shí)現(xiàn)ajax功能，以弄清其原理.
2017-11-11
微信小程序?qū)崿F(xiàn)搜索功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)搜索功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-03-03
js實(shí)現(xiàn)拖拽元素選擇和刪除
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖拽元素選擇和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08