javascript如何製作簡單的圖片輪播,帶有數字選擇,滑鼠懸停暫停輪播,離開時繼續輪播圖片

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

直接上程式碼,程式碼有註釋:
要想做圖片輪播,需要知道以下知識點:
定時函式：

window物件:
window.setInterval("執行的方法名",間隔時間(毫秒))：返回值是一個用來停止計時器的ID
window.clearInterval(計時器的ID):清除定時器,無返回值

圖片輪播靠的是定時器,定時執行方法去切換圖片,切換 img標籤下的src屬性,以此來切換圖片,
滑鼠懸停時停止輪播,是依靠滑鼠懸停事件onmouseover和滑鼠移出事件onmouseout.

<!DOCTYPE html>
<html>
    <head> 

        <meta charset="utf-8" />
        <title></title>
<script type="text/javascript">
    //設定全域性變數,統計播放圖片的順序
    var imgIndex=1;//從第一張圖片開始輪播
    var imgCount=6;//總共有6張圖片
    var liObjs=document.getElementById("scroll_number").getElementsByTagName("li");
/**
 * 實現圖片輪播
 * _args  傳入的是數字（第幾張圖片）滑鼠懸停時才會傳入引數
 */ 

function loopShow(_args){//當滑鼠移入時,執行滑鼠移入事件,執行帶引數的方法,引數值在index.html中的loopShow()方法中的引數傳入
    if(_args){//如果引數存在,代表觸發了滑鼠懸停事件,那麼需要停止計時器
        imgIndex=_args;
        window.clearInterval(myTime);//停止定時器
    }
    //1、圖片輪播
    var imgObj=document.getElementById("dd_scroll");
    //1.1、設定顯示第幾張圖片
    //1.2、設定數字的背景色（顯示的是第幾張圖片） 

    for(var i=0;i<liObjs.length;i++){
        if(i==imgIndex-1){
        //圖片的名字只有一個數字的區別,所以切換圖片只需要修改圖片名字的一個數字
            imgObj.setAttribute("src","images/dd_scroll_"+imgIndex+".jpg");//圖片顯示
            liObjs[i].className="scroll_number_over";//數字背景
        }else{
            liObjs[i].className="scroll_number_out";
        }
        /*新增移出事件,只能寫一個,寫在這裡或者onload事件裡面都一樣可以
        liObjs[i].onmouseout=function(){
            myTime=window.setInterval("loopShow()",1000);
        }*/
    }

    //imgIndex++代表繼續顯示下一張圖片
    imgIndex++;
    if(imgIndex>imgCount) {//如果圖片編號大於中的圖片數量,就重新賦值為1,從第一張開始輪播
        imgIndex=1;
    }

}
var myTime;//全域性變數,用於記錄定時器的ID,便於在loopshow()方法中使用

