js图片切换具体实现代码

2019-11-20 08:45:56

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现图片切换的方法，供大家参考，具体内容如下

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <style> *{  margin:0;  padding:0; } .all{  width:600px;  height:350px;  position:relative;  overflow:hidden;  margin:100px auto; } .all ul{  z-index:1;  position:relative; } .all ul li{  position:absolute;  top:0;  left:0; } .all ol{  position:absolute;  right:10px;  bottom:10px;  z-index:2; } .all ol li{  width:20px;  height:20px;  border:1px solid #fff;  background-color:#333;  float:left;  overflow:hidden;  margin-right:10px;  text-align:center;  line-height:20px;  color:#fff;  margin-top:10px;  font-weight:bold; } .all ol .current{  width:30px;  height:30px;  border:1px solid #f60;  color:#f60;  line-height:30px;  margin-top:0;  cursor:pointer; } </style>  <script> //通过id值获得元素的函数 function $(id){  return document.getElementById(id); }  //初始化函数 function initial(){  olLi=document.getElementsByTagName('ol')[0].getElementsByTagName('li');//获取ol下的li  ol=$('tab');//获取ol元素  theImg=$('theImg');  //五张图片的地址  addressPic=['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg'];    //遍历ol下的li  for(var i=0;i<olLi.length;i++){   //依次给每个li绑定mouseover事件,该事件执行切换图片的函数   olLi[i].addEventListener('mouseover',changePicture,false);   olLi[i].index=i;//设置ol li的index序列号     } }   //切换图片 function changePicture(e){  e.target.className="current";//将选中的ol下的li的class属性设置为current,e.target代表选中的li    //清除ol里的空白节点  cleanWhitespace(ol);    //删除除当前选中的li外其他li的class属性值  nextNode=e.target.nextSibling;//当前节点的下一个节点  lastNode=e.target.previousSibling;//当前节点的前一个节点  while(nextNode){//将当前节点后所有的兄弟节点的class属性清除   nextNode.setAttribute('class','');   nextNode=nextNode.nextSibling;  }  while(lastNode){//将当前节点前面所有的兄弟节点的class属性清除   lastNode.className='';   lastNode=lastNode.previousSibling;  }    //实现切换图片的功能   theImg.src=addressPic[this.index]; }   //清除ol下的空白节点 function cleanWhitespace(oElement) {  for(var i=0;i<oElement.childNodes.length;i++){   var node=oElement.childNodes[i];   if(node.nodeType==3 && !//S/.test(node.nodeValue)){      node.parentNode.removeChild(node)   } }} //给窗体绑定load事件，执行初始化函数initial() window.addEventListener('load',initial,false); </script> </head> <body> <div class="all"> <ul>  <li><img id="theImg" src="01.jpg" width="600px" height="350px"/></li> </ul> <ol id="tab">  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li class="current">5</li> </ol> </div> </body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：BootStrap实现手机端轮播图左右滑动事件

下一篇：微信小程序 rpx 尺寸单位详细介绍