js實(shí)現(xiàn)輪播圖制作方法
本文實(shí)例為大家分享了js實(shí)現(xiàn)輪播圖展示的具體代碼，供大家參考，具體內(nèi)容如下
效果如圖所示
代碼如下：
<!DOCTYPE html><html> <head> <meta charset='utf-8' /> <title></title> <style type='text/css'> * { padding: 0; margin: 0; } .container { position: relative; width: 600px; height: 300px; margin: 30px auto; overflow: hidden; } .left { display: none; position: absolute; top: 50%; left: -20px; transform: translateY(-50%); width:50px; height: 50px; border-top-right-radius: 50%; border-bottom-right-radius: 50%; background-color: rgba(0,0,0,0.5); z-index: 999; } .left i { display: block; margin-top: 10px; margin-left: 20px; width: 30px; height: 30px; background: url(img/left.png) no-repeat; background-size: 30px 30px; } .right { display: none; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); width:50px; height: 50px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; background-color: rgba(0,0,0,0.5); z-index: 999; } .right i { display: block; margin-top: 10px; margin-right: 20px; width: 30px; height: 30px; background: url(img/right.png) no-repeat; background-size: 30px 30px; } ul li,ol li { list-style: none; } .picture { position: absolute; } .list { position: absolute; bottom: 10px; left: 10px; } .list li { float: left; margin-right: 10px; width: 10px; height: 10px; border-radius: 10px; background-color: rgba(0,0,0,0.5); cursor: pointer; } .list .current { background-color: #fff; } .picture li { position: absolute; width: 600px; height: 300px; } img { width: 100%; height: 100%; } </style> </head> <body> <div class='container'> <span class='left'><i></i></span> <span class='right'><i></i></span> <ul class='picture'> <li><img src='http://m.b3g6.com/bcjs/img/1.jpg' ></li> <li><img src='http://m.b3g6.com/bcjs/img/2.jpg' ></li> <li><img src='http://m.b3g6.com/bcjs/img/3.jpg' ></li> <li><img src='http://m.b3g6.com/bcjs/img/4.jpg' ></li> <li><img src='http://m.b3g6.com/bcjs/img/5.jpg' ></li> </ul> <ol class='list'> </ol> </div> <script type='text/javascript'> var picture = document.querySelector(’.picture’); var list = document.querySelector(’.list’); var num=0; var circle=0; for (i=0;i<picture.children.length;i++) { // 設(shè)置圖片的位置 picture.children[i].style.left = i*600 + ’px’; // 自動(dòng)生成有序列表 var li = document.createElement(’li’); li.setAttribute(’index’,i);list.appendChild(li); // 給li添加點(diǎn)擊事件 li.addEventListener(’click’,function () { for (var i=0;i<list.children.length;i++) { list.children[i].className = ’’; } this.className = ’current’; var index = this.getAttribute(’index’); num = index; circle = index; animate(picture,-index*600); }) } // 設(shè)置第一個(gè)ol孩子的類名 list.children[0].className = ’current’; var left = document.querySelector(’.left’); var right = document.querySelector(’.right’); var container = document.querySelector(’.container’); // 設(shè)置鼠標(biāo)經(jīng)過(guò)離開(kāi)事件 container.addEventListener(’mouseover’,function () { left.style.display = ’block’; right.style.display = ’block’; clearInterval(timer) timer = null; }) container.addEventListener(’mouseleave’,function () { left.style.display = ’none’; right.style.display = ’none’; timer = setInterval(function () { right.click(); },1000); }) // js動(dòng)畫(huà)函數(shù) function animate (obj,target,callback) { clearInterval(obj.timer) obj.timer = setInterval(function () { var step = (target - obj.offsetLeft)/10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if(obj.offsetLeft == target) { clearInterval(obj.timer); if (callback) { callback(); } } obj.style.left = obj.offsetLeft + step + ’px’; },15) } var first = picture.children[0].cloneNode(true); picture.appendChild(first); picture.lastChild.style.left = (picture.children.length-1)*600 + ’px’; //右側(cè)點(diǎn)擊事件 right.addEventListener(’click’,function () { if (num==picture.children.length-1) { picture.style.left = 0; num = 0; } num++; animate(picture,-num*600); circle ++; if (circle == list.children.length) { circle = 0; }for (var i = 0;i<list.children.length;i++) { list.children[i].className = ’’; } list.children[circle].className = ’current’; }) // 左側(cè)點(diǎn)擊事件 left.addEventListener(’click’,function () { if (num==0) { picture.style.left = -(picture.children.length-1)*600 +’px’; num = picture.children.length-1; } num--; animate(picture,-num*600); circle --; if (circle < 0) { circle = list.children.length-1; }for (var i = 0;i<list.children.length;i++) { list.children[i].className = ’’; } list.children[circle].className = ’current’; }) var timer = setInterval(function () { // 手動(dòng)調(diào)用 right.click(); },1000); </script> </body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能2. JavaScript實(shí)現(xiàn)留言板實(shí)戰(zhàn)案例3. 使用Blazor框架實(shí)現(xiàn)在前端瀏覽器中導(dǎo)入和導(dǎo)出Excel4. ASP基礎(chǔ)知識(shí)Command對(duì)象講解5. python中文本字符處理的簡(jiǎn)單方法記錄6. 資深程序員：給Python軟件開(kāi)發(fā)測(cè)試的25個(gè)忠告！7. Python-openpyxl表格讀取寫(xiě)入的案例詳解8. 如何從Python的cmd中獲得.py文件參數(shù)9. Python基于requests庫(kù)爬取網(wǎng)站信息10. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法
網(wǎng)公網(wǎng)安備