javascript实现内容播放幻灯片效果
以后要做这效果就直接复制了,呵呵
<!-- css样式 -->
<style type="text/css">
#btn span{
font-size:15px;
height:15px;
width:15px;
background-color:#00ff00;
border:1px solid #0066FF;
text-align:center;
margin-right:1px;
float:left;
cursor:pointer;
}
#btn span.hov{
background-color: #0099FF;
}
p{
border:#336666 solid 1px;
}
</style>
<div id="wai" style="cursor:pointer; margin:0px; height:88px; width:650px; overflow:hidden; position:relative;" onmouseover="clearAuto()" onmouseout="setAuto()">
<div id="image1" style="position:relative;top:0px; left:0px; height:88px; width:650px;">
<p style="background-color:#66CC00;display:block; width:650px; height:88px;" alt="22">222222222222222
<p style="background-color:#66FF66;display:block; width:650px; height:88px;" alt="44">444444444444444
555555555555555
</div>
<!-- 幻灯片切换按钮-->
<div id="btn" style="position:absolute; bottom:0px; right:0px; width:96px; ">
<span class="hov" onmouseover="set(0)"><font size="2">1</font></span>
<span onmouseover="set(1)"><font size="2">2</font></span>
<span onmouseover="set(2)"><font size="2">3</font></span>
<span onmouseover="set(3)"><font size="2">4</font></span>
<span onmouseover="set(4)"><font size="2">5</font></span>
</div>
</div>
<!-- javascript-->
<script type="text/javascript">
var n = 0;
var banner = false;
var numlist = document.getElementById("btn").getElementsByTagName("span");
var imglist = document.getElementById("image1").getElementsByTagName("p");
function set(value){
//alert("value = "+value);
n=value;
document.getElementById("image1").style.filter="revealtrans(duration=2,transition="+Math.random()*24+")"; //自动生成滤镜效果(切换内容)
for(var i=0;i<5;i++){
i==value?numlist[i].className="hov":numlist[i].className=" ";//设置数字的css样式
}
try{
with(image1){//火狐不支持滤镜效果,借用with来区分IE和火狐,火狐将用catc里的方式显示
filters[0].apply();//以下为设置图片的
for(i=0;i<5;i++) i==value?imglist[i].style.display="block":imglist[i].style.display="none";
document.getElementById("image1").filters[0].play();
}
}catch(e){
for(i=0;i<5;i++) i==value?imglist[i].style.display="block":imglist[i].style.display="none";
}
}
//自动播放幻灯片
function auto(){
n++;
if(n>=5) n=0;
set(n);
}
function clearAuto(){clearInterval(banner);}
function setAuto(){clearInterval(banner);banner=setInterval("auto()",4000)};
setAuto();
</script>
分享到:
相关推荐
原生的javascript脚本代码,实现幻灯片分页点击效果
利用js来实现图片的幻灯片效果显示,这是从我的课本上找来的 有图片有代码,货真价实 欢迎大家下载 记得评论哦
JavaScript 实现网页图片幻灯片效果
JavaScript实现的可自定义的幻灯片和图片缓冲效果
首先真的非常感谢世界上有了CSS3这么个东西,它使得很多网页特效不再需要依赖javascript脚本代码,使得浏览器执行起来更加方便快捷。但有一点我们得注意,因为目前绝大多数浏览器还是比较“旧”的版本,还不支持CSS3...
3D幻灯片,采用Flash+Js制作出3D超炫幻灯广告效果,值得收藏
Js 实现的幻灯片效果 兼容 IE FF
代码通俗易懂,使用js框架jquery实现可重用的幻灯片效果
本文实例讲述了javascript实现淘宝幻灯片广告展示效果的方法。分享给大家供大家参考。具体如下: 一、效果图如下: 二、代码部分: JS代码部分: function getClass(oParent,name){ var arr=[]; var oBj=oParent...
jquery实现带缩略图的幻灯片效果,非常好实用,改改就能使用。。
bespoke-fx是一款类似PPT演示稿效果的JavaScript幻灯片插件。该幻灯片可以使用键盘的左右方向键来前后切换,它内置了23种CSS3动画过渡效果,非常实用。
javascript实现的键盘切换PPT幻灯片演示稿效果源码(结合Bespoke.js插件).zip
主要介绍了用HTMl与JavaScript的技术相结合,实现图片简单的“幻灯片”的显示效果
网页模板——javascript实现的键盘切换PPT幻灯片演示稿效果源码(结合Bespoke.js插件)
Javascript和CSS3实现的翻书效果幻灯片3D切换特效源码是一段实现了具有翻书效果的3D切换幻灯片效果代码,本段代码适应于所有网页使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一...
主要介绍了CSS3+JavaScript实现翻页幻灯片效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
这是一个用JavaScript实现的幻灯片效果源代码,希望对大家有帮助