欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生javascript實(shí)現(xiàn)圖片輪播切換效果

 更新時(shí)間：2022年07月13日 10:51:00   作者：#麻辣小龍蝦#  
這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)圖片輪播切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了javascript實(shí)現(xià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>
        *{margin:0;padding:0;}
        #banner{position:relative;width:400px;height:200px;margin:50px auto;overflow: hidden;}
        #banner .box{width:400px;height:200px;overflow: hidden;}
        #banner .box li img{width:400px;height:200px;overflow: hidden;}
        #banner .box li{display:none;}
        #banner .box li.active{display:block;}
        #banner .static{position:absolute;bottom:0;height:30px;width:390px;padding-right:10px;text-align:right;}
        #banner .static span{display:inline-block;width:20px;height:20px;margin:0 2px;line-height:20px;text-align:center;background:#fff;cursor:default;}
        #banner .static span.active{background:blue;color:#fff;}
        #banner .btn{position:absolute;top:80px;height:40px;width:20px;color:#fff;line-height:40px;text-align:center;background:#000;opacity:.75;cursor:default;}
        #banner .next.btn{right:0;}
</style>
</head>
<body>
    <div id="banner">
        <div class="box">
            <ul>
                <li class="active">
                    <a href="#">
                        <img src="img/banner.jpg"/>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/banner01.jpg"/>
                    </a>
                </li>
                <li class="">
                    <a href="#">
                        <img src="img/banner02.jpg"/>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/banner03.jpg"/>
                    </a>
                </li>
            </ul>
        </div>
        <div class="static">
            <span class="active">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <div class="prev btn"><</div>
        <div class="next btn">></div>
    </div>

    <script>
        //切換樣式
        function toggleClass(elem, classStr){
            if(elem.className){
                if(elem.className.indexOf(classStr) > -1){
                    elem.className = elem.className.replace(classStr,"");
                }else{
                    elem.className = elem.className + " " + classStr;
                }
            }else{
                elem.className = classStr;
            }
        }

        //獲取元素所在兄弟元素的索引
        function getIndex(elem){
            var index;
            var childNodes = elem.parentNode.childNodes;
            //獲取子元素的元素節(jié)點(diǎn)
            function childElem(){
                var result = [];
                for(var i = 0, len = childNodes.length; i < len; i++){
                    if(childNodes[i].nodeType == 1){
                        result.push(childNodes[i]);
                    }
                }
                return result;
            }
            //判斷元素與子元素是否相等
            var child = childElem(elem);
            for(var j = 0, lenj = child.length; j < len; j++){
                if(child[j] == elem){
                    index = j;
                }else{
                    console.error("沒有找到相應(yīng)的子元素！");
                }
            }
            //返回索引
            return index;
        }

        //dom選擇器
        function $(selector){
            return document.querySelector(selector);
        }

        function $$(selector){
            return document.querySelectorAll(selector);
        }


        //對象參數(shù)
        var int = {
            num: null,
            speed: null,
            timerId: null
        };
        var liItem = $$("#banner .box li");
        var static = $$("#banner .static span"); 
        var btn = $$("#banner .btn");


        //初始化默認(rèn)值
        var activeNum = 1;
        int.num = liItem.length;
        int.speed = 3000;

        //切換動(dòng)作
        function toggleItem(num){
            toggleClass($("#banner .box li.active"), "active");
            toggleClass($("#banner .static span.active"), "active");
            //添加下一個(gè)激活選項(xiàng)
            toggleClass(liItem.item(num), "active");
            toggleClass(static.item(num), "active");
        }

        function autoPlay(){

            int.timerId = setInterval(function(){
                if(activeNum < int.num){
                    toggleItem(activeNum);
                    activeNum++;
                }else{
                    activeNum = 0;
                    toggleItem(activeNum);
                    activeNum++;
                }
            },int.speed);
        }

        //定時(shí)輪播
        autoPlay();

        //狀態(tài)點(diǎn)鼠標(biāo)移入移出效果
        for(var i = 0, len = static.length; i < len; i++){

            //匿名傳參避免產(chǎn)生閉包得不到想要的效果
            (function(j){

                //鼠標(biāo)移入效果
                static.item(j).onmouseenter = function(){
                    //停止動(dòng)畫
                    clearInterval(int.timerId);
                    var index = getIndex(this);
                    toggleItem(index);
                }

                //鼠標(biāo)移出效果
                static.item(j).onmouseleave = function(){
                    //開始動(dòng)畫
                    autoPlay();
                }

            })(i);

        }

        for(var k = 0, lenk = btn.length; k < lenk; k++){
            //上下張按鈕移入移出效果
            btn.item(k).onmouseenter = function(){
                clearInterval(int.timerId);
            }

            btn.item(k).onmouseleave = function(){
                autoPlay();
            }
        }

        //單價(jià)擊上一張
        $(".prev.btn").onclick = function(){
            if(activeNum > 0){
                activeNum--;
                toggleItem(activeNum);
            }else{
                activeNum = 3;
                toggleItem(activeNum);
            }
        }

        //單擊下一張
        $(".next.btn").onclick = function(){
            if(activeNum < int.num){
                toggleItem(activeNum);
                activeNum++;
            }else{
                activeNum = 0;
                toggleItem(activeNum);
                activeNum++;
            }

        }

    </script>
</body>
</html>

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

相關(guān)文章

  • JavaScript Dom 綁定事件操作實(shí)例詳解

    JavaScript Dom 綁定事件操作實(shí)例詳解

    這篇文章主要介紹了JavaScript Dom 綁定事件操作,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript實(shí)現(xiàn)dom綁定事件的相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
    2019-10-10
  • 在HTML中嵌入JS代碼的3種方式總結(jié)

    在HTML中嵌入JS代碼的3種方式總結(jié)

    現(xiàn)在的前端JavaScript可以說是異常火爆,即使并不準(zhǔn)備向前端發(fā)展,但是對前端的一些基礎(chǔ)知識還是必須有所了解的,先這篇文章主要給大家介紹了關(guān)于在HTML中嵌入JS代碼的3種方式,需要的朋友可以參考下
    2022-11-11
  • 淺談JavaScript之事件綁定

    淺談JavaScript之事件綁定

    關(guān)于 JavaScript 的事件綁定在網(wǎng)上已經(jīng)有不少相關(guān)的資料了，今天這篇文章也是在被同事問及的時(shí)候才順便把它記錄下來，算是 JavaScript 事件綁定中的一個(gè)小技巧，如果能在工作中善加利用，會(huì)有出其不意的效果
    2013-07-07
  • javascript實(shí)現(xiàn)電商放大鏡效果

    javascript實(shí)現(xiàn)電商放大鏡效果

    這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)電商放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-11-11
  • 一直都需要的復(fù)制到系統(tǒng)剪貼板之IE,firefox兼容版

    一直都需要的復(fù)制到系統(tǒng)剪貼板之IE,firefox兼容版

    一直都需要的復(fù)制到系統(tǒng)剪貼板之IE,firefox兼容版...
    2007-09-09
  • !DOCTYPE聲明對JavaScript的影響分析

    !DOCTYPE聲明對JavaScript的影響分析

    DOCTYPE是document type(文檔類型)的簡寫，在web設(shè)計(jì)中用來說明你用的XHTML或者HTML是什么版本。
    2010-04-04
  • javascript html5輕松實(shí)現(xiàn)拖動(dòng)功能

    javascript html5輕松實(shí)現(xiàn)拖動(dòng)功能

    這篇文章主要為大家詳細(xì)介紹了javascript html5輕松實(shí)現(xiàn)拖動(dòng)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • 深入探究JavaScript中RunJs的特性及用途

    深入探究JavaScript中RunJs的特性及用途

    JavaScript已經(jīng)成為現(xiàn)代Web開發(fā)的中流砥柱,實(shí)時(shí)調(diào)試、快速原型設(shè)計(jì)以及代碼的即時(shí)反饋通常需要開發(fā)者使用多個(gè)工具和手段,現(xiàn)代工具的涌現(xiàn)為我們帶來了更好的解決方案,而RunJs就是其中之一,本文將帶您深入探討RunJs的特性、用途,需要的朋友可以參考下
    2023-08-08
  • JavaScript字符串處理常見操作方法小結(jié)

    JavaScript字符串處理常見操作方法小結(jié)

    這篇文章主要介紹了JavaScript字符串處理常見操作方法,結(jié)合實(shí)例形式分析了JavaScript字符串操作常見的轉(zhuǎn)換、截取、分割、獲取等相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2019-11-11
  • 詳解Bootstrap四種圖片樣式

    詳解Bootstrap四種圖片樣式

    本文給大家介紹Bootstrap 對圖片的支持，Bootstrap提供了四個(gè)可對圖片應(yīng)用簡單樣式的class，對Bootstrap四種圖片class相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2016-01-01

最新評論