js图片切换具体实现代码


Posted in Javascript onOctober 13, 2016

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
javascript初学者常用技巧
Sep 02 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 Javascript
如何在JavaScript中正确处理变量
Dec 25 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 #Javascript
jquery实现图片切换代码
Oct 13 #Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 #Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 #Javascript
Javascript中this绑定的3种方法与比较
Oct 13 #Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 #Javascript
jquery  实现轮播图详解及实例代码
Oct 12 #Javascript
You might like
PHP执行速率优化技巧小结
2008/03/15 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
python 控制语句
2011/11/03 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python自动发邮件脚本
2017/03/31 Python
Python 异常处理的实例详解
2017/09/11 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
python中reload重载实例用法
2020/12/15 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
英国网上花店:Bunches
2016/11/29 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
文科生自我鉴定
2014/02/15 职场文书
重阳节慰问信
2015/02/15 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
孟佩杰观后感
2015/06/17 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
国际贸易实训总结
2015/08/03 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
Win10 Anaconda安装python-pcl
2022/04/29 Servers
Redis批量生成数据的实现
2022/06/05 Redis