標籤：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"><</div> <div id="rightBtn">></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動畫之輪播圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
