原生JavaScript实现图片切换

来源：互联网发布：网络中控机厂家编辑：程序博客网时间：2024/05/16 17:08

Html

<div id="div"><img class="on"  src="img/1.png" alt=""><span class="prev"><</span><span class="next">></span><ul><li class="active"></li><li></li><li></li><li></li></ul></div>

css

*{padding: 0;margin: 0;}#div{position: relative;width: 300px;height: 300px;padding: 10px 10px 30px 10px;background: #ccc;text-align: center;margin:200px auto auto auto;color: #fff;font-weight: bold;}img{display: none;float: left;width: 300px;height: 300px;}.on{display: block;}span{width: 30px;height: 30px;cursor: pointer;}.prev{position: absolute;left: 10px;top: 50%;}.next{position: absolute;right: 10px;top: 50%;}ul{position: absolute;left: 37%;bottom: 10px;width: 100%;}ul li{float: left;list-style: none;width: 10px;height: 10px;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;background: #fff;margin-right: 12px;cursor: pointer;}.active{background: bisque;}

JavaScript

window.onload=function e() {var Img = document.getElementsByTagName("img")[0];var prev = document.getElementsByClassName("prev")[0];var next = document.getElementsByClassName("next")[0];var Li = document.getElementsByTagName("li");var arrUrl = ["img/1.png","img/2.png","img/3.png","img/4.png"];var iNow = 0;function change() {for(var i=0;i<Li.length;i++){Li[i].className='';}Li[iNow].className='active';Img.src=arrUrl[iNow];}for (var i = 0; i < Li.length; i++) {Li[i].index = i;Li[i].onclick = function () {iNow=this.index;change();}}prev.onclick = function () {iNow --;if (iNow ==-1) {iNow = Li.length - 1;}change();};next.onclick = function () {iNow ++;if (iNow == Li.length) {iNow = 0;}change();};}

0 0