WordPress主题的jQuery应用之幻灯片效果

首先在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%;}

原文:http://www.happinesz.cn/archives/1015/

WordPress主题的jQuery应用之幻灯片效果》上有 1 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注