通過javascript實現圖片輪播效果

原創 cymx66688 2018-10-20 09:26

以下文案均爲原創，若借鑑後有得到啓發，希望點個贊。若有錯誤之處，或者可以用更好的方式解決，可以留言評論。

 

以下方法均實現圖片輪播的效果，層層遞進關係。

第一種方式：

在js裏通過索引的方式實現。

①先設置圖片的名稱，分別從t1.jpg到t7.jpg(共8張圖片)

②設置索引爲0，若索引能被8整除，則令索引爲0。實現重複更換圖片的效果

③使用document.getElementById()，通過指定的Id來獲得html對象

④通過對象.src屬性得到圖片的URL

⑤最後通過setInterval按照指定的週期(2s)來調用函數，實現圖片輪播效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片滾動效果</title>
</head>
    <style type="text/css">
        #adv {
            width: 590px;
            height: 470px;
        }

    </style>
    <script type="text/javascript">
        index = 0;
        function rollImage() {
            index++;
            if (index%8===0) {
                index = 0;
            }
            adv = document.getElementById("adv");
            adv.src ='../image/t' + index + '.jpg'
        }
        setInterval(rollImage,2000)
    </script>
<body>
    <img id="adv" src="../image/t0.jpg">
</body>
</html>

 

第二種方式：

在第一種方式的前提下，又實現了圓圈點中會選中對應的圖片以及點擊左右兩邊的圖標實現圖片的切換。

（1） 實現圓圈點中會選中對應的圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片滾動效果</title>
    <style type="text/css">
        #adv {
            width: 590px;
            height: 470px;
            background-image: url("../image/t1.jpg");
        }
        #nav {
            width: 400px;
            height: 20px;
            /*border: 1px solid black;*/
            list-style-type: none;
            margin-top: 190px;
            line-height: 20px;
        }
        #nav li {
            width: 10px;
            height: 10px;
            float: left;
            border-radius: 50%;
            border: 2px solid red;
            margin: 5px 7px;
        }
    </style>
    <script type="text/javascript">
        index = 0;
        function rollImage() {
            index++;
            if (index%8===0) {
                index = 0;
            }
            adv = document.getElementById("adv");
            adv.style.backgroundImage = "url('../image/t"+index+".jpg')";
            changeBg(index);
        }
        function changeIndex(i) {
            clearInterval(inter);
            index = i;
            adv = document.getElementById("adv");
            adv.style.backgroundImage = "url('../image/t"+index+".jpg')";
            changeBg(index);
        }
        function changeBg(index) {
            nav = document.getElementById("nav");
            lis = nav.children;
            for (i=0; i<lis.length; i++) {
                lis[i].style.background = "hsla(0,0%,100%,.2)";
            }
            lis[index].style.background = "red";
        }
        function roll() {
            inter = setInterval(rollImage,2000);
        }
        var inter = setInterval(rollImage,2000);
    </script>
</head>
<body>
    <div id="adv">&nbsp;
        </ul>
        <ul id="nav">
            <li onmouseover="changeIndex(0)" onmouseout="roll()" style="background:red"></li>
            <li onmouseover="changeIndex(1)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(2)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(3)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(4)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(5)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(6)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(7)" onmouseout="roll()"></li>
        </ul>
    </div>
</body>
</html>

 

