JS原生手寫輪播圖

上代碼

JS

<script>var ims = document.getElementsByClassName('im');var z = document.getElementsByClassName('z')[0];var s = document.getElementsByClassName('s')[0];var index = 0;s.onclick = function () {index++;if (index > ims.length - 1) {index = 0;}for (var i = 0; i < ims.length; i++) {ims[i].style.display = 'none'}ims[index].style.display = 'block'}z.onclick = function () {index--;if (index < 0) {index = ims.length - 1;}for (var i = 0; i < ims.length; i++) {ims[i].style.display = 'none'}ims[index].style.display = 'block'}</script>

HTML

<div class="box"><ul><li><img src="01%20(1).jpg" class="im"></li><li><img src="01%20(2).jpg" class="im"></li><li><img src="01%20(3).jpg" class="im"></li><li><img src="01%20(4).jpg" class="im"></li></ul><span class="z">&lt;</span><span class="s">&gt;</span> </div>

CSS

<style>* {margin: 0;padding: 0;}.box {width: 500px;height: 500px;border: 2px solid fuchsia;margin: 50px auto;position: relative;}.box img {width: 500px;height: 500px;position: absolute;top: 0;left: 0;display: none;}li {list-style: none;}img:first-child {display: block;}.z {width: 20px;height: 60px;line-height: 60px;background: rgba(0, 0, 0, 0.5);position: absolute;top: 50%;transform: translateY(-50%);}.s {width: 20px;height: 60px;line-height: 60px;background: rgba(0, 0, 0, 0.5);position: absolute;top: 50%;right: 0;transform: translateY(-50%);}</style>

總結

以上是生活随笔為你收集整理的JS原生手写轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。