js练习8(幻灯片切换效果)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>幻灯片切换</title><style>.body{text-align:center;}li,ul{list-style:none;margin:0px;padding:0px;}#showPlay{text-align:left;width:890px;overflow:hidden;margin:0px auto;height:350px;position:relative;}#dopics{opacity: 0.4;background: none repeat scroll 0 0 #000;height: 10px;padding: 5px 10px;position: absolute;width:870px;text-align:right;clear:both;bottom:0px;}#dopics span{opacity: 0.4;background: none repeat scroll 0 0 #FFFFFF;cursor: pointer;display: inline-block;height: 10px;margin-left: 5px;width: 25px;text-align:center;color:#000;font-weight:bold;font-size:10px;height:10;line-height:10px;}</style></head><body><div id="showPlay"><div id="pics"><ul><li><a href=""><img src="slideimg_1.jpg" /></a></li><li><a href=""><img src="slideimg_2.jpg" /></a></li><li><a href=""><img src="slideimg_3.jpg" /></a></li><li><a href=""><img src="slideimg_4.jpg" /></a></li><li><a href=""><img src="slideimg_5.jpg" /></a></li><li><a href=""><img src="slideimg_6.jpg" /></a></li></ul></div><div id="dopics"></div></div><script>var time;var n=1;var ul=document.getElementById("pics").getElementsByTagName("ul")[0];//5秒钟进行交替图片
            time=setInterval("run()",5000);//显示图片function run(){++n;if(n>6){n=1;}ul.innerHTML="<li><a href=''><img src='slideimg_"+n+".jpg' /></a></li>";}//根据图片来生成对应的按钮function getBtn(){var liList=document.getElementById("pics").getElementsByTagName("li");var dopics=document.getElementById("dopics");var str="";for(var i=0;i<liList.length;i++){str+="<span>"+(i+1)+"</span>";}//alert(str);
                dopics.innerHTML=str;}getBtn();//鼠标移到按钮上时var spanList=document.getElementById("dopics").getElementsByTagName("span");for(var j=1;j<spanList.length+1;j++){spanList[j-1].onmouseover=function(){clearInterval(time);//这里的this.innerHTML不能使j因为循环完的j=7
                    ul.innerHTML="<li><a href=''><img src='slideimg_"+this.innerHTML+".jpg' /></a></li>";    time=setInterval("run()",9000);}}</script></body>
</html>

转载于:https://www.cnblogs.com/yuwensong/archive/2013/01/23/2873318.html

js练习8(幻灯片切换效果)相关推荐

php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
梦幻无穷的幻灯片切换效果
在播放演示文稿时,增加恰当的幻灯片切换效果可以让整个放映过程体现出一种连贯感,还能让观众集中精力观看.在PowerPoint 2010中,设置幻灯片切换效果将比以往更加简单和自由,让我们通过实际的操作 ...
（专升本）PowerPoint（设置幻灯片切换效果）
目录幻灯片切换效果分为? 操作 "计时"组幻灯片切换效果分为? #mermaid-svg-ebDqVHASnUPePLJI .label{font-family:'trebuc ...
Android移动应用开发之使用异步调用进度条及实现幻灯片切换效果
文章目录异步调用进度条实现幻灯片切换效果异步调用进度条核心代码如下: package scq.scq.asyntaskdemo;import androidx.appcompat.app.Ap ...
各种幻灯片切换效果。soChange
各种幻灯片切换效果.soChange 插件 http://www.sucaijiayuan.com/api/demo.php?url=/demo/20121218-5 转载于:https://ww ...
基于jQuery实现幻灯片切换效果
效果图功能:1.幻灯片自动切换:2.点击下方小圆点切换对应幻灯片:3.点击左右两侧耳朵控制幻灯片切换至上一张或下一张:4.鼠标悬停幻灯片上时,幻灯片停止切换 <!DOCTYPE html> ...
利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
js代码实现繁体字切换效果
下载地址使用js代码实现网页上的简体中文和繁体字的切换效果,很实用的繁体字切换插件. dd:
JS小案例-文本切换效果
下面是一个文本切换效果的小案例,希望可以可以帮助到有需要的小伙伴 <!DOCTYPE html> <html lang="en"><head>& ...

js练习8(幻灯片切换效果)

js练习8(幻灯片切换效果)相关推荐

最新文章

热门文章