这篇文章主要为大家详细介绍了 js 实现图片淡入淡出切换简易效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!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>
来源: http://www.phperz.com/article/17/0523/332412.html