首先在header.php的head标签中加载jQuery库
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> |
新建一个JS文件，在header.php的head标签中加载，JS文件中加入下例代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 | function slideSwitch() { var $current = $("#slideshow div.current"); if ( $current.length == 0 ) $current = $("#slideshow div:last"); var $next = $current.next().length ? $current.next() : $("#slideshow div:first"); $current.addClass('prev'); $next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() { $current.removeClass("current prev"); }); } $(function() { $("#slideshow span").css("opacity","0.7"); $(".current").css("opacity","1.0"); setInterval( "slideSwitch()", 3000 ); }); |
HTML代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div ID="slideshow"> <div class="current"> <a href="http://www.koryi.net/"><img src="1.jpg" alt="" /></a> <span>The First Image</span> </div> <div> <a href="http://www.koryi.net/"><img src="2.jpg" alt="" /></a> <span>The Second Image</span> </div> <div> <a href="http://www.koryi.net/"><img src="3.jpg" alt="" /></a> <span>Yes, thd third.</span> </div> </div> |
添加CSS代码如下：
1 2 3 4 5 6 | #slideshow{position:relative;height:195px;width:425px;border:10px solid #ddd;margin:0 auto 15px;} #slideshow div{position:absolute;top:0;left:0;z-index:3;opacity:0.0;height:195px;overflow:hidden;background-color:#FFF;} #slideshow div.current{z-index:5;} #slideshow div.prev{z-index:4;} #slideshow div img{display:block;border:0;margin-bottom:10px;} #slideshow div span{display:none;position:absolute;bottom:0;left:0;height:50px;line-height:50px;background:#000;color:#fff;width:100%;} |