带图片文字的幻灯片效果
完成效果图如下：
<!DOCTYPE html PUBdivC "-//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 runat="server">
<title>幻灯片带文字切换</title>
<style type="text/css">
ul,ol{divst-style:none}
*{ padding: 0; margin: 0; }
a{ color:#333; text-decoration:none;}
img{border:0; display:block;}
body a{outdivne:none; blr:expression(this.onFocus=this.blur());}
#slide{height:361px; margin:20px auto; overflow:hidden; position: relative; width:980px;}
#slide .list{height:361px;position:absolute;}
#slide .list .item{float:left;width:980px;height:361px;overflow:hidden;position:relative;background:#000;}
#slide .list .item .bj{height:361px; position:absolute; width:980px; z-index:1;}
#slide .list .item .bj img{ height:361px; width:980px;}
#slide .list .item .img{height:361px; left:0; position:absolute; width:490px; z-index:50;}
#slide .list .item .img img{ height:361px; width:490px;}
#slide .list .item .txt{ height:300px; position:absolute; left:490px; top:50px; width:355px; z-index:5000;}
#slide .list .item .txt a{ display:block; height:300px; top:0; position:absolute; width:355px;}
#slide .list .item .txt p{ line-height:24px;}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var sWidth = $("#slide").width(); //获取焦点图的宽度（显示面积）
var len = $("#slide .list .item").length; //获取焦点图个数
var index = 0;
var picTimer;
$("#slide .list").css("width", sWidth * (len));
$("#slide").hover(function () {
clearInterval(picTimer);
}, function () {
picTimer = setInterval(function () {
showPics(index);
index++;
if (index == len) { index = 0; }
}, 4000);
}).trigger("mouseleave");
function showPics(index) {
var nowLeft = -index * sWidth;
$("#slide .list").stop(true, false).animate({ "left": nowLeft }, 300);
}
})
</script>
</head>
<body>
<form id="forWed" runat="server">
<div id="slide">
<div class="list">
<div class="item">
<div class="bj"><a href="javascript:;" title=""><img src="Images/20130225001.jpg" alt="" /></a></div>
<div class="img" style="_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='Images/20130226001.png',sizingMethod='image');"><a href="javascript:;" title=""><!--[if !IE 6]><!--><img src="Images/20130226001.png" alt="" /><!--<![endif]--></a></div>
<div class="txt"><h1>把QQ号码印上信用卡</h1><p>QQ会员网购刷卡享受积分3倍计算，生日所在月所有交易积分最高5倍计算。QQ会员用户关联之后即可享受此特权。</p><a href="javascript:;" title=""></a></div>
</div>
<div class="item">
<div class="bj"><a href="javascript:;" title=""><img src="Images/20130225002.jpg" alt="" /></a></div>
<div class="img" style="_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='Images/20130226002.png',sizingMethod='image');"><a href="javascript:;" title=""><!--[if !IE 6]><!--><img src="Images/20130226002.png" alt="" /><!--<![endif]--></a></div>
<div class="txt"><h1>铜雀台</h1><p>QQ会员网购刷卡享受积分3倍计算，生日所在月所有交易积分最高5倍计算。QQ会员用户关联之后即可享受此特权。</p><a href="javascript:;" title=""></a></div>
</div>
<div class="item">
<div class="bj"><a href="javascript:;" title=""><img src="Images/20130225003.jpg" alt="" /></a></div>
<div class="img" style="_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='Images/20130226003.png',sizingMethod='image');"><a href="javascript:;" title=""><!--[if !IE 6]><!--><img src="Images/20130226003.png" alt="" /><!--<![endif]--></a></div>
<div class="txt"><h1>加好友，抽大奖</h1><p>QQ会员网购刷卡享受积分3倍计算，生日所在月所有交易积分最高5倍计算。QQ会员用户关联之后即可享受此特权。</p><a href="javascript:;" title=""></a></div>
</div>
<div class="item">
<div class="bj"><a href="javascript:;" title=""><img src="Images/20130225004.jpg" alt="" /></a></div>
<div class="img" style="_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='Images/20130226004.png',sizingMethod='image');"><a href="javascript:;" title=""><!--[if !IE 6]><!--><img src="Images/20130226004.png" alt="" /><!--<![endif]--></a></div>
<div class="txt"><h1>给遇见一个理由</h1><p>QQ会员网购刷卡享受积分3倍计算，生日所在月所有交易积分最高5倍计算。QQ会员用户关联之后即可享受此特权。</p><a href="javascript:;" title=""></a></div>
</div>
</div>
</div>
</form>
</body>
</html>
注意：这只是本人书写的，但是还是有一点小小的问题，那就是在IE6中，滤镜效果下的图片是没办法做链接的。还请多多指教。
浙公网安备 33010602011771号