（2） 點擊左右兩邊的圖標實現圖片的切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片滾動效果</title>
    <style type="text/css">
        #btn {
            padding: 0;
            margin: 180px 0 0 0;
            width: 590px;
            height: 40px;
            /*border: 1px solid blue;*/
            list-style-type: none;

        }
        #btn li {
            width: 20px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*border: 1px solid black;*/
            color: #ccc;
            background-color: hsla(0, 0%, 100%, .2);
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </style>
    <script type="text/javascript">
        index = 0;
        function changeBg(index) {
            nav = document.getElementById("nav");
            lis = nav.children;
            for (i=0; i<lis.length; i++) {
                lis[i].style.background = "hsla(0,0%,100%,.2)";
            }
            lis[index].style.background = "red";
        }
        function changeImage(flag) {
            clearInterval(inter);
            if (flag==="l") {
                index--;
            }else {
                index++;
            }
            if (index===-1) {index=7;}
            if (index===8) {index=0;}
            adv =document.getElementById("adv");
            adv.style.backgroundImage = "url('../image/t"+index+".jpg')";
            changeBg(index);
        }
        function changeBtnbg(obj) {
            obj.style.background = "hsla(0, 0%, 100%, .8)";
        }
        function rollBtn(obj) {
            obj.style.background = "hsla(0, 0%, 100%, .2)";
        }
        var inter = setInterval(rollImage,2000);
    </script>
</head>
<body>
    <div id="adv">&nbsp;
        <ul id="btn">
            <li class="left" onclick="changeImage('l')" onmouseover="changeBtnbg(this)" onmouseout="rollBtn(this)">&lt;</li>
            <li class="right" onclick="changeImage('r')" onmouseover="changeBtnbg(this)" onmouseout="rollBtn(this)">&gt;</li>
        </ul>
    </div>
</body>
</html>

 

（3）兩者結合實現的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片滾動效果</title>
    <style type="text/css">
        #adv {
            width: 590px;
            height: 470px;
            background-image: url("../image/t1.jpg");
        }
        #nav {
            width: 400px;
            height: 20px;
            /*border: 1px solid black;*/
            list-style-type: none;
            margin-top: 190px;
            line-height: 20px;
        }
        #nav li {
            width: 10px;
            height: 10px;
            float: left;
            border-radius: 50%;
            border: 2px solid red;
            margin: 5px 7px;
        }
        #btn {
            padding: 0;
            margin: 180px 0 0 0;
            width: 590px;
            height: 40px;
            /*border: 1px solid blue;*/
            list-style-type: none;

        }
        #btn li {
            width: 20px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*border: 1px solid black;*/
            color: #ccc;
            background-color: hsla(0, 0%, 100%, .2);
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </style>
    <script type="text/javascript">
        index = 0;
        function rollImage() {
            index++;
            if (index%8===0) {
                index = 0;
            }
            adv = document.getElementById("adv");
            adv.style.backgroundImage = "url('../image/t"+index+".jpg')";
            changeBg(index);
        }
        function changeIndex(i) {
            clearInterval(inter);
            index = i;
            adv = document.getElementById("adv");
            adv.style.backgroundImage = "url('../image/t"+index+".jpg')";
            changeBg(index);
        }
        function changeBg(index) {
            nav = document.getElementById("nav");
            lis = nav.children;
            for (i=0; i<lis.length; i++) {
                lis[i].style.background = "hsla(0,0%,100%,.2)";
            }
            lis[index].style.background = "red";
        }
        function changeImage(flag) {
            clearInterval(inter);
            if (flag==="l") {
                index--;
            }else {
                index++;
            }
            if (index===-1) {index=7;}
            if (index===8) {index=0;}
            adv =document.getElementById("adv");
            adv.style.backgroundImage = "url('../image/t"+index+".jpg')";
            changeBg(index);
        }
        function roll() {
            inter = setInterval(rollImage,2000);
        }
        function changeBtnbg(obj) {
            obj.style.background = "hsla(0, 0%, 100%, .8)";
        }
        function rollBtn(obj) {
            obj.style.background = "hsla(0, 0%, 100%, .2)";
        }
        var inter = setInterval(rollImage,2000);
    </script>
