这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
今日发现 qq 的图片轮换效果代码不错,兼容多浏览器,测试了 ie 和 firefox 效果不错
[Ctrl+A 全选 注:
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- js图片轮换效果代码_phperz
- </title>
- </head>
- <body>
- <table class=bdc6 height=359 cellspacing=0 cellpadding=0 width="100%"
- border=0>
- <tbody>
- <tr>
- <td valign=top>
- <table height=6 cellspacing=0 cellpadding=0 width="100%" border=0>
- <tbody>
- <tr>
- <td>
- </td>
- </tr>
- </tbody>
- </table>
- <table height=170 cellspacing=0 cellpadding=0 width=150 align=center border=0>
- <tbody>
- <tr>
- <td valign=top height=170>
- <div>
- <div>
- <img height=170 src="http://img.phperz.com/data/img/20170322_11/1490193525_7073.jpg"
- width=150>
- </div>
- <div>
- <img height=170 src="http://img.phperz.com/data/img/20170322_13/1490193526_1298.jpg"
- width=150>
- </div>
- <div>
- <img height=170 src="http://img.phperz.com/data/img/20170322_4/1490193527_5126.jpg"
- width=150>
- </div>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- <table height=24 cellspacing=0 cellpadding=0 width=150 align=center border=0>
- <tbody>
- <tr>
- <td class=f14 id=info width=227>
- <div>
- 22吨重挖掘机
- </div>
- <div>
- 中星九号直播
- </div>
- <div>
- 考后表情
- </div>
- </td>
- <td width=59>
- <table id=simg cellspacing=0 cellpadding=2 width="100%" align=right border=0>
- <tbody>
- <tr align=middle>
- <td class=s>
- 1
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody>
- </table>
- <script>
- function $(v) {
- return document.getElementById(v)
- }
- var img = $("bimg").getElementsByTagName("div");
- var td = $("simg").getElementsByTagName("td");
- var text = $("info").getElementsByTagName("div");
- var now = 1;
- var count = 3; //设置数量
- var def = 0; //默认显示
- var speed = 1000; //10秒
- //initialize
- for (var i = 0; i < count; i++) {
- //td
- td[i].name = i;
- td[i].className = "";
- td[i].onclick = function() {
- changeBar(this.name)
- }
- td[i].onmouseover = function() {
- clearAuto()
- }
- td[i].onmouseout = function() {
- setAuto()
- }
- //img
- img[i].style.display = "none";
- img[i].onmouseover = function() {
- clearAuto()
- }
- img[i].onmouseout = function() {
- setAuto()
- }
- //text
- text[i].style.display = "none";
- text[i].onmouseover = function() {
- clearAuto()
- }
- text[i].onmouseout = function() {
- setAuto()
- }
- }
- //set default
- td[def].className = "s";
- img[def].style.display = "block";
- text[def].style.display = "block";
- function setClass(v) {
- for (var i = 0; i < count; i++) td[i].className = "";
- td[v].className = "s";
- }
- function setImg(v) {
- try {
- with(bimg) {
- filters[0].Apply();
- for (var i = 0; i < count; i++) {
- img[i].style.display = "none";
- text[i].style.display = "none";
- }
- img[v].style.display = "block";
- text[v].style.display = "block";
- filters[0].play();
- }
- } catch(e) {
- for (var i = 0; i < count; i++) {
- img[i].style.display = "none";
- text[i].style.display = "none";
- }
- img[v].style.display = "block";
- text[v].style.display = "block";
- }
- }
- //contorl changed
- function changeBar(v) {
- setClass(v);
- setImg(v);
- now = v + 1;
- }
- //set Auto
- var auto = '';
- function setChange() {
- if (now < count) {
- changeBar(now);
- } else {
- now = 0;
- changeBar(now);
- }
- }
- function setAuto() {
- auto = setInterval("setChange()", speed)
- }
- function clearAuto() {
- clearInterval(auto)
- }
- setAuto();
- </script>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0423/288174.html