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 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
jQuery filter函数使用方法
May 19 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
微信小程序 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原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
为什么要用EJB
2014/04/17 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
小学老师寄语大全
2014/04/04 职场文书
办公室日常管理制度
2015/08/04 职场文书