JS實(shí)現(xiàn)簡(jiǎn)單圖片輪播效果
本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)單圖片輪播效果的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)效果
html源碼
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Carousel chart</title> <link rel='stylesheet' href='http://www.gepszalag.com/bcjs/style.css' > <script src='http://www.gepszalag.com/bcjs/index.js'></script> <script src='http://www.gepszalag.com/bcjs/animate.js'></script></head><body> <div id='carousel-box'><a href='javascript:;' class='arrow-l'> < </a><a href='javascript:;' class='arrow-r'> > </a><ul class='move'> <li><img src='http://www.gepszalag.com/bcjs/images/xuezhong_1.jpg' alt=''></li> <li><img src='http://www.gepszalag.com/bcjs/images/guimizhizhu_2.jpg' alt=''></li> <li><img src='http://www.gepszalag.com/bcjs/images/jianlai_3.jpg' alt=''></li> <li><img src='http://www.gepszalag.com/bcjs/images/yichang_4.jpg' alt=''></li></ul><ol class='circle'></ol> </div></body></html>
一個(gè)大的div盒子里面，兩個(gè)左右懸浮于中間的按鈕，四張圖片，一行相對(duì)于下面的小圓圈
CSS源碼*{ padding: 0; margin: 0;}li { list-style-type: none;}#carousel-box { position: relative; width: 700px; height: 300px; background-color: pink; margin: 100px auto; overflow: hidden;}.arrow-l,.arrow-r { display: none; position:absolute; width: 24px; height: 40px; top: 50%; margin-top: -20px; background: rgba(0, 0, 0, 0.3); text-align:center; line-height: 40px; color: #fff; font-size: 18px; font-family: ’icomoon’; z-index: 3;}.arrow-r { right: 0;}#carousel-box img{ width: 700px; height: 300px;}#carousel-box ul { position:absolute; width: 1000%;}#carousel-box ul li { float: left;}.circle { position: absolute; bottom: 10px; right: 10px;}.circle li { float: left; width: 8px; height: 8px; margin: 0 5px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; z-index: 9999;}.current { background-color: pink;}JS源碼
animate.js：在水平平面實(shí)現(xiàn)左右移動(dòng)的函數(shù)
function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function () {/* 判斷正負(fù)，小數(shù)取大還是取小 */var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) { clearInterval(obj.timer); callback && callback();}obj.style.left = obj.offsetLeft + step + ’px’; }, 15);}
index.js
window.addEventListener(’load’, function () { var carousel = document.querySelector(’.carousel_box’); var ul = document.querySelector(’.move’); var ol = document.querySelector(’.circle’); var carcouselWidth = carousel.offsetWidth; var arrow_l = document.querySelector(’.arrow-l’); var arrow_r = document.querySelector(’.arrow-r’); carousel.addEventListener(’mouseenter’, function () {arrow_r.style.display = ’block’;arrow_l.style.display = ’block’;clearInterval(timer);timer = null; // 清除定時(shí)器變量 }) carousel.addEventListener(’mouseleave’, function () {arrow_r.style.display = ’none’;arrow_l.style.display = ’none’;timer = setInterval(function () { arrow_r.click();}, 2000); }) var num = 0; var circle = 0; // 根據(jù)圖片數(shù)量生成相對(duì)應(yīng)的小圓圈 for (var i = 0; i < ul.children.length; i++) {var li = document.createElement(’li’);li.setAttribute(’index’, i);ol.appendChild(li);li.addEventListener(’click’, function () { for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ’’; } this.className = ’current’; var n = this.getAttribute(’index’); num = n; circle = n; animate(ul, -n * carcouselWidth); console.log(n);}) } ol.children[0].className = ’current’; var first = ul.children[0].cloneNode(true); ul.appendChild(first); var flag = true; /* function circleChange() {for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ’’;}ol.children[circle].className = ’current’; } */ arrow_r.addEventListener(’click’, function () {if (flag) { flag = false; if (num == ul.children.length - 1) {ul.style.left = 0;num = 0; } num++; animate(ul, -num * carcouselWidth, function () {flag = true; });}circle++;if (circle == ol.children.length) { circle = 0;}circleChange(); }) arrow_l.addEventListener(’click’, function () {if (flag) { flag = false; if (num == 0) {num = ul.children.length - 1;ul.style.left = -num * carcouselWidth + ’px’; } num--; animate(ul, -num * carcouselWidth, function () {flag = true; }); circle--; circle = circle < 0 ? ol.children.length - 1 : circle; // 調(diào)用函數(shù) circleChange();} }); function circleChange() {for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ’’;}ol.children[circle].className = ’current’; } var timer = setInterval(function () {arrow_r.click(); }, 2000);
心得：在js實(shí)現(xiàn)功能中，如何根據(jù)圖片數(shù)量生成小圓圈并能無縫滾動(dòng)需要重點(diǎn)注意。未解決的bug：多次快速點(diǎn)擊小圓圈跳轉(zhuǎn)后，可能會(huì)導(dǎo)致小圈圈與圖片索引位置錯(cuò)亂，同樣點(diǎn)擊左右按鈕也有可能出現(xiàn)類似問題。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 基于javaweb+jsp實(shí)現(xiàn)學(xué)生宿舍管理系統(tǒng)2. 多級(jí)聯(lián)動(dòng)下拉選擇框，動(dòng)態(tài)獲取下一級(jí)3. ASP.NET MVC實(shí)現(xiàn)樹形導(dǎo)航菜單4. 如何封裝一個(gè)Ajax函數(shù)5. Java 接口和抽象類的區(qū)別詳解6. Laravel Eloquent ORM高級(jí)部分解析7. IDEA 搭建maven 安裝、下載、配置的圖文教程詳解8. jsp response.sendRedirect()用法詳解9. Spring security 自定義過濾器實(shí)現(xiàn)Json參數(shù)傳遞并兼容表單參數(shù)(實(shí)例代碼)10. PHP擴(kuò)展之URL編碼、解碼及解析——URLs
網(wǎng)公網(wǎng)安備