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 相关文章推荐
js中更短的 Array 类型转换
Oct 30 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php集成动态口令认证
2016/07/21 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
javascript截取字符串小结
2015/04/28 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
小程序实现tab标签页
2020/11/16 Javascript
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Django中FilePathField字段的用法
2020/05/21 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
物流仓储计划书
2014/01/10 职场文书
文体活动实施方案
2014/03/27 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
辞职离别感言
2015/08/04 职场文书
企业法律事务工作总结
2015/08/11 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
浅谈JS的原型和原型链
2021/06/04 Javascript
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle
mysql数据库如何转移到oracle
2022/12/24 MySQL