这篇文章主要介绍了 JS+CSS 实现自动改变切换方向图片幻灯切换效果的方法, 实例分析了 javascript 操作图片切换方向的幻灯片技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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;
- var bOrder = true; //切换按钮
- 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() { //判断播放顺序
- bOrder ? index++:index--; //正序
- index >= aImg.length && (index = aImg.length - 2, bOrder = false); //倒序
- index <= 0 && (index = 0, bOrder = true); //调用函数
- 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/m06.jpg" width="320" height="240" />
- </li>
- <li>
- <img src="/images/m07.jpg" width="320" height="240" />
- </li>
- <li>
- <img src="/images/m08.jpg" width="320" height="240" />
- </li>
- <li>
- <img src="/images/m09.jpg" width="320" height="240" />
- </li>
- <li>
- <img src="/images/m10.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 程序设计有所帮助。
来源: