js动画——图片轮播

最新推荐文章于 2025-06-06 13:52:24 发布

原创最新推荐文章于 2025-06-06 13:52:24 发布 · 2.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#function #transition #div #javascript #搜索引擎

本文介绍了一种使用JavaScript实现的图片轮播动画效果。该方案不仅对搜索引擎友好，还便于美工人员操作，通过简单的代码即可实现动画内容的更换。文章提供了完整的HTML、CSS和JavaScript代码示例。

js动画——图片轮播

1.对搜索引擎友好
2.对美工友好，因为数据和代码是分开的，完全不懂js的都可以用fontpage修改动画内容

可以把js代码保存为一个文件然后<script src="1.js"></script>,然后无须修改代码一个字母
就可以在多个页面中实现动画了

<div id="g_div" style="width:270px;height:252px"><a
href="#" target=_blank><img
id="g_img" style="FILTER:revealTrans(duration=1,transition=23);width:266px;height:220px;border:1px green solid" src=" http://zi.csdn.net/xian.gif ">
</a><a
href=" http://www.baidu.com/ " for=" http://zi.csdn.net/xian.gif " target="_blank">1.CSDN程序员</a><a
href=" http://www.126.com/ " for=" http://zi.csdn.net/microsoft280_187.jpg " target="_blank">2.CSDN程序员</a><a
href=" http://mp3.baidu.com/ " for=" http://zi.csdn.net/live.gif " target="_blank">3.CSDN程序员</a><a
href=" http://post.baidu.com/ " for=" http://zi.csdn.net/new-mba.gif " target="_blank">4.CSDN程序员</a><a
href=" http://top.baidu.com/ " for=" http://zi.csdn.net/book.jpg " target="_blank">5.CSDN程序员</a>
</div>

for(var i=1;i<arr_length;i++){
g_items.push({txt:arr[i].innerHTML,
url:arr[i].href ,
target:arr[i].target,
img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()})
arr[i].title=arr[i].innerHTML
arr[i].innerHTML=[i," "].join("")
arr[i].className="b"
arr[i].onclick=function(){
event.returnValue=false;
show_img(event.srcElement.innerText)
}
}
show_img(1)
var t=window.setInterval(show_img,g_sec*1000)
g_img.onmouseover=function(){window.clearInterval(t)}
g_img.onmouseout=function(){t=window.setInterval(show_img,g_sec*1000)}
}

window.attachEvent("onload",f)
</script>