这篇文章主要介绍了 JS+CSS 实现淡入式焦点图片幻灯切换效果的方法, 实例分析了 javascript 操作图片、css 等元素实现幻灯片的技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
本文实例讲述了 JS+CSS 实现淡入式焦点图片幻灯切换效果的方法。分享给大家供大家参考。具体实现方法如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 一款JS+CSS淡入式焦点图片幻灯切换效果
- </title>
- <style>
- body,div,ul,li{margin:0;padding:0;} ul{list-style-type:none;} body{background:#000;text-align:center;font:12px/20px
- Arial;} #box{position:relative;width:322px;height:172px;background:#fff;border-radius:5px;border:8px
- solid #fff;margin:10px auto;} #box .list{position:relative;width:320px;height:240px;overflow:hidden;border:1px
- solid #ccc;} #box .list li{position:absolute;top:0;left:0;width:320px;height:240px;opacity:0;filter:alpha(opacity=0);}
- #box .list li.current{opacity:1;filter:alpha(opacity=100);} #box .count{position:absolute;right:0;bottom:5px;}
- #box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
- #box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
- #tmp{width:100px;height:100px;background:red;position:absolute;}
- </style>
- <script type="text/javascript">
- window.onload = function() {
- var oBox = document.getElementById("box");
- var aUl = document.getElementsByTagName("ul");
- var aImg = aUl[0].getElementsByTagName("li");
- var aNum = aUl[1].getElementsByTagName("li");
- var timer = play = null;
- var i = index = 0; //切换按钮
- for (i = 0; i < aNum.length; i++) { aNum[i].index = i; aNum[i].onmouseover = function() { show(this.index)
- }
- } //鼠标划过关闭定时器
- oBox.onmouseover = function() { clearInterval(play)
- }; //鼠标离开启动自动播放
- oBox.onmouseout = function() { autoPlay()
- }; //自动播放函数
- function autoPlay() { play = setInterval(function() { index++; index >= aImg.length && (index = 0); show(index);
- },
- 2000);
- } autoPlay(); //应用图片切换 淡入淡出效果
- function show(a) { index = a;
- var alpha = 0;
- for (i = 0; i < aNum.length; i++) aNum[i].className = ""; aNum[index].className = "current"; clearInterval(timer);
- for (i = 0; i < aImg.length; i++) { aImg[i].style.opacity = 0; aImg[i].style.filter = "alpha(opacity=0)";
- } timer = setInterval(function() { alpha += 2; alpha > 100 && (alpha = 100); aImg[index].style.opacity = alpha / 100; aImg[index].style.filter = "alpha(opacity = " + alpha + ")"; alpha == 100 && clearInterval(timer)
- },
- 20);
- }
- };
- </script>
- </head>
- <body>
- <div id="box">
- <ul class="list">
- <li class="current">
- <img src="/images/m01.jpg" width="320" height="240" />
- </li>
- <li>
- <img src="/images/m02.jpg" width="320" height="240" />
- </li>
- <li>
- <img src="/images/m03.jpg" width="320" height="240" />
- </li>
- <li>
- <img src="/images/m04.jpg" width="320" height="240" />
- </li>
- <li>
- <img src="/images/m05.jpg" width="320" height="240" />
- </li>
- </ul>
- <ul class="count">
- <li class="current">
- 1
- </li>
- <li>
- 2
- </li>
- <li>
- 3
- </li>
- <li>
- 4
- </li>
- <li>
- 5
- </li>
- </ul>
- </div>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: