原生js横幅广告轮播图
生活随笔
收集整理的這篇文章主要介紹了
原生js横幅广告轮播图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
手把手原生js簡單輪播圖
原生js實現圖片輪播效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>js</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <style type="text/css"> *{ margin: 0; padding: 0; } #main{ width: 100%; height: 400px; margin: 50px auto; position: relative; } #main .scollimg{ width: 100%; height: 400px; position: relative; } #main .scollimg img{ position: absolute; top: 0; left: 0; width: 100%;height: 100%; } #main .btn{ width: 100%; height: 220px; position: absolute; top:117px; left: 0; } #main .btn>div{ width: 100px; height: 220px; background: #fff; opacity: 0; } #main .btn：hover>div{ opacity: 0.35; } #main .btn #btnleft{ position: absolute; top: 0; left: 0; } #main .btn #btnright{ position: absolute; top: 0; right:0; } /*左右button里的三角形*/ .triangle{ margin-top: 50px; width: 0; height: 0; border-width:70px 40px; border-style: solid; } #main .btn #btnleft .triangle{ border-color: transparent #ccc transparent transparent; } #main .btn #btnright .triangle{ margin-left: 20px; border-color: transparent transparent transparent #ccc; } #main .item{ position: absolute; bottom: 5%; left: 49%; width: 200px; height: 16px; } #main .item span{ width: 16px; height: 16px; background: #ccc; display: inline-block; border-radius: 50%; } #main .item span:hover{ cursor: pointer; } </style> </head> <body> <div id="main"> <div class="scollimg"> <a href="#"><img src="http://www.jq22.com/img/cs/500x300a.png" alt=""></a> <a href="#"><img src="http://www.jq22.com/img/cs/500x300b.png" alt=""></a> <a href="#"><img src="http://www.jq22.com/img/cs/500x300c.png" alt=""></a> </div> <div class="btn"> <div id="btnleft"><div class="triangle"></div></div> <div id="btnright"><div class="triangle"></div></div> </div> <div class="item"> <span></span> <span></span> <span></span> </div> </div> <script type="text/javascript"> window.onload=function(){ var container = document.getElementById('main'); autoMove(container); } //輪播圖函數 function autoMove(container){ var imgs = container.getElementsByTagName('img'); var spans = container.getElementsByTagName('span'); //每次輪播后樣式 /*輪播到哪個位置，就對哪個位置的圖片樣式進行設置，首先讓所有的圖片樣式opacity變為0，然后對移動到的位置的樣式進行設置opacity為1*/ function InitMove(index){ for(var i=0;i<imgs.length;i++){ imgs[i].style.opacity='0'; spans[i].style.background='#ccc'; } imgs[index].style.opacity='1'; spans[index].style.background='red'; } //第一次初始化 InitMove(0); //輪播過程的變換函數 /*前面已經初始化了圖片最開始看到的效果，接著輪播的話會隱藏第一張出現第二張 *這里count從1開始（圖片的初始化位置是count為0的情況），count=1執行一次Init*Move(count),使第一張隱藏第二張出現，依次執行。當count==imgs.leghth時由于*圖片最后一張的位置是imgs.length-1,所以此時把count置為0；相當于輪播圖輪回 *依次重新開始。 */ var count=1; function fMove(){ if(count==imgs.length){ count=0; } InitMove(count); count++; } //設置自動輪播定時器； var scollMove=setInterval(fMove,2500); //點擊移動圖片； /*這里就是點擊左右移動的button來讓圖片根據用戶的點擊左右移動；需要注意一點就*是每次點擊左移動或右移動需要首先清除定時器，等移動完了在重新添加定時器不然的*話你點擊移動后圖片雖然該變了，但是由于定時器還沒移動到這張圖片上面，所以就需*要等待定時器移動到你移動到的那張圖片上面讓后才開始定時輪播。比如如果你從開始 *就點擊移動圖片，一直移動到最后一張那么你就要等待兩個定時器的時間才能看到自動*輪播。 */ var btnleft=document.getElementById('btnleft'); var btnright=document.getElementById('btnright'); btnleft.onclick=function(){ clearInterval(scollMove); if(count==0){ count=imgs.length; } count--; InitMove(count); scollMove=setInterval(fMove,2500); }; btnright.onclick=function(){ clearInterval(scollMove); fMove(); scollMove=setInterval(fMove,2500); } } </script> </body> </html>?
總結
以上是生活随笔為你收集整理的原生js横幅广告轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nginx 稳定版 1.16.0 发布
- 下一篇： 手写Spring-第六章-让我访问！实现