輪播圖制作(1)

輪播圖制作

<body><div><img src="img/1.jpg" class="imgs" alt=""><a href="#" class="left"><</a> //此處的箭頭也可以用圖標做出來<a href="#" class="right">></a><ul><li class="col"></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</body>

 <style>* {padding: 0;margin: 0;box-sizing: border-box;}div {width: 500px;height: 300px;background-color: cadetblue;margin: 100px auto;position: relative;cursor: pointer;}div:hover a {display: block;}img {width: 100%;height: 100%;}div ul {width: 100px;height: 20px;position: absolute;display: flex;justify-content: space-around;bottom: 10px;left: 50%;border-radius: 10px;transform: translateX(-50%);/* background-color: rgba(155, 154, 154, 0.7); */}div ul li {float: left;list-style-type: none;width: 10px;height: 10px;margin-top: 5px;background-color: #fff;border-radius: 50%;}a {display: inline-block;display: none;width: 30px;height: 50px;text-decoration: none;color: #fff;font-size: 30px;font-weight: 200;line-height: 50px;text-align: center;background-color: rgba(171, 172, 170, 0.5);}.left {position: absolute;left: 0px;top: 50%;transform: translateY(-50%);}.right {position: absolute;right: 0px;top: 50%;transform: translateY(-50%);}.col {background-color: rgb(61, 115, 216);}</style>

<script>window.onload = function() {var div = document.querySelector('div');var img = document.querySelector('.imgs');var la = document.querySelector('.left');var ra = document.querySelector('.right');var li = document.querySelectorAll('li');var i = 1;var timer = null;function imgs() {i++;if (i > 6) i = 1;img.src = "img/" + i + ".jpg";for (var j = 0; j < li.length; j++) {li[j].className = '';li[i - 1].className = 'col';}}timer = setInterval(imgs, 2500);// 移入暫停div.addEventListener('mouseover', function() {clearInterval(timer);});div.addEventListener('mouseout', function() {timer = setInterval(imgs, 2500);});// 左右ra.addEventListener('click', imgs);la.addEventListener('click', function() {i--;if (i < 1) i = 6;img.src = "img/" + i + ".jpg";for (var j = 0; j < li.length; j++) {li[j].className = '';li[i - 1].className = 'col';}});// 小圓點for (var j = 0; j < li.length; j++) {li[j].index = j; //添加下標li[j].addEventListener('click', function() {for (var k = 0; k < li.length; k++) {li[k].className = '';}console.log(this.index);li[this.index].className = 'col';i = this.index + 1;img.src = "img/" + i + ".jpg";})}}
</script>

實現的效果如下：

在這里插入圖片描述

images

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/248253.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/248253.shtml
英文地址，請注明出處：http://en.pswp.cn/news/248253.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！