使用定時器實現輪播圖

阿新 • • 發佈：2019-01-20

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>

   <style>
   *{
      margin: 0;
      padding: 0;
      list-style: none;
   }

   #box{
      width: 700px;
      height: 400px;
      border: solid;
      margin: 100px auto 
;
      position: relative;
   }

   img{
      width: 700px;
      height: 400px;
      display: none;
   }

    input{
      width: 25px;
      height: 50px;
      background: rgba(0,0,0,0.5);
      border-style: none;
      outline: none;
      cursor: pointer;
   }

   #left{
      position: absolute;
      top:170 
px;
      left: 0px;
   }

   #right{
      position: absolute;
      top:170px;
      right: 0px;
   }

   ul{
      position: absolute;
      bottom: 0px;
      left: 250px;
   }

   li{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid;
      margin: 10px;
      float: left 
;
      cursor: pointer;
   }

   .active{
      display: block;
   }

   .circle{
      background: rgba(0,0,0,0.5);
   }

    </style>
</head>
<body>
   
   <div id="box">
   <input type="button" value="<" id="left">
   <input type="button" value=">" id="right">
   <img src="images/1.jpg" class="active">
   <img src="images/2.jpg">
   <img src="images/3.jpg">
   <img src="images/4.jpg">
   <img src="images/5.jpg">
   <img src="images/6.jpg">
      
   <ul>
      <li class="circle"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
   </div>
</body>

<script>
   
   window.onload=function(){

      var ArrImg=document.getElementsByTagName('img');
      var ArrLi=document.getElementsByTagName("li");
      var oLeft=document.getElementById('left');
      var oRgt=document.getElementById("right");
      var oBox=document.getElementById("box");
      var imgNum=0;

      for (var i = 0; i < ArrLi.length; i++) {
            ArrLi[i].index=i;
         ArrLi[i].onmouseover=function(){

            for (var l = 0; l < ArrLi.length; l++) {
               
                  ArrLi[l].className="";
                  ArrImg[l].className="";
                    }
            
            this.className="circle";
            ArrImg[this.index].className="active";
            imgNum=this.index;
         }
        }

        oRgt.onclick=move;
      var x=setInterval(move,1000);
       oBox.onmouseover=function(){
            clearInterval(x)
         };

      oBox.onmouseout=function(){
            x=setInterval(move,1000);
         }


      function move(){
         imgNum=imgNum+1;


         if (imgNum>=ArrImg.length) {
            imgNum=0;
         }

         for (var z = 0; z < ArrLi.length; z++) {
            ArrImg[z].className="";
            ArrLi[z].className="";
         }

          ArrImg[imgNum].className="active";
         ArrLi[imgNum].className="circle";
        }

        oLeft.onclick=function(){

           imgNum=imgNum-1;

           if (imgNum<0) {
              imgNum=ArrLi.length-1;
           }

           for (var j = 0; j < ArrLi.length; j++) {
              ArrImg[j].className="";
              ArrLi[j].className="";
           }

           ArrImg[imgNum].className="active";
           ArrLi[imgNum].className="circle";
        }



   }
</script>
</html>

使用定時器實現輪播圖

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <s

前端框架Vue（14）—— 利用 vue 過渡效果（transition）+定時器實現輪播圖通用元件

序論：輪播圖相信都不會陌生，很多的網站都會有，而且實現的方式也是千變萬化，可以利用封裝好的 UI 庫（bootstrap），也可以原生的 JS 進行編寫。但是其中，動畫（transition）和定時器都是必不可少的。本文就是利用 vue

js實現輪播圖

display lex tee 添加 har scrip con tle win 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

h5原生js實現輪播圖

list sla head log startx creat ase hit eve 預覽地址：http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html <!DOCTYPE html> <html l

unslider插件實現輪播圖效果

地址 href aid jquery輪播 boot http 用法 .com r.js unslider插件下載地址（含有用法）：http://www.bootcss.com/p/unslider/ 可以　　下載unslider.js文件（http://pan.baidu.

