2. 程式人生 > >js點選輪播或者自動輪播圖程式碼

js點選輪播或者自動輪播圖程式碼

阿新 • • 發佈：2019-01-13
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="gbk">
    <title>js點選輪播或者自動輪播</title>
    <style>
        #d{position: relative;top: -30px;}
        label{margin: -5px;}
        .one{width: 10px;height: 10px;border: 1px solid black; background-color: red;}
    </style>


    <script>
        var n =0;//圖片下標 label下標
        var t=0;// 清除動畫用


        function init(){
            //1.預設進來自動播放輪播圖
            switchImgs();


            //2. 當滑鼠移入移出不同的label切換不同的圖片.
            var img = document.getElementById("img");
            var labels =document.getElementsByTagName("label");//拿到所有的label標籤物件


            for(var i=0;i<labels.length;i++){//給每個label標籤註冊一個hover事件
                labels[i].onmouseover=function(){
                    clearTimeout(t);//停止動畫
                    var b= this.innerText*1;//拿到標籤上的數字
                    img.src="images/photo_0"+b+".jpg";//顯示對應的圖片
                    clearStyle();//清除label上的樣式
                    this.className="one";//讓當前的label的樣式變化
                }


                labels[i].onmouseout=function(){//滑鼠移出動畫開始,動畫從當前的圖片開始動畫
                    n=this.innerText*1;//獲取當前label上的數字並轉換成整型
                    switchImgs();
                }
            }


        }


        //預設動畫,圖片輪播,每個1秒切換
        function switchImgs(){
            n++;
            if(n==7){n=1;}//到達末尾的時候跳轉到第一張
            var img = document.getElementById("img");
            img.src="images/photo_0"+n+".jpg";
            clearStyle();//當圖片到第二張的時候,要把label1的樣式清除,
            document.getElementById("i"+n).className="one";
            t=setTimeout("switchImgs()",1000);
        }


        //清除label的所有的樣式
        function clearStyle(){
               var labels= document.getElementsByTagName("label");
                for(var i=0;i<labels.length;i++){
                    labels[i].className="";//讓label表的classname置為空
                }
        }


    </script>
</head>
<body onload="init()">
    <div align="center">
        <img src="images/photo_01.jpg" width="400" height="500" id="img">
        <div id="d">
            <label id="i1">&nbsp;1&nbsp;</label>
            <label id="i2">&nbsp;2&nbsp;</label>
            <label id="i3">&nbsp;3&nbsp;</label>
            <label id="i4">&nbsp;4&nbsp;</label>
            <label id="i5">&nbsp;5&nbsp;</label>
            <label id="i6">&nbsp;6&nbsp;</label>
        </div>
    </div>
</body>

</html>

//自動輪播圖程式碼

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="gbk">
 <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="meinv.jpng" alt="" width="192"/>
 <img src="44.jpg" alt="" width="192"/>
 <img src="video.png" alt="" width="192"/>
 <img src="images/4.jpg" alt="" width="192"/>
</div>
<div id="div2">
 
</div>
<script>
 //獲取頁面元素
 var div1 = document.getElementById('div1');
 var div2 = document.getElementById('div2');
 var imgs = div1.getElementsByTagName('img');
 //初始化頁面圖片的位置
 window.onload=function(){
  for(var i=0; i<imgs.length; i++){
   imgs[i].style.left = i*192 +'px'
  }
 };
 //輪播移動的函式
 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>

相關推薦

js點選輪播或者自動輪播圖程式碼

<!DOCTYPE html> <html> <head lang="en">     <meta charset="gbk">     <tit

原生js點選輪播 點選切換圖片

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>點選輪播圖</title> </head> <

圖片輪播、自動輪播、點擊輪播（一）

新的 set ttr n) settime document .get offset span HTML部分 <div id="slide_two" class="slide"> <ul style="transform: translateX(-

原生js面向物件程式設計-選項卡(自動輪播)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生js面向物件程式設計-選項卡(自動輪播)</title> <

JS練習：替換式圖片自動輪播

程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script>

安卓輪播圖，無限自動輪播，可手動滑動+點選事件

                                          &nb

js無縫輪播效果實現，自動輪播

輪播圖，是網站首頁中最為常見的一種圖片切換特效，那麼今天就來分享一篇前端開發實戰當中經常使用到的實現無縫輪播圖效果的文章，希望對您有所幫助，歡迎留言探討。 1、html結構佈局： <div id="wrap"> <ul class="pic">

