js動畫之輪播圖

來源:互聯網
上載者:User

標籤:gre   aaa   ===   調用   eee   函數   通過   elements   name   

一、 使用Css3動畫實現<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            body,ul{                list-style: none;            }                                    .outer{                width: 750px;                height: 366px;                margin: 100px auto;                border: solid 2px gray;                                overflow: hidden;                position: relative;            }                        .inner{                width: 500%;                height: 100%;                position: relative;                left: 0;                                animation: myAni 15s linear infinite alternate;            }                        .inner img{                float: left;                width: 20%;            }                        @keyframes myAni{                0%{left: 0;}                10%{left:0}                20%{left: -100%;}                30%{left: -100%;}                40%{left: -200%;}                50%{left: -200%;}                60%{left: -300%;}                70%{left: -300%;}                80%{left: -400%;}                100%{left: -400%;}            }                        .outer ul{                position: absolute;                bottom: 16px;                left: 50%;                transform: translateX(-50%);                display: flex;            }                        .outer li{                /*width: 12px;                height: 12px;*/                margin: 0 10px;                /*background: white;*/                border: solid 8px white;                border-radius: 50%;            }                        .outer .scroll-ball{                border-color: yellowgreen;                position: relative;                left: -180px;                                animation: myBall 15s linear infinite alternate;            }                        @keyframes myBall{                0%{left: -180px;}                10%{left:-180px;}                20%{left: -144px;}                30%{left: -144px;}                40%{left: -108px;}                50%{left: -108px;}                60%{left: -72px;}                70%{left: -72px;}                80%{left: -36px;}                100%{left: -36px;}            }        </style>    </head>    <body>        <div class="outer">            <div class="inner">                <img src="img/5af3df82N15a1910a.jpg"/>                <img src="img/5afbf194Nce807c23.jpg"/>                <img src="img/5afce833N3a41e948.jpg"/>                <img src="img/5af3df82N15a1910a.jpg"/>                <img src="img/5afce833N3a41e948.jpg"/>            </div>            <ul>                <li></li>                <li></li>                <li></li>                <li></li>                <li></li>                <li class="scroll-ball"></li>            </ul>        </div>    </body></html>

 

 

二、 使用js實現html代碼:    <!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <link rel="stylesheet" type="text/css" href="css/slideshow.css"/>    </head>    <body>        <div class="slideshow">            <!--圖片-->            <a href="img/aaa.jpg" id="slideshow-href">                <img src="img/aaa.jpg"  id="slideshow-item"/>            </a>            <!--底部導航小圓點-->            <ul id="conLis">                <li></li>                <li></li>                <li></li>                <li></li>                <li></li>                <li></li>            </ul>            <!--左右導航-->            <div id="leftBtn">&lt;</div>            <div id="rightBtn">&gt;</div>        </div>    </body>    <script type="text/javascript" src="js/slideshow.js"></script></html>css代碼:    body,ul,li{margin: 0;padding: 0;}a{text-decoration: none;}li{list-style: none;}.slideshow{    width: 800px;    height: 500px;    margin: 100px auto;    overflow: hidden;        position: relative;}#slideshow-item{    display: block;    width: 800px;}#conLis{    position: absolute;    bottom: 16px;    left: 50%;    transform: translateX(-50%);}.slideshow li{    margin: 0 10px;    border: solid 6px black;    border-radius: 50%;    float: left;    cursor: pointer;}#leftBtn,#rightBtn{    padding: 8px 6px;        font-size: 60px;    color: white;        background: #E7E7E7;        position: absolute;    top: 50%;    transform: translateY(-50%);        opacity:0.3;    cursor: pointer;}#leftBtn{    left: 15px;}#rightBtn{    right: 15px;}js代碼:    //擷取元素var slideshow = document.querySelector(‘.slideshow‘);var scrollHref = gt("slideshow-href");var scrollItem = gt("slideshow-item");//console.log(scrollHref+"===="+scrollItem);var conLis = gt(‘conLis‘);var items = conLis.getElementsByTagName(‘li‘);var leftBtn = gt(‘leftBtn‘);var rigthBtn = gt(‘rightBtn‘);//設定儲存圖片的容器var imgArr = ["img/aaa.jpg","img/bbb.jpg","img/ccc.jpg","img/ddd.jpg","img/eee.jpg","img/fff.jpg"];var hrefArr = ["img/aaa.jpg","img/bbb.jpg","img/ccc.jpg","img/ddd.jpg","img/eee.jpg","img/fff.jpg"];//設定索引0為第一張顯示的圖片var currentIndex = 0;scrollItem.src = imgArr[0];scrollHref.href = hrefArr[0];//設定第一個小圓點為黃色items[0].style.borderColor = "yellow";//設定定時更換圖片var timer = setInterval(changeItem,2000);function changeItem(){    currentIndex++;//圖片索引自增1,顯示下一張圖片    if(currentIndex == imgArr.length){        currentIndex = 0;    }    //調用圖片輪播,動態改變當前索引值來改變輪播的圖片    slideShow(currentIndex);}//圖片輪播function slideShow(i){    //設定輪播圖片及連結圖片    scrollItem.src = imgArr[i];    scrollHref.href = hrefArr[i];        //設定對應輪播圖片的小圓點效果    for(var j = 0; j < items.length; j++){        //設定所有小圓點為預設樣式        items[j].style.borderColor = ‘black‘;    }        //單獨設定某張輪播圖對應的小圓點樣式    items[i].style.borderColor = "yellow";}//設定滑鼠滑過底部導航小圓點顯示對應的圖片for(var j = 0; j < items.length; j++){    //for迴圈內有事件動作的話是先執行迴圈,要想按鈕每一次點擊都是按鈕的下標值,就要先記錄i值,    //不然等到迴圈執行完再執行onclick事件就會等於for迴圈最後得到的i值。    items[j].index = j;//將迴圈資料賦值給列表中的索引;防止閉包函數中無法正常擷取當前索引i,而衍生出的一個綁定在dom元素上的資料index    items[j].onmouseover = function(){        clearInterval(timer);//停止自動輪播        slideShow(this.index);    }        items[j].onmouseout = function(){        currentIndex = this.index;//將元素索引賦值給currentIndex,保證下一次自動輪播繼續當前這個向下輪播        timer = setInterval(changeItem,2000);    }}//設定點擊左右箭頭的輪播leftBtn.onmouseover = rightBtn.onmouseover = function(){    leftBtn.style.opacity = "1";    rightBtn.style.opacity = "1";        //滑鼠移動到地區停止輪播    clearInterval(timer);}leftBtn.onmouseout = rigthBtn.onmouseout = function(){    leftBtn.style.opacity = "0.3";    rightBtn.style.opacity = "0.3";        //滑鼠離開開始輪播    timer = setInterval(changeItem,2000);}leftBtn.onclick = function(){    //判斷當前圖片是否為第一張圖片索引    if(currentIndex == -1){        currentIndex = imgArr.length-1;//將最後一張圖片賦值給前面的索引    }    slideShow(currentIndex);//調用輪播方法        currentIndex--;//點擊左側按鈕,做減法操作}rightBtn.onclick = function(){    //判斷當前圖片是否為最後一張圖片的索引    if(currentIndex == imgArr.length-1){        currentIndex = 0;//將第一張圖片索引賦值    }    slideShow(currentIndex);        currentIndex++;}//封裝通過id擷取元素的方法function gt(id){//傳入字串類型的參數    console.log("進入方法");    return document.getElementById(id);    console.log("擷取元素成功");}

 

js動畫之輪播圖

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.