vue-awesome-swiper實現輪播圖

install mys cti turn fff rip 引入 save data 1.首先通過npm安裝vue-awesome-swiper，我在項目中用的是2.6.7版本 npm install [email protected] –save 2.

jQuery實現輪播圖效果

代碼實現 idt 代碼 out 顯示 move posit 技術輪播圖任務實現：用jQuery實現輪播圖。來自瓶子啊之小白，歡迎來訪，歡迎指導。相信大家從事前端的開發者初級就是輪播圖，首先我用jquery寫了一個，第二篇我會用原生JavaScript給大家展示。其原

利用js來實現輪播圖

由於現在很多網站都有輪播圖的存在，所以自己的學著來搗鼓一下下，內容有點長！（1）、首先要先製作好html頁面，利用div盒子來佈局 &nb

android實現輪播圖

實現輪播圖新增依賴 compile 'com.youth.banner:banner:1.4.10' compile 'com.github.bumptech.glide:glide:3.7.0' 程式碼： package com.bdsx.tiantianzhu

原生js實現輪播圖原理分析

一、輪播圖需求輪播圖需要實現左右翻頁的無縫連線需要點選左右切換需要實現跳轉顯示當前位置的小圓點二、輪播圖的原理 1.圖片移動實現原理：利用浮動將所有所有照片依次排成一行，給這一長串圖片新增一個父級的遮罩，每次只顯示一張圖，其餘的都隱

IOS開發學習筆記十三 UIScrollView控制元件實現輪播圖

效果圖：專案地址程式碼： #import "ViewController.h" @interface ViewController ()<UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet

微信小程式實現輪播圖

swiper的相關屬性 indicator-dots 是否顯示小圓點，也可以自己重新設定小圓點 circular 是否銜接滑動，就是實現無限滾動 previous-margin 與上一張圖片的間距 next-margin 與下一張圖片的間距 autoplay 實現自動滾

javascript實現輪播圖效果

<!DOCTYPE html> <html> <head> <title>js輪播圖</title> <style type="text/css"> #container{ width: 600px;

原生js實現輪播圖原理

輪播圖的原理1.圖片移動實現原理：利用浮動將所有所有照片依次排成一行，給這一長串圖片新增一個父級的遮罩，每次只顯示一張圖，其餘的都隱藏起來。對圖片新增絕對定位，通過控制left屬性，實現照片的移動。 2.圖片移動動畫原理：從a位置移動到b位置，需要先計算兩點之間的差值，通過差值和時間間隔，計算出每次移動的步

JQuery實現輪播圖原始碼

設計：根據上圖可以看出，輪播圖需要以下元素：外面的盒子div、放置圖片集合的盒子ul、放置兩側按鈕的盒子div、下側順序按鈕div 原始碼如下：一、html原始碼如下： <div class="outer"> <ul class="

bootstrap實現輪播圖

<html> <head> <title>Bootstrap 輪播</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bo

MVP+Recycleview實現輪播圖實現京東秒殺效果

MVP+Recycleview實現輪播圖，京東秒殺 2018年12月02日 19:55:26 遷就 閱讀數：830 1：先看看效果 2：build.gradle中匯入依賴 //依賴 implementation ‘com.jakewharton:butterkn

Android 實現輪播圖效果底部圓點佈局實現

1、準備底部圓點的素材、利用Drawable的功能，去實現一個圓點圖片的展示 drawable下新建兩個Drawable resource file：dot_normal.xml和dot_select.xml dot_normal.xml <?xml vers

Android 實現輪播圖效果（三）底部圓點狀態改變

自動輪播和手動輪播之後應該實現圓點的切換自定義改變圓點狀態的監聽器新建介面public interface DotChangeListener，新增方法void dotChangeListener(int index);並在ImageBannerFramLayout實

bootstrap 實現輪播圖

3.3.7版本 <code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

使用定時器實現輪播圖

相關推薦