正文
javascript轮换,javascript简单轮换图
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
请教JavaScript制作图片轮换
这个效果应该是你想要的：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title图片滚动/title
/head
body
style type="text/css"
!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
--
/style
div id="demo"
div id="indemo"
div id="demo1"
a href="#"img src="" border="0" //a
a href="#"img src="" border="0" //a
a href="#"img src="" border="0" //a
a href="#"img src="" border="0" //a
a href="#"img src="" border="0" //a
a href="#"img src="" border="0" //a
/div
div id="demo2"/div
/div
/div
script
!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
--
/script
/body
/html
相关问答
Q1: javascript代码的图片轮换,求详细分析(学习需要)
其实整个代码的作用还是很明显的，我想lz主要的疑惑是在
var Class = {}
Object.extend = function(destination, source) {}
这两个函数上吧，那我就说说这两个函数什么意思。
首先：
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
在这个函数中有个apply()方法，他有两个参数，第一个表示作用的对象 ，第二天表示传入的参数。整个函数的意思是，初始化一个静态方法“initialize”，然后通过“apply”让类Class.create事例同时继承initialize的方法属性
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
这个函数的作用是对Object类进行的扩展，通过执行这个函数，目标对象将拥有源对象的所有属性和方法，
Q2: 实现自动图片轮换的javascript代码
方法一：图片轮换时利用revealTrans滤镜产生转换效果：
img src="face/face1.gif" id="turn" width="200"
style="filter:revealTrans(duration=1)"
script
var obj,first,total,cn,delay=2000
function window.onload(){
obj=document.getElementById("turn") //捕获ID为turn的对象
first=1 //第一张图片的路径信息
total=18 //最后一张图片的路径信息
cn=1 //当前显示的图片路径信息
setTimeout("change()",delay/2)
//delay/2毫秒后执行change()函数
}
function change(){
url="face/face" //图片路径的前部分
suffix=".gif" //图片的扩展名
if(cntotal) //如果当前图片数字小于最后一张的图片数字
url+=(cn+=1)+suffix //cn自增1，并连接字符串得到url
//否则如果当前图片数字等于最后一张的图片数字，即轮换到最后一张时
else if(cn==total)
//cn重调为first(第一张图片)，并且连接字符串得到url
url+=(cn=first)+suffix
with(obj.filters.revealTrans){
apply() //捕获对象内容的初始显示，为转换做必要的准备
//revealTrans滤镜的转换效果，0到22为23种效果，
//23为23种效果的随机一种
transition=23
obj.src=url //设置图片的路径
play() //开始转换。
}
setTimeout("change()",delay)//delay毫秒后再次执行change()函数
}
/script
方法二：利用wipe滤镜进行左右擦洗式轮换
img src="face/face1.gif" id="turn" width="200"
style="filter:progid:DXImageTransform.Microsoft.Wipe(GradientSize=.5, wipeStyle=0, motion=’forward’)"
script
var obj,first,total,cn,delay=2000
function window.onload(){
obj=document.getElementById("turn")//捕获ID为turn的对象
first=1 //第一张图片的路径信息
total=18 //最后一张图片的路径信息
cn=1 //当前显示的图片路径信息
setTimeout("change()",delay/2)//delay/2毫秒后执行change()函数
}
function change(){
url="face/face" //图片路径的前部分
suffix=".gif" //图片的扩展名
if(cntotal) //如果当前图片数字小于最后一张的图片数字
url+=(cn+=1)+suffix //cn自增1，并连接字符串得到url
//否则如果当前图片数字等于最后一张的图片数字，即轮换到最后一张时
else if(cn==total)
//cn重调为first(第一张图片)，并且连接字符串得到url
url+=(cn=first)+suffix
with(obj.filters[0]){
apply() //捕获对象内容的初始显示，为转换做必要的准备
duration=delay/1000//设置转换完成所用的时间为delay/1000秒
//用这个方法实现左右互换擦除的效果
motion={reverse:’forward’,forward:’reverse’}[motion]
obj.src=url //设置图片的路径
play() //开始转换。
}
setTimeout("change()",delay)//delay毫秒后再次执行change()函数
}
/script
注意：图片名必须带有数字规律，而且扩展名一致。
提示：方法二的左右擦洗轮换的详细实现过程主要是依靠自定义对象的简略式写法。假设motion的当前值为"reverse"，则
motion={reverse:’forward’,forward:’reverse’}[motion]
相当于
motion={reverse:’forward’,forward:’reverse’}["reverse"]
即
motion="forward"
如果motion的当前值为"forward"，则
motion={reverse:’forward’,forward:’reverse’}[motion]
相当于
motion={reverse:’forward’,forward:’reverse’}["forward"]
即
motion="reverse"
所以motion的值就在"reverse"和"forward"之间不断轮换
特别提示
方法一的代码运行后，face文件夹下的图片face1.gif到face18.gif将从第一张到最后一张每两秒轮换一次，并且每次轮换的转换效果是23种转换效果里的随机一种。方法二的代码运行后，除了转换的效果是左右轮换式的擦洗效果，其它情况同方法一。：
图片轮换的图片文件名通常是有规律的序列，比如说是从1到N，然后设置定时器，每隔一段时间换一张图片，图片文件名作为一个自加变量，在轮换完后再从头开始。另外在任意两张图片的轮换时还会有一些转换的过渡效果，这个主要依靠转换滤镜来实现。
或者看看这里:
