如何在javascript中制作簡單的圖像滑塊

Question

我正在嘗試制作簡單的圖像滑塊

• img 標簽中的圖像不是背景圖像
• 所有圖像都有 display:none 只有第一個 li 有活動類活動類是 display:block
• 單擊按鈕將活動類添加到僅下一個 li 並從 pre li 中刪除活動
• 我嘗試但它活動類添加所有下一個 li 標簽點擊按鈕

 var btn_next = document.getElementById('next-btn'); btn_next.onclick = function() { if ($('#main_chagen li').hasClass('acitve') === true) { $('#main_chagen li.acitve').removeClass('acitve') $('#main_chagen li').next().addClass('acitve'); } else { } }

 .main_chagen { width: 100%; float: left; position: relative; } #main_chagen img { width: 100%; height: 26rem; object-fit: cover; } #next-btn, #pre-btn { position: absolute; top: 15rem; padding: 5px 20px; } #next-btn { right: 0; } #pre-btn { left: 0; } #main_chagen li { display: none; } .img_acitve { display: block !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <ul id="main_chagen"> <li class="acitve"> <img src="1.jpg"> </li> <li> <img src="2.jpg"> </li> <li> <img src="3.jpg"> </li> <li> <img src="4.jpg"> </li> <li> <img src="5.jpg"> </li> </ul> <button id="next-btn">next</button> <button id="pre-btn">pre</button> </div>

Answer 1

這是一個工作示例。

你需要研究一下

 $(function() { $('button').on("click", function() { var $cur = $('#main_chagen li.active'); // possibly active var max = $('#main_chagen li').length; // max number of LIs var dir = this.id.indexOf("next") === 0 ? 1:-1; // which button var idx = $cur.length === 0 ? 0 : $cur.index()+dir; // find the index of what we want to show if (idx >= max) idx = 0; // are we at end or beginning if (idx < 0) idx = max-1; $('#main_chagen li').removeClass("active").eq(idx).addClass("active"); }) $("#next-btn").click(); // show the first });

 .main_chagen { width: 100%; float: left; position: relative; } #main_chagen img { width: 100%; height: 26rem; object-fit: cover; } #next-btn, #pre-btn { position: absolute; top: 15rem; padding: 5px 20px; } #next-btn { right: 0; } #pre-btn { left: 0; } #main_chagen li { display: none; } li.active { display: block !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <ul id="main_chagen"> <li> <img src="https://via.placeholder.com/150/0000FF/808080?text=1"> </li> <li> <img src="https://via.placeholder.com/150/0000FF/080808?text=2"> </li> <li> <img src="https://via.placeholder.com/150/FF00FF/808080?text=3"> </li> <li> <img src="https://via.placeholder.com/150/00FFFF/808080?text=4"> </li> <li> <img src="https://via.placeholder.com/150/AABBFF/808080?text=5"> </li> </ul> <button id="next-btn">next</button> <button id="pre-btn">pre</button> </div>