这个jquery特效总共有三种效果:
第一种为:顶部大图广告显示数秒后隐藏。也就说除非刷新,也就不再显示了。
第二种为:顶部大图广告显示数秒后隐藏。然后会出现一个重播的按钮。
第三种为:顶部大图广告显示数秒后隐藏。然后会显示一个小图。
有兴趣的可以仔细研究一下,demo只是其中一个小图的预览。像的显示时间等,图片大小都是可以自定义的。
<!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>顶部广告显示数秒后隐藏效果</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <!-- 第一种形式原广告显示数秒后隐藏 --> <!--<script type="text/javascript"> $(document).ready(function(){ $("#banner").slideDown("slow"); }) function displayimg(){ $("#banner").slideUp("slow"); } setTimeout("displayimg()",15000); </script>--> <!-- 第二种形式原广告显示数秒后大板块隐藏,显示用来重播的标签 --> <!--<script type="text/javascript"> $(document).ready(function(){ $("#banner").slideDown("slow"); $("#rightOpen").hide(); $("#rightOpen").click(function(){ $("#banner").slideDown("slow"); setTimeout("displayimg()",15000); $("#rightOpen").hide(); }) }) function displayimg(){ $("#banner").slideUp("slow"); $("#rightOpen").show(); } setTimeout("displayimg()",15000); </script>--> <!-- 第三种形式原广告显示数秒后隐藏,展示小图 --> <script type="text/javascript"> $(document).ready(function(){ $("#banner").slideDown("slow"); }) function displayimg(){ $("#banner").slideUp(1000,function(){ $("#top").slideDown(1000); }) } setTimeout("displayimg()",1000); </script> </head> <body> <!--<div id="rightOpen" style="width:25px; height:275px; position:absolute; right:0px; top:0px;">重播</div>--><!--此注释的div为应用第二种js时所需要的内容,若用到第二种样式,请解除div的注释。里面的“重播”按钮可以为文字,也可以为图片。www.tonjay.com注--> <div id="top" style="display:none;"><img src="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="02.jpg" width="980" height="60" /></div><!--若用到第一种样式和第二种样式,此div可以删除。www.tonjay.com注--> <div id="banner" style="width:980px; height:291px; display:none;"><img src="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="01.jpg" width="980" height="291" /></div> </body> </html>