JS切换图片幻灯切换效果

来源：动视网责编：小采时间：2020-11-27 20:10:47

JS切换图片幻灯切换效果

JS切换图片幻灯切换效果:本文详细的讲解了，js做切换图片的幻灯效果，对于js代码每行都有讲解哦！对于js不熟的同学有福利了，可以多看看！代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

推荐度：

点击下载本文 文档为doc格式

导读JS切换图片幻灯切换效果:本文详细的讲解了，js做切换图片的幻灯效果，对于js代码每行都有讲解哦！对于js不熟的同学有福利了，可以多看看！代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

本文详细的讲解了，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>

JS切换图片幻灯切换效果

推荐度：

点击下载本文 文档为doc格式

标签：图片切换 js

热门焦点

JS切换图片幻灯切换效果

JS切换图片幻灯切换效果

JS切换图片幻灯切换效果

最新推荐

猜你喜欢

热门推荐