Flash和JS实现的图片幻灯片切换特效具体讲解

发布网友发布时间：2022-04-25 14:57

共2个回答

懂视网时间：2022-05-15 18:16

本文详细的讲解了，js做切换图片的幻灯效果，对于js代码每行都有讲解哦！对于js不熟的同学有福利了，可以多看看！

代码：

<!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=utf-8"/>
 <title>JS切换图片幻灯切换效果</title>
 <style>
 body, p, ul, li { margin: 0; padding: 0; }
 ul { list-style-type: none; }
 body { background: #000; text-align: center; font: 12px/20px Arial; }
 #box { position: relative; width: 322px; height: 172px; background: #fff; border-radius: 5px; border: 8px solid #fff; margin: 10px auto; }
 #box .list { position: relative; width: 320px; height: 240px; overflow: hidden; border: 1px solid #ccc; }
 #box .list li { position: absolute; top: 0; left: 0; width: 320px; height: 240px; opacity: 0; filter: alpha(opacity=0); }
 #box .list li.current { opacity: 1; filter: alpha(opacity=100); }
 #box .count { position: absolute; right: 0; bottom: 5px; }
 #box .count li { color: #fff; float: left; width: 20px; height: 20px; cursor: pointer; margin-right: 5px; overflow: hidden; background: #F90; opacity: 0.7; filter: alpha(opacity=70); border-radius: 20px; }
 #box .count li.current { color: #fff; opacity: 1; filter: alpha(opacity=100); font-weight: 700; background: #f60; }
 #tmp { width: 100px; height: 100px; background: red; position: absolute; }
 </style>
 <script type="text/javascript">
 window.onload = function() {
  var oBox = document.getElementById("box");  var aUl = document.getElementsByTagName("ul");  var aImg = aUl[0].getElementsByTagName("li");  var aNum = aUl[1].getElementsByTagName("li");  var timer = play = null;  var i = index = 0;  var bOrder = true;  //切换按钮
  for(i = 0; i < aNum.length; i++) {
  aNum[i].index = i;
  aNum[i].onmouseover = function() {
   show(this.index)
  }
  }  //鼠标划过关闭定时器
  oBox.onmouseover = function() {
  clearInterval(play)
  };  //鼠标离开启动自动播放
  oBox.onmouseout = function() {
  autoPlay()
  };  //自动播放函数
  function autoPlay() {
  play = setInterval(function() {
   //判断播放顺序
   bOrder ? index++ : index--;   //正序
   index >= aImg.length && (index = aImg.length - 2, bOrder = false);   //倒序
   index <= 0 && (index = 0, bOrder = true);   //调用函数
   show(index)
  }, 2000);
  }

  autoPlay();//应用
  function show(a) {
  index = a;  var alpha = 0;  for(i = 0; i < aNum.length; i++)aNum[i].className = "";
  aNum[index].className = "current";
  clearInterval(timer);  for(i = 0; i < aImg.length; i++) {
   aImg[i].style.opacity = 0;
   aImg[i].style.filter = "alpha(opacity=0)";
  }
  timer = setInterval(function() {
   alpha += 2;
   alpha > 100 && (alpha = 100);
   aImg[index].style.opacity = alpha / 100;
   aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
   alpha == 100 && clearInterval(timer)
  }, 20);
  }
 }; </script></head><body><p id="box">
 <ul class="list">
 <li class="current"><img src="img/3.jpg" width="320" height="240"/></li>
 <li><img src="img/1.jpg" width="320" height="240"/></li>
 <li><img src="img/2.jpg" width="320" height="240"/></li>
 <li><img src="img/3.jpg" width="320" height="240"/></li>
 <li><img src="img/4.jpg" width="320" height="240"/></li>
 </ul>
 <ul class="count">
 <li class="current">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ul></p></body></html>

热心网友时间：2022-05-15 15:24

改这三个参数
imgUrl1="images/img/1.jpg";
imgtext1="web特效网"
imgLink1=escape("http://kayson_zhang.7ta.cn/");

imgUrl1 是图片地址
imgtext1 是图片显示文章
imgLink1 是图片显示连接 escape是一个函数我不知道是不是PHP里面的函数你直接把里面的http换成你要的就应该可以了，如果不可以那就应该是你的代码的问题或者escape函数是PHP里面的，而你没有用PHP

再给你两个网址把
http://www.rs100.cn/yu/
http://www.bushangban.cn/
右键--查看源文件--找到幻灯片显示代码就好了

还有一种可能你没有安装他里面调用的flash播放器
试试把http://www.eie052.com/images/img/focus.swf这个下载之后放入你的代码里面,这个问题其实很好解决的

参考资料：http://www.rs100.cn