window.onload=function(){
    //設定定時器定時執行輪播,方法需要引數,就算不給引數也能執行.
    myTime=window.setInterval("loopShow()",1000);
    //新增移出事件,滑鼠移開數字
    for(var i=0;i<liObjs.length;i++){
        liObjs[i].onmouseout=function(){
            myTime=window.setInterval("loopShow()",1000);//返回的myTime是一個用來停止計時器的ID

        }
    }
    </script>
        <style type="text/css">
        .scroll_number_out{
        }
        .scroll_number_over{//設定數字的樣式,當滑鼠停在數字上時,給數字加點背景色和字型顏色.
            background-color:#F96;
            color:#FFF;
        }
    </style>

    </head>
    <body>
        <!--輪換顯示的橫幅廣告圖片-->
        <div class="scroll_top"></div>
        <div class="scroll_mid"> <img src="images/dd_scroll_2.jpg" alt="輪換顯示的圖片廣告" id="dd_scroll"/>
            <div id="scroll_number">
                <ul><!--滑鼠懸停時才會觸發事件,傳入引數-->
                    <li id="scroll_number_1" onmouseover="loopShow(1)">1</li>
                    <li id="scroll_number_2" onmouseover="loopShow(2)">2</li>
                    <li id="scroll_number_3" onmouseover="loopShow(3)">3</li>
                    <li id="scroll_number_4" onmouseover="loopShow(4)">4</li>
                    <li id="scroll_number_5" onmouseover="loopShow(5)">5</li>
                    <li id="scroll_number_6" onmouseover="loopShow(6)">6</li>
                </ul>
            </div>
        </div>
    </body>
</html>

javascript如何製作簡單的圖片輪播,帶有數字選擇,滑鼠懸停暫停輪播,離開時繼續輪播圖片

直接上程式碼,程式碼有註釋: 要想做圖片輪播,需要知道以下知識點: 定時函式： window物件: window.setInterval("執行的方法名",間隔時間(毫秒))：返回值是一個用來

JavaScript製作簡單的隨機數驗證碼

function sendCheckNumber(){ //每次點選產生驗證碼 var codeLength = 4;//驗證碼長度為4 //設定隨機字元 currentCheckNumber="";//初始化驗證碼字串 var random

使用者滑動時停止輪播,鬆開時繼續輪播

vpBanner.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position

javascript 超簡單程式碼實現圖片輪播功能

一利用setInterval()方法 1. <script type="text/javascript"> var tus=["1.jpg","2.jpg","3.jpg","4.jp

JavaScript實現簡單的圖片輪播（通過點選左右焦點切換）

最終實現效果圖程式碼塊 <!DOCTYPE html> <html lang="en"> <head> <meta charset

JS製作簡單圖片輪播--通過調整margin製作

圖片輪播在網頁中使用的非常廣泛，製作的方法有很多，介紹一下我用調整margin來實現3張圖片輪播功能。設計思路：自動跳轉。三張圖片每隔3秒跳轉一張，第三張圖片跳轉完成後，3秒後跳轉至第一張圖片

JavaScript實現圖片輪播和滑鼠懸停顯示

例：提前放好了四張圖片，並編號。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

css+js製作簡單的輪播圖效果

各大電商網站首頁一般都離不開輪播圖，下面將通過css+javascript完成一個簡單的輪播圖效果。 slide.html程式碼： <!DOCTYPE html> <html> <head> <meta charset="

使用javascript實現簡單的輪播圖效果

最近在做公司的網站，有一個輪播圖的功能，網上倒是有現成的js元件，我用了一下swiper,但是發現嵌入進去時不太好用，好在公司的網站要求也不是很高，索性就使用純的js做一下唄。 1.首先新建一個html頁面，先把簡單的佈局做出來我的html部分如下 <body&g

JavaScript實現簡單圖片滾動 --9張圖告訴你，C羅欲哭無淚

charset () element edit fas 簡單圖 pad jpg sni 源代碼下載：http://download.csdn.net/detail/u011043843/7510425 昨晚德國和葡萄牙的焦點之戰你看了嗎？北京時間淩晨的比賽

jquery實現圖片向左慢慢輪播（滑鼠懸停圖片停止輪播版）

window.onload=function(){ function $(id){ return document.getElementById(id); } var num=0; function autopl

如何用Qt製作簡單的滑鼠繪圖畫板(支援匯出圖片)

文章目錄 01 - 滑鼠繪圖效果 02 - 基本思路 03 - 程式碼 widget.h widget.cpp UI 01 - 滑鼠繪圖效果 GIF沒設定好，會有灰色陰影出現

Android 廣告（banner）圖片輪播、圖片瀏覽、仿微信大圖檢視控制元件（支援視訊和gif圖片）、支援動態新增資料

之前專案需要做個仿微信檢視大圖，需要新增圓形下載進度，支援視訊和圖片切換等一系列功能控制元件，自己抽空把開發的自定義控制元件的成果重新構造、整理處理封裝成庫（aar），提供出來，有需要朋友，歡迎使用，如果有什麼建議歡迎留言或者GitHub上提issues

JavaScript，簡單的社交圈分享

mstr 微信 templates connect esc col function ava des var share_templates = { //qzone-param url, title, desc, summary, site qzon

Javascript實現簡單的選項卡

-a www 在線演示 == doc ++ style log rac 在線演示：http://jsfiddle.net/Web_Code/TbPDd/embedded/result/ <!DOCTYPE html PUBLIC "-//W3C//

Javascript基礎簡單匯總（一）：元素獲取

問題元素節點 all push 傳說 length [] nbsp 文檔在頁面腳本中，如果要對頁面元素進行操作，那麽我們就要獲取到這個元素那麽在獲取元素之前首先得要了解什麽是DOM（document object model）在DOM，元素是以節點的形式表示的，每

用javascript實現簡單的用戶登錄驗證

-c turn get https 沒有驗證 utf-8 .com head 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="

簡單的動態規劃，數字三角形，以及做題思路。

數值 space 鏈接分析 ios style iostream 循環 turn 鏈接一句話題目：給出一個n層的三角形，每個位置有一個數字，到達後可獲得，求到達最低層能達到的最大數字和。題目分析：首先我們考慮能不能用搜索做，因為對於一個坐標，我們只有向下

PHP和JavaScript將字符串轉換為數字string2int

class var ring int logs 變量類型 ng2 div 在看廖雪峰的JavaScript教程時，裏面有一個題就是利用reduce()將string轉換為int，我看評論中貼出的方法，當時覺得挺意外了，以為他只用了一行代碼，即下面這行代碼 var str

用JavaScript編寫簡單鬥地主效果Es6

edge 隨機 lse 圖片 bsp lex TE margin AI 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset=

javascript如何製作簡單的圖片輪播,帶有數字選擇,滑鼠懸停暫停輪播,離開時繼續輪播圖片

相關推薦