js实现同一页面可多次调用的图片幻灯切换效果
本文实例讲述了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"&
&title&js同一页面可多次调用的图片幻灯切换效果&/title&
&meta http-equiv="content-type" content="text/charset=gb2312"&
&!--把下面代码加到&head&与&/head&之间--&
&script language="javascript"&
//声明命名空间
var $o = new Object();
//基础方法
$o.base = {
&e:function(a,f){
& for(var i=0,j=a.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*,
& w = t.clientWidth,
& h = t.clientHeight,
& b = ['&ul style="margin:0; padding:0; list-style: display: position: bottom:10 right:10"&'],
& index = 0,
& $ = 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){
&&& if(!!$){clearInterval($);}
&&& $ = setInterval(function(){
&&&& var ot = a[0].offsetT
&&&& v = Math[to&ot?'floor':'ceil']((to - ot)*0.2);
&&&& if(ot == to){clearInterval($);$=st();}
&&&& ot +=
&&&& a[0].style.marginTop = ot + "px";
& function c(b,o){
&& o.style.backgroundColor = !!b?cl:"#fff";
&& o.style.color = !!b?"#fff":
& 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:20 height:20 line-height:20 display: float: margin-left:5 border:1px solid ' + cl + '; background-color:# color:' + cl +'; font-size:14 text-align: cursor:"&' + (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);
&!--把下面代码加到&body&与&/body&之间--&
&div id="aa" style="width:402height:228"&
&&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&
&script language="javascript"&
new $o.slide("aa");
&div id="bb" style="width:402height:228"&
&&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&
&script language="javascript"&
new $o.slide("bb",{color:'#000',time:0.2});
&div id="cc" style="width:402height:228"&
&&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&
&script language="javascript"&
new $o.slide("cc",{color:'green'});
希望本文所述对大家的javascript程序设计有所帮助。
如果您喜欢本文请分享给您的好友，谢谢！
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2012年 总版技术专家分年内排行榜第一
2013年 总版技术专家分年内排行榜第七2011年 总版技术专家分年内排行榜第五2009年 总版技术专家分年内排行榜第九
本帖子已过去太久远了，不再提供回复功能。你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
一个被多次调用的vue组件如何让它在其中一个调用中，实现一些特殊效果
一个列表组件通过ajax请求到数据，这个列表组件被许多组件调用，在一个调用它组件中，需要做到点击一个按钮给列表中的ajax请求重新传参，重新触发ajax请求，有什么好的方法做到这个效果呢？
首先这个列表组件有这样一个事件：点击一个按钮给列表中的ajax请求重新传参，重新触发ajax请求
给这个列表组件一个布尔值的默认参数：如果调用这个组件的父组件传递的这个参数的值为真，则上面的事件是有效的
要回复讨论请先或
积分 : 2000
关注: 5 人
1 个回答, 0 个赞同
1 个回答, 4 个赞同当前位置： &
同一IP只弹出一次窗口的特效代码[网页特效] - 网页特效代码演示 - 特效代码运行&
欢迎光临阿里西西网页脚本特效中心，点击运行按钮演示特效：
&!-- 把下列代码加到BODY中 --&
　　var cookieString = new String(document.cookie)
　　var cookieHeader = 'happy_pop' //更换happy_pop为任意名称
　　var beginPosition = cookieString.indexOf(cookieHeader)
　　if (beginPosition &0){
window.open('/index.html','','top=0,left=0,width=787,height=480,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes,location=yes,status=yes');
var Then = new Date()　　　　
　　 Then .setTime(Then.getTime() + 12*60*60*1000 ) //同一ip设置过期时间，即多长间隔跳出一次
　　 document.cookie = 'happy_pop=expires='+ Then.toGMTString()　 //更换happy_pop和第4行一样的名称
　　　　}//more javascript from
[提示：可先修改代码再按运行]
刚被其它网友点击的网页特效&
特效标题预览特效点击运行特效
搜索查询面板&
本月特效排行&
本周特效排行&
本日特效排行&}