</head>
<body>
    <div id="adv">&nbsp;
        <ul id="btn">
            <li class="left" onclick="changeImage('l')" onmouseover="changeBtnbg(this)" onmouseout="rollBtn(this)">&lt;</li>
            <li class="right" onclick="changeImage('r')" onmouseover="changeBtnbg(this)" onmouseout="rollBtn(this)">&gt;</li>
        </ul>
        <ul id="nav">
            <li onmouseover="changeIndex(0)" onmouseout="roll()" style="background:red"></li>
            <li onmouseover="changeIndex(1)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(2)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(3)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(4)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(5)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(6)" onmouseout="roll()"></li>
            <li onmouseover="changeIndex(7)" onmouseout="roll()"></li>
        </ul>
    </div>
</body>
</html>

 

第三種方式：

使用jQuery實現。作用：代碼量精簡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #adv{
            height: 470px;
            width: 590px;
            margin-top: 0px;
            background-image: url("../image/t0.jpg");
        }
        #nav{
            list-style: none;
            width: 300px;
            height: 20px;
            margin-top:190px ;
        }
        #nav li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid red;
            float: left;
            margin: 5px 7px;
        }
        #btn{
            width: 590px;
            height: 40px;
            padding: 0px;
            margin: 180px 0px 0px 0px;
            list-style: none;
        }
        #btn li{
            width: 20px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #ccc;
            background-color: hsla(0,0%,100%,.2);
        }
        .lf{
            float: left;
        }
        .rt{
            float: right;
        }
        .active{
            background: red
        }
    </style>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        index = 0
        function roleImage() {
            index++
            if(index%8==0){
                index = 0
            }
            $("#adv").css("background-image","url('../image/t"+index+".jpg')")
            changebg(index)
        }
        function changebg(index) {
            $("#nav li").css("background","hsla(0,0%,100%,.2)")
            $("#nav li").eq(index).css("background","red")
        }
        function changeIndex(i){
            clearInterval(inter)
            index = i
            adv = document.getElementById("adv")
            adv.style.backgroundImage="url('../image/t"+index+".jpg')"
            changebg(index)
        }
        function changeImage(flag) {
            clearInterval(inter)
            if(flag=='l')
                index--
            else
                index++
            if(index==-1){index=7}
            if(index==8){index=0}
            $("#adv").css("background-image","url('../image/t"+index+".jpg')")
            changebg(index)
        }
        $(function(){
            $("#nav li").mouseover(function(){
                clearInterval(inter)
                var i = $("#nav li").index(this);
                index = i
                $("#adv").css("background-image","url('../image/t"+index+".jpg')")
                changebg(index)
            })
            $("#nav li").mouseout(function () {
                 inter = setInterval(roleImage,2000)
            })
             $("#btn li").mouseover(function () {
                clearInterval(inter)
                 $(this).css("background","hsla(0,0%,100%,.8)")
            })
             $("#btn li").mouseout(function () {
                inter = setInterval(roleImage,2000)
                 $(this).css("background","hsla(0,0%,100%,.2)")
            })
        })
        var inter = setInterval(roleImage,2000)
    </script>
</head>
<body>
<div id="adv">&nbsp;
    <ul id="btn">
        <li class="lf" onclick="changeImage('l')">&lt;</li>
        <li class="rt" onclick="changeImage('r')">&gt;</li>
    </ul>
    <ul id="nav">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

 

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Dokcer部署Kafka集羣

docker網絡規劃 docker network create kafka-net --subnet 172.20.0.0/16 docker network ls zookeeper1（172.20.0.11 2184:2181

zer0black 2024-05-16 14:31:24

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

「Pygors系列」一句話導讀： MinGW-w64只有編譯器，MSYS2帶着更新環境，WSL2實用性比較高   歷史與淵源     Windows平臺 Linux平臺 二進制兼容 WSL2：運行Linux程序 Wine：運行Wi

windfic 2024-05-16 14:29:14

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

「Pygors系列」一句話導讀： Python、Go、Rust、C程序跨平臺GUI框架研究。   一、問題 Pygors是什麼？ Pygors是我自己創造的一個詞，就是Python、Go、Rust、C四種語言的合體。目的是爲了跨平臺GUI應

