Javascript幻灯片 – 筚路蓝缕

&lt;style&gt;#g_div {
	text-align:right;
	overflow:hidden
}
.b {
	width:24px;
	height:16px;
	background:#737373;
	font-size:14px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	margin-left:1px
}
.b:hover {
	width:24px;
	height:16px;
	background:#780001;
	font-size:14px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	margin-left:1px
}
.bhover {
	width:24px;
	height:16px;
	background:#780001;
	font-size:14px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	margin-left: 1px
}
&lt;/style&gt;
&lt;div id="g_div" style="width:270px;height:252px"&gt;
	&lt;a href="#" target='_blank'&gt;
	&lt;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"&gt;&lt;/a&gt;
	&lt;a href="http://www.baidu.com/" for="http://zi.csdn.net/xian.gif" target="_blank"&gt;1.CSDN程序员&lt;/a&gt;
	&lt;a href="http://www.126.com/" for="http://zi.csdn.net/microsoft280_187.jpg" target="_blank"&gt;2.CSDN程序员&lt;/a&gt;
	&lt;a href="http://mp3.baidu.com/" for="http://zi.csdn.net/live.gif" target="_blank"&gt;3.CSDN程序员&lt;/a&gt;
	&lt;a href="http://post.baidu.com/" for="http://zi.csdn.net/new-mba.gif" target="_blank"&gt;4.CSDN程序员&lt;/a&gt;
	&lt;a href="http://top.baidu.com/" for="http://zi.csdn.net/book.jpg" target="_blank"&gt;5.CSDN程序员&lt;/a&gt;
&lt;/div&gt;
&lt;script language="JavaScript"&gt;
  function f() {
      var g_sec = 3;
      //几秒后切换图片  
      var g_items = new Array();
      var g_div = document.getElementById("g_div");
      var g_img = document.getElementById("g_img");
      var g_imglink = g_img.parentElement;
      var arr = g_div.getElementsByTagName("A");
      var arr_length = arr.length;
      var g_index = 1;
      var show_img = function(n) {
              if (/d+/.test(n)) {
              var prev = g_index + 1;g_index = n - 1
              } else {
                  var prev = (g_index &gt; arr.length) ? (arr_length - 1) : g_index + 1;
				  g_index = (g_index &lt; arr_length - 2) ? (++g_index) : 0
              }
              if (document.all) {
                  g_img.filters.revealTrans.Transition = 23;
                  g_img.filters.revealTrans.apply();
                  g_img.filters.revealTrans.play();
              }
              arr[prev].className = "b";
              arr[g_index + 1].className = "bhover";
              g_img.src = g_items[g_index].img.src;
			  g_img.title = g_items[g_index].txt;
			  g_imglink.href = g_items[g_index].url;
			  g_imglink.target = g_items[g_index].target;
          }
      for (var i = 1; i &lt; 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);
&lt;/script&gt;

100

101

102

103

104

<style>#g_div {

text-align:right;

overflow:hidden

}

.b {

width:24px;

height:16px;

background:#737373;

font-size:14px;

font-weight:bold;

color:#fff;

text-decoration:none;

margin-left:1px

}

.b:hover {

width:24px;

height:16px;

background:#780001;

font-size:14px;

font-weight:bold;

color:#fff;

text-decoration:none;

margin-left:1px

}

.bhover {

width:24px;

height:16px;

background:#780001;

font-size:14px;

font-weight:bold;

color:#fff;

text-decoration:none;

margin-left: 1px

}

</style>

<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>

function f() {

var g_sec = 3;

//几秒后切换图片

var g_items = new Array();

var g_div = document.getElementById("g_div");

var g_img = document.getElementById("g_img");

var g_imglink = g_img.parentElement;

var arr = g_div.getElementsByTagName("A");

var arr_length = arr.length;

var g_index = 1;

var show_img = function(n) {

if (/d+/.test(n)) {

var prev = g_index + 1;g_index = n - 1

} else {

var prev = (g_index > arr.length) ? (arr_length - 1) : g_index + 1;

g_index = (g_index < arr_length - 2) ? (++g_index) : 0

}

if (document.all) {

g_img.filters.revealTrans.Transition = 23;

g_img.filters.revealTrans.apply();

g_img.filters.revealTrans.play();

}

arr[prev].className = "b";

arr[g_index + 1].className = "bhover";

g_img.src = g_items[g_index].img.src;

g_img.title = g_items[g_index].txt;

g_imglink.href = g_items[g_index].url;

g_imglink.target = g_items[g_index].target;

}

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>

一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

发表回复 取消回复

相关文章

发表回复取消回复