原生js實現無縫滾動輪播圖（移動端）-自動輪播

想不依賴任何外掛和庫，就用原生js實現移動端自動輪播，發現網上的都不盡如人意，乾脆自己寫一個，程式碼有部分參考，廢話少說，上程式碼。 head部分，沒什麼好說的： <meta charset="utf-8"> <me

自動輪播本地圖片觸摸暫停輪播

listen linear down raw post callback android color let 第一步自己創建自動輪播視圖： 1 public class AutoShowView extends FrameLayout { 2 privat

原生JS簡單的無縫自動輪播

討論 aid 500px 設置 我們 哈哈 可能 java afr 　　最近在不斷的加強鞏固js。在學習jq和vue之後發現很多東西其實都是不明所以，有些底層的東西自己不懂，到頭來也只是一昧的使用，一直在用別人的東西，對自己的成長幫助也不大。 萬丈高樓平地起，基礎打紮實了學

小程式點選輪播圖跳轉到tab導航介面

需求：小程式點選輪播圖跳轉到tab導航介面，效果如下所示 點選輪播圖的圖片，跳轉到我的介面上 先實現以下的程式碼，在以下的基礎上，開始實現需求 微信小程式底部導航欄https://www.jianshu.com/p/89a63dc99839 微信小程式輪播

android輪播圖簡單實現（左右無限滑動,自動輪播）

直接上程式碼了，都有註釋，原理很簡單 public class MainActivity extends AppCompatActivity { private static final String Tag = MainActivity.class.getSimpleName();

js實現圖片自動輪播

今天有人問我這個問題，我就順便把這個記下來，分享給大夥。 如圖，就是圖片自己輪播，並且圖中中下方的白點也發生變化，圖片到哪，白點就到哪，就直接上程式碼了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

偏前端-純css,手寫輪播-（焦點切換 和 自動輪播 只可選擇一種，兩者不可共存）

set abs aci count right container 是什麽 設置 網上 現在我們一般都是在網上找個輪播插件，各種功能應有盡有，是吧！！~大家似乎已經生疏了手寫是什麽感覺。萬一哪天想不起來，人家要手寫，就尷尬了！~~跟我一起復習一下吧 不多說：效果圖看一下：

Viewpager 自動輪播（無限迴圈） ，手動滑動時停止輪播+底部小圓點（二）

專案結構如下： Volley工具類： VolleyTool類負責例項化mRequestQueue和mImageLoader。 package com.example.utils; import android.content.Context; import com

仿小紅書圖片-橫條-文字聯動點選輪播

    "大三暑假找了個做APP的公司實習，當時說好有大牛帶著做Android，工作內容卻變成了前端，並且技術主管要求我儘可能用Vue.js來做網站。那時候我只會一點點HTML，CSS也只會一些很基礎的內容，別說Vue了，JS我都不懂，並且整個公司的前端就只有我一個人，遇到不會的

原生JS實現簡單的無縫自動輪播效果

最近在不斷的加強鞏固js。在學習jq和vue之後發現很多東西其實都是不明所以，有些底層的東西自己不懂，到頭來也只是一昧的使用，一直在用別人的東西，對自己的成長幫助也不大。 萬丈高樓平地起，基礎打紮實了學什麼都快，而且我覺得用原生的程式碼寫完好像自己有點小成就感的。現在記錄一下今天覆習的原

Android使用ViewPager實現圖片輪播(高度自適應，左右迴圈，自動輪播)

效果 前言 該效果實現是基於我的第一篇部落格 Android使用ViewPager實現引導頁（帶小點提示）進行改進的，因此部分相同的地方我不會再重複描述，有意全面瞭解的可以先看完該篇部落格。 實現 為實現自定義一個通用的控制元件，我們首先建立一個類繼承ViewPager

原生js自動輪播圖

輪播圖的用處輪播圖是現在網站網頁上最常見的效果之一，很多網站上都會用到，淘寶京東等等。有些自動選項卡也是需要用到的，而且它的可重複性高。在這裡分享一下，用js原生程式碼，實現輪播圖的常見效果！輪播圖的原理一系列的大小相等的圖片平鋪，利用CSS佈局只顯示一張圖片，其餘隱藏。通過

點選輪播圖片左右按鈕，實現輪播效果

點選左右按鈕，實現圖片輪播效果，js程式碼如下： $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_c