windfic 2024-05-16 14:29:14

【Linux命令學習】lsof查看打開的文件

lsof： list open files 作用1：可查端口號被哪個進程佔用 比如我們跑自動化，經常會遇到端口號被佔用，無法啓動driver lsof -i :8081 lsof 輸出的結果含義： fd：文件描述符的數字，通常是一個

金大鑫要堅持 2024-05-16 14:27:04

MacOS添加，查看，刪除用戶

1. 添加用戶 在macOS中，可以通過命令行使用dscl（Directory Service command line utility）工具來添加用戶。以下是使用dscl添加用戶的步驟： 打開終端：可以通過在Spotlight搜索中輸

金大鑫要堅持 2024-05-16 14:27:04

Flink執行圖

Flink的代碼編寫流程爲env->source->transform->sink，基本所有的代碼都是大致按照圖1的流程進行代碼編寫，當然中間也會有一些封裝之類的。   Flink代碼寫好後，它的任務調度執行圖按照生成順序分爲:邏輯流圖(

人不瘋狂枉一生 2024-05-16 14:23:03

Garnet：微軟官方基於.NET開源的高性能分佈式緩存存儲數據庫

前言 前不久Redis宣佈從 Redis 7.4 開始，將原先比較寬鬆的 BSD 源碼使用協議修改爲 RSALv2 和 SSPLv1 協議，該協議變化意味着Redis不再開源。今天給大家分享一款完全開源（MIT協議）、免費的Redis替代性

追逐時光 2024-05-16 14:22:03

nodejs學習07——API

接口 一、簡介 1.1 接口是什麼 接口是 前後端通信的橋樑 簡單理解：一個接口就是 服務中的一個路由規則 ，根據請求響應結果 接口的英文單詞是 API (Application Program Interface)，所以有時也稱之爲 AP

htj10 2024-05-16 14:21:53

nodejs學習06——小案例

記賬本  

htj10 2024-05-16 14:21:53

🔥 Java Solon v2.7.6 發佈

Java Solon 是什麼框架？ Java “新的”應用開發框架。開放原子開源基金會，孵化項目。從零開始構建（非 java-ee 架構），有靈活的接口規範與開放生態。 追求： 更快、更小、更簡單 提倡： 剋制、簡潔、高效、開放、生態

劉之西東 2024-05-16 14:21:13

Puppeteer！

什麼是Puppeteer Puppeteer 是一個由 Google 開發的 Node.js 庫，它提供了一組用於控制 Headless Chrome 的 API。 Headless Chrome 是 Chrome 瀏覽器的無界面版本，可以

CharyGao 2024-05-16 14:17:02

openstack虛擬機用keep alive添加的VIP，其它機器無法訪問

  neutron port-list |grep ipneutron port-update a7fbxxf6cc2 --allowed_address_pairs type=dict list=true ip_address=vipne

馬昌偉 2024-05-16 14:13:52

apisix~authz-keycloak插件介紹

參考：https://apisix.apache.org/docs/apisix/plugins/authz-keycloak/ kc插件源碼梳理及原理說明 如果只是進行keycloak頒發的token進行校驗（簽名校驗和有效期校驗），

張佔嶺 2024-05-16 14:12:42

Dynamic-Datasource動態數據源

1、添加請求對應的數據源標籤 DynamicDataSourceContextHolder.push(ds); 2、添加數據源    3、動態添加數據源 private DynamicRoutingDataSource dataSo

擾擾 2024-05-16 14:12:02

NETCore中實現一個輕量無負擔的極簡任務調度ScheduleTask

至於任務調度這個基礎功能,重要性不言而喻,大多數業務系統都會用到,世面上有很多成熟的三方庫比如Quartz,Hangfire,Coravel 這裏我們不討論三方的庫如何使用 而是從0開始自己製作一個簡易的任務調度,如果只是到分鐘級別的粒度基

萬雅虎 2024-05-16 14:04:41