这篇文章主要介绍了 js 实现同一页面可多次调用的图片幻灯切换效果, 可实现在同一页面中多次调用幻灯切换效果, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现同一页面可多次调用的图片幻灯切换效果。分享给大家供大家参考。具体实现方法如下:
- <!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>
- <title>
- js同一页面可多次调用的图片幻灯切换效果
- </title>
- <meta http-equiv="content-type" content="text/html;charset=gb2312">
- <!--把下面代码加到<head>与</head>之间-->
- <script language="javascript">
- //声明命名空间
- var $o = new Object();
- //基础方法
- $o.base = { e: function(a, f) {
- for (var i = 0,
- j = a.length; i < j; i++) {
- f.call(a[i], i);
- }
- }
- }
- $o.slide = function(id, arg) {
- var arg = arg || {},
- t = document.getElementById(id),
- a = t.getElementsByTagName("a"),
- lis = [],
- cl = arg.color || '#f30',
- ctm = arg.time * 1000 || 2000,
- w = t.clientWidth,
- h = t.clientHeight,
- b = ['<ul style="margin:0; padding:0; list-style:none; display:block; position:absolute; bottom:10px; right:10px;">'],
- index = 0,
- $ = null,
- $ = null;
- function change(i) {
- if ( !! $) {
- clearTimeout($);
- } index = !isNaN(i) ? i: index + 1;
- if (index >= a.length) {
- index = 0;
- } $o.base.e(lis,
- function(k) {
- if (k == index) {
- c(1, this);
- } else {
- c(0, this)
- }
- });
- var to = -index * h;
- if (a[0].offsetTop == to) {
- return;
- } else {
- if ( !! $) {
- clearInterval($);
- } $ = setInterval(function() {
- var ot = a[0].offsetTop; v = Math[to < ot ? 'floor': 'ceil']((to - ot) * 0.2);
- if (ot == to) {
- clearInterval($);
- $ = null;
- st();
- } ot += v; a[0].style.marginTop = ot + "px";
- },
- 30)
- };
- }
- function c(b, o) { o.style.backgroundColor = !!b ? cl: "#fff"; o.style.color = !!b ? "#fff": cl;
- }
- function st() {
- if ( !! $) clearTimeout($); $ = setTimeout(function() {
- change()
- },
- ctm);
- } with(t.style) {
- overflow = 'hidden';
- position = 'relative';
- } $o.base.e(a,
- function(n) { this.style.display = "block"; with(this.firstChild.style) {
- borderWidth = '0';
- width = w + 'px';
- height = h + 'px';
- } b.push('<li style="width:20px; height:20px; line-height:20px; display:block; float:left; margin-left:5px; border:1px solid ' + cl + '; background-color:#fff; color:' + cl + '; font-size:14px; text-align:center; cursor:pointer;">' + (n + 1) + '</li>');
- }); b.push('</ul>'); t.innerHTML += b.join(""); lis = t.getElementsByTagName("li"); $o.base.e(lis,
- function(n) {
- if (n == index) {
- c(1, this)
- } this.onmouseover = function() {
- if (n != index) change(n);
- }
- }); st();
- }
- </script>
- </head>
- <body>
- <!--把下面代码加到<body>与</body>之间-->
- <div id="aa" style="width:402px;height:228px;">
- <a href="javascript:alert('1')">
- <img src="/images/1.jpg">
- </a>
- <a href="javascript:alert('2')">
- <img src="/images/2.jpg">
- </a>
- <a href="javascript:alert('3')">
- <img src="/images/3.jpg">
- </a>
- <a href="javascript:alert('4')">
- <img src="/images/4.jpg">
- </a>
- <a href="javascript:alert('5')">
- <img src="/images/5.jpg">
- </a>
- <a href="javascript:alert('6')">
- <img src="/images/6.jpg">
- </a>
- <a href="javascript:alert('7')">
- <img src="/images/7.jpg">
- </a>
- <a href="javascript:alert('8')">
- <img src="/images/8.jpg">
- </a>
- <a href="javascript:alert('9')">
- <img src="/images/9.jpg">
- </a>
- </div>
- <script language="javascript">
- new $o.slide("aa");
- </script>
- <br>
- <div id="bb" style="width:402px;height:228px;">
- <a href="###">
- <img src="/images/1.jpg">
- </a>
- <a href="###">
- <img src="/images/2.jpg">
- </a>
- <a href="###">
- <img src="/images/3.jpg">
- </a>
- <a href="###">
- <img src="/images/4.jpg">
- </a>
- <a href="###">
- <img src="/images/5.jpg">
- </a>
- </div>
- <script language="javascript">
- new $o.slide("bb", {
- color: '#000',
- time: 0.2
- });
- </script>
- <br>
- <div id="cc" style="width:402px;height:228px;">
- <a href="###">
- <img src="/images/1.jpg">
- </a>
- <a href="###">
- <img src="/images/2.jpg">
- </a>
- <a href="###">
- <img src="/images/3.jpg">
- </a>
- <a href="###">
- <img src="/images/4.jpg">
- </a>
- <a href="###">
- <img src="/images/5.jpg">
- </a>
- </div>
- <script language="javascript">
- new $o.slide("cc", {
- color: 'green'
- });
- </script>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: