<!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?type="text/javascript"?src="jquery-1.11.0.min.js"></script>
<script?type="text/javascript">
var?t=n=0,count;
$(document).ready(function()?{
???count=$("#banner_list?a").length;
???$("#banner_list?a:not(:first-child)").hide();
???$("#banner_info").html($("#banner_list?a:first-child").find("img").attr("alt"));
???$("#banner_info").click(function(){window.open($("#banner_list?a:first-child").atrr('href'),"_blank")});
???$("#banner?li").click(function()?{??vari?=?$(this).text()?-?1;//獲取Li元素的值，即1,2,3,4
????n=i;
if(i>=?count)?return;
????$("#banner_info").html($("#banner_list?a").eq(i).find("img").atrr("alt"));
("#banner_info").unbind().click(function(){window.open($("#banner_list?a").eq(i).attr('href'),?"_blank")});
$("#banner_list?a").filter(":visible").fadeOut(100).parent().children().eq(i).fadeIn(10);??
document.getElementById("banner").style.background="";?????????????
$(this).toggleClass("on");??????????????
$(this).siblings().removeAttr("class");?????????});??????????
t?=?setInterval("showAuto()",?50);??????????
$("#banner").hover(function(){clearInterval(t)},?function(){t?=?setInterval("showAuto()",?40);});?????})??????
function?showAuto()?????{??????????n?=?n?>=(count?-?1)???0?:?++n;??????????
$("#banner?li").eq(n).trigger('click');?????}?
????</script>
<style?type="text/css">
#banner{?position:relative;?width:490px;?height:280px;?border:1px?#ccc?solid;?overflow:hidden;}
#banner_list?img{?border:0px;}
#banner_bg{?position:absolute;?bottom:0px;?background-color:#000;?height:30px;?filter:Alpha(Opacity=30);
?opacity:0.3;?z-index:1000;?cursor:pointer;?width:470px;}
#banner_info{?position:absolute;?bottom:0px;?left:5px;?height:22px;?color:#fff;?z-index:1001;?
cursor:pointer;}
#banner_text{?position:absolute;?width:120px;?z-index:1002px;?right:3px;?bottom:3px;}
#banner?ul{?position:absolute;?list-style-type:none;?filter:Alpha(Opacity=80);?opacity:0.8;
border:1px?#fff?solid;?z-index:1002;?margin:0;?padding:0;?bottom:3px;?right:5px;}
#banner?ul?li{?padding:0px?8px;?float:left;?display:block;?color:#fff;?border:#e5eaff?1px?solid;?background:#6f4f67;?cursor:pointer;}
#banner?ul?li.on{?background:#900;}
#banner_list{?position:absolute;}
</style>
</head>
<body>
<div?id="banner">
????????????<div?id="banner_bg"></div><!--標題背景-->
????????????<div?id="banner_info"></div><!--標題-->
<ul>
<li?class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div?id="banner_list">
<a?target="_blank"><img?src="1.jpg"?title="momo"?alt="小樹"/></a>
<a?target="_blank"><img?src="2.jpg"?title="momo"?alt="小樹"/></a>
<a?target="_blank"><img?src="3.jpg"?title="momo"?alt="小樹"?/></a>
<a?target="_blank"><img?src="4.jpg"?title="momo"?alt="小樹"/></a>
</div>
</div>
</body>
</html>
自己制作的圖片輪播播放不了。求幫忙查看一下。以下是代碼。。。。
Dorisxin
2014-10-09 11:00:15