当前位置导航:炫浪网>>网络学院>>网页制作>>ASP.NET教程

利用脚本做的图片来回滑动

  前台代码:

  <div id="soutu">

  <div id="zhuan">这里只是放一张图片而已

  <img alt="" src="../Images/a.jpg?http://www.xvna.com" width="750" height="330" />

  </div>

  </div>

  <div id="tuzi">这里调用脚本函数

  <a href="#" onmousemove="showLink(1)" class="aTaohang">1</a>

  <a href="#" onmousemove="showLink(2)"class="aTaohang">2</a>

  <a href="#" onmousemove="showLink(3)" class="aTaohang">3</a>

  <a href="#" onmousemove="showLink(4)" class="aTaohang">4</a>

  </div>

  脚本:这里可我做成一个JS文件,放在前台调用,这样就方便点。

  var time = window.setInterval("luen()", 5000);

  function showLink(num) {

  window.clearTimeout(time);

  if (num == 1) {

  document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1342.jpg?http://www.xvna.com' width='750' height='330' /></div>"

  }

  if (num == 2) {

  document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1370.jpg?http://www.xvna.com' width='750' height='330'/></div>"

  }

  if (num == 3) {

  document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1452.jpg?http://www.xvna.com' width='750' height='330'/></div>"

  }

  if (num == 4) {

  document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1448.jpg?http://www.xvna.com' width='750' height='330'/></div>"

  }

  }

  function out() {

  time = window.setInterval("luen()", 5000);

  }

  var tmp = 0;

  function luen() {

  tmp++;

  if (tmp == 1) {

  document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1342.jpg?http://www.xvna.com' width='750' height='330'/></div>"

  }

  else if (tmp == 2) {

  document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1370.jpg?http://www.xvna.com' width='750' height='330'/></div>"

  }

  else if (tmp == 3) {

  document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1452.jpg?http://www.xvna.com' width='750' height='330'/></div>"

  }

  else if (tmp == 4) {

  document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1448.jpg?http://www.xvna.com' width='750' height='330'/></div>"

  }

  else {

  tmp = 0;

  }

  }

  function showbuy(divId) {

  document.getElementById(divId).style.display = "block";

  }

  function disbuy(divId){

  document.getElementById(divId).style.display = "none";

  }

  样式:

  .aTaohang

  {

  display: block;

  float: left;

  font-size: 15px;

  font-weight: 600;

  color: White;

  background-color: Gray;

  width: 173px;

  height: 20px;

  text-align: center;

  margin: 1px;

  text-decoration: none;

  }

  .aTaohang:hover

  {

  color: Gray;

  background-color: White;

  }

相关内容
赞助商链接