js实现图片淡入淡出切换简易效果


Posted in Javascript onAugust 22, 2016

本文实例为大家分享了js图片淡入淡出切换详细代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{padding: 0;margin: 0;}
      ul{overflow: hidden;}
      li{list-style: none;height: 30px;border: 1px solid #000;width: 100px;float: left;line-height: 30px;text-align: center;}
      img{width:306px;opacity: 0;}
      .active{background:yellow}
    </style>
     
     
  </head>
  <body>
    <ul>
      <li>王宝强</li>
      <li>马蓉</li>
      <li>宋吉</li>
    </ul>
    <img src=""/>
  </body>
  <script src="public.js"></script>
    <script type="text/javascript">
      var oLi=document.getElementsByTagName("li");
      var oImg=document.getElementsByTagName("img")[0];
      var arr=['img/wbb.jpg','img/wlp.jpg','img/qs.jpg']
      var time=null;
      var time1=null;
       
      for(i=0;i<oLi.length;i++){
        oLi[i].index=i;
        oLi[i].onclick=function(){
          for(i=0;i<oLi.length;i++){
            oLi[i].className="";
          }
          this.className="active";
          oImg.src=arr[this.index];
           
          var num=0;
          var step=2;
          clearInterval(time);
          clearInterval(time1);
          time = setInterval(function(){
            num+=step;
            if(num>=200){
              num=200;
              clearInterval(time);
            }
            oImg.style.opacity = num/200;
          },20)
   
        }
      }
       
    </script>
</html>

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

Javascript 相关文章推荐
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
vant 中van-list的用法说明
Nov 11 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
JS对HTML表格进行增删改操作
Aug 22 #Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 #Javascript
详解AngularJS如何实现跨域请求
Aug 22 #Javascript
深入浅析JS Function()构造函数
Aug 22 #Javascript
深入浅析jQuery对象$.html
Aug 22 #Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 #Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 #Javascript
You might like
优化使用mysql存储session的php代码
2008/01/10 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
实例说明Python中比较运算符的使用
2015/05/13 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python列表list排列组合操作示例
2018/12/18 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
创业计划书之家教托管
2019/09/25 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python