这个图片不自动切换，要点一下下面的1，2，3才开始切换，只要一刷新页面，或者从新打开就成这样子了，白了，没图了，我想让他一打开网页就显示1，2，3来回切换，肿么办啊
第1个回答 2012-07-14
js代码如下，里面有详细解释：
<script type="text/javascript">
/**
1. 图片自动切换(更改img标签src属性)
a.制作一个切换函数
b.加载事件，完成间歇函数功能
2. 完成图片停止功能
3. 如果鼠标移出图片，则间隙函数要调动起来
4. 图片切换的时候对应的序号需要高亮显示
5. 当鼠标"移入"一个序号，则图片要显示对应序号的图片
当前序号也需要被高亮显示
序号有鼠标移入事件
6. 鼠标从序号移出要继续图片切换
*/
//图片切换功能
var i = 1;
function pic_change(){
//图片如果到达最后一个张，则计数器清空、归位
i++;
if(i>8){
i=1;
}
//全部序号"暗"下来
var lis = document.getElementsByTagName('li');
for(var j=0; j<lis.length; j++){
lis[j].style.background="green";
}
//当前序号背景色高亮显示
document.getElementById('xu'+i).style.background="yellow";
var pic_obj = document.getElementById('pic');
pic_obj.src=i+".jpg";
}
//加载事件函数，完成页面每次加载间歇函数的制作
var timer = "";
function jia(){
clearInterval(timer);
timer = setInterval('pic_change()', 1000);
}
//停止图片切换
function stop_pic(){
clearInterval(timer);
}
//鼠标移入序号发生变化的函数
//1显示当前序号对应图片
//2当前序号高亮
//3鼠标移出图片要继续切换
function xu_change(n){
//显示图片
document.getElementById('pic').src=n+".jpg";
//立即停止间隙函数
stop_pic();
//序号背景色发生变化
//全部序号"暗"下来
var lis = document.getElementsByTagName('li');
for(var j=0; j<lis.length; j++){
lis[j].style.background="green";
}
//当前序号背景色高亮显示
document.getElementById('xu'+n).style.background="yellow";
//让图片切换与当前序号一致 计数器与当前序号一致就可以
i=n;
}
</script>
<script type="text/javascript">
/**
1. 图片自动切换(更改img标签src属性)
a.制作一个切换函数
b.加载事件，完成间歇函数功能
2. 完成图片停止功能
3. 如果鼠标移出图片，则间隙函数要调动起来
4. 图片切换的时候对应的序号需要高亮显示
5. 当鼠标"移入"一个序号，则图片要显示对应序号的图片
当前序号也需要被高亮显示
序号有鼠标移入事件
6. 鼠标从序号移出要继续图片切换
*/
//图片切换功能
var i = 1;
function pic_change(){
//图片如果到达最后一个张，则计数器清空、归位
i++;
if(i>8){
i=1;
}
//全部序号"暗"下来
var lis = document.getElementsByTagName('li');
for(var j=0; j<lis.length; j++){
lis[j].style.background="green";
}
//当前序号背景色高亮显示
document.getElementById('xu'+i).style.background="yellow";
var pic_obj = document.getElementById('pic');
pic_obj.src=i+".jpg";
}
//加载事件函数，完成页面每次加载间歇函数的制作
var timer = "";
function jia(){
clearInterval(timer);
timer = setInterval('pic_change()', 1000);
}
//停止图片切换
function stop_pic(){
clearInterval(timer);
}
//鼠标移入序号发生变化的函数
//1显示当前序号对应图片
//2当前序号高亮
//3鼠标移出图片要继续切换
function xu_change(n){
//显示图片
document.getElementById('pic').src=n+".jpg";
//立即停止间隙函数
stop_pic();
//序号背景色发生变化
//全部序号"暗"下来
var lis = document.getElementsByTagName('li');
for(var j=0; j<lis.length; j++){
lis[j].style.background="green";
}
//当前序号背景色高亮显示
document.getElementById('xu'+n).style.background="yellow";
//让图片切换与当前序号一致 计数器与当前序号一致就可以
i=n;
}
</script>
第2个回答 2012-06-01
<style>
img{
filter: RevealTrans(Duration=3, Transition=20);
}
</style>
<script language="javascript">
window.onload=function(){
setTimeout("changettp(1)",3000);
}
function changettp(x){
x++;
if(x>5){x=1;}
document.getElementById("a1").filters[0].apply();
document.getElementById("a1").src="imges/0"+x+".jpg";
document.getElementById("a1").filters[0].play();
setTimeout("changettp("+x+")",3000);
}
</script
<body>
<img src="imges/01.jpg" width="200" height="200" id="a1"/>
</body>
img{
filter: RevealTrans(Duration=3, Transition=20);
}
</style>
<script language="javascript">
window.onload=function(){
setTimeout("changettp(1)",3000);
}
function changettp(x){
x++;
if(x>5){x=1;}
document.getElementById("a1").filters[0].apply();
document.getElementById("a1").src="imges/0"+x+".jpg";
document.getElementById("a1").filters[0].play();
setTimeout("changettp("+x+")",3000);
}
</script
<body>
<img src="imges/01.jpg" width="200" height="200" id="a1"/>
</body>
第3个回答 2012-04-06
试试这个图片切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码
参考资料：
本回答被提问者采纳第4个回答 2012-09-02
12345带有数字自动切换的焦点图代码，你不妨去 懒人之家 瞧瞧，里面代码比较齐全
