JS實現(xiàn)簡單圖片輪播效果
本文實例為大家分享了JS實現(xiàn)簡單圖片輪播效果的具體代碼，供大家參考，具體內(nèi)容如下
實現(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>
一個大的div盒子里面，兩個左右懸浮于中間的按鈕，四張圖片，一行相對于下面的小圓圈
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：在水平平面實現(xiàn)左右移動的函數(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; // 清除定時器變量 }) 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ù)量生成相對應(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實現(xiàn)功能中，如何根據(jù)圖片數(shù)量生成小圓圈并能無縫滾動需要重點注意。未解決的bug：多次快速點擊小圓圈跳轉(zhuǎn)后，可能會導(dǎo)致小圈圈與圖片索引位置錯亂，同樣點擊左右按鈕也有可能出現(xiàn)類似問題。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. PHP設(shè)計模式中工廠模式深入詳解2. JSP數(shù)據(jù)交互實現(xiàn)過程解析3. .NET中l(wèi)ambda表達(dá)式合并問題及解決方法4. 解決AJAX返回狀態(tài)200沒有調(diào)用success的問題5. ThinkPHP5實現(xiàn)JWT Token認(rèn)證的過程(親測可用)6. asp(vbs)Rs.Open和Conn.Execute的詳解和區(qū)別及&H0001的說明7. 利用promise及參數(shù)解構(gòu)封裝ajax請求的方法8. CSS hack用法案例詳解9. Ajax實現(xiàn)表格中信息不刷新頁面進(jìn)行更新數(shù)據(jù)10. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向
網(wǎng)公網(wǎng)安備