部分代碼的用途我還不是很清楚
View Code
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <!-- 5 <link href="CSS/login.css" type=text/css rel=stylesheet></link> 6 --> 7 8 9 <title>歡迎您</title> 10 <style type="text/css"> 11 <!-- 12 body { 13 background-color:#CC0000; 14 background-image: url(Img/tou2.jpg); 15 16 } 17 .STYLE2 {font-size: large} 18 .STYLE16 {color: #dddddd} 19 .STYLE17 {color: #0000CC} 20 .STYLE18 {color: #330000} 21 .STYLE19 {color: #FF9933} 22 .STYLE20 {font-family: Arial, Helvetica, sans-serif} 23 .STYLE21 {color: #FFFFFF} 24 .STYLE22 {color: #FF0000} 25 --> 26 </style> 27 <style type="text/css"> 28 *{margin:0;padding:0;} 29 body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#990100;} 30 .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} 31 .clearfix{zoom:1;} 32 ul,li{list-style:none;} 33 img{border:0;} 34 .wrapper{width:800px;margin:0 auto;padding-bottom:50px;} 35 h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;} 36 /* focus */ 37 #focus{width:800px;height:280px;overflow:hidden;position:relative;} 38 #focus ul{height:380px;position:absolute;} 39 #focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#990100;} 40 #focus ul li div{position:absolute;overflow:hidden;} 41 #focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;} 42 #focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;} 43 #focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;} 44 #focus .btn span.on{background:#fff;} 45 #focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;} 46 #focus .pre{left:0;} 47 #focus .next{right:0;background-position:right top;} 48 </style> 49 <script type="text/javascript" src="JS/jquery-1.8.3.js"></script> 50 <script type="text/javascript"> 51 $(function() { 52 var sWidth = $("#focus").width(); //獲取焦點圖的寬度（顯示面積） 53 var len = $("#focus ul li").length; //獲取焦點圖個數 54 var index = 0; 55 var picTimer; 56 57 //以下代碼添加數字按鈕和按鈕后的半透明條，還有上一頁、下一頁兩個按鈕 58 var btn = "<div class='btnBg'></div><div class='btn'>"; 59 for(var i=0; i < len; i++) { 60 btn += "<span></span>"; 61 } 62 btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>"; 63 $("#focus").append(btn); 64 $("#focus .btnBg").css("opacity",0.5); 65 66 //為小按鈕添加鼠標滑入事件，以顯示相應的內容 67 $("#focus .btn span").css("opacity",0.4).mouseover(function() { 68 index = $("#focus .btn span").index(this); 69 showPics(index); 70 }).eq(0).trigger("mouseover"); 71 72 //上一頁、下一頁按鈕透明度處理 73 $("#focus .preNext").css("opacity",0.2).hover(function() { 74 $(this).stop(true,false).animate({"opacity":"0.5"},300); 75 },function() { 76 $(this).stop(true,false).animate({"opacity":"0.2"},300); 77 }); 78 79 //上一頁按鈕 80 $("#focus .pre").click(function() { 81 index -= 1; 82 if(index == -1) {index = len - 1;} 83 showPics(index); 84 }); 85 86 //下一頁按鈕 87 $("#focus .next").click(function() { 88 index += 1; 89 if(index == len) {index = 0;} 90 showPics(index); 91 }); 92 93 //本例為左右滾動，即所有li元素都是在同一排向左浮動，所以這里需要計算出外圍ul元素的寬度 94 $("#focus ul").css("width",sWidth * (len)); 95 96 //鼠標滑上焦點圖時停止自動播放，滑出時開始自動播放 97 $("#focus").hover(function() { 98 clearInterval(picTimer); 99 },function() { 100 picTimer = setInterval(function() { 101 showPics(index); 102 index++; 103 if(index == len) {index = 0;} 104 },4000); //此4000代表自動播放的間隔，單位：毫秒 105 }).trigger("mouseleave"); 106 107 //顯示圖片函數，根據接收的index值顯示相應的內容 108 function showPics(index) { //普通切換 109 var nowLeft = -index*sWidth; //根據index值計算ul元素的left值 110 $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通過animate()調整ul元素滾動到計算出的position 111 //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //為當前的按鈕切換到選中的效果 112 $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //為當前的按鈕切換到選中的效果 113 } 114 }); 115 116 </script> 117 </head> 118 119 <body onload="zidong.click()" background="Img/bg1.jpg"> 120 <div align="center"><span class="STYLE22"> 121 </span><br/> 122 <img src="Img/bg1.jpg" /> 123 <br/><br/> 124 <table width="60%" border="0" align="center"> 125 <tr> 126 <td width="15%"><div align="center" class="STYLE16"><a href="login.html" class="STYLE21"><span class="STYLE2">aa</span></a></div></td> 127 <td width="15%"><div align="center" class="STYLE16"><a href="buy_introductions.html" class="STYLE21"><span class="STYLE2">bb</span></a></div></td> 128 <td width="15%"><div align="center" class="STYLE18"><a href="lottery_rules.html" class="STYLE21"><span class="STYLE2">cc</span></a></div></td> 129 <td width="15%"><div align="center" class="STYLE17"><a href="login.jsp" class="STYLE21" ><span class="STYLE2">dd</span></a></div></td> 130 <td width="15%"><div align="center" class="STYLE17"><a href="regist.jsp" class="STYLE21"><span class="STYLE2">ee</span></a></div></td> 131 <td width="15%"><div align="center" class="STYLE19"><a href="superuser.jsp" class="STYLE21"><span class="STYLE2">ff</span></a></div></td> 132 </table> 133 <br/> 134 <div class="wrapper"> 135 <div id="focus"> 136 <ul> 137 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_1.jpg" alt="QQ商城焦點圖效果下載" /></a></li> 138 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_2.jpg" alt="QQ商城焦點圖效果教程" /></a></li> 139 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_3.jpg" alt="jquery商城焦點圖效果" /></a></li> 140 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_4.jpg" alt="jquery商城焦點圖代碼" /></a></li> 141 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_5.jpg" alt="jquery商城焦點圖源碼" /></a></li> 142 </ul> 143 </div> 144 </div> 145 <br/> 146 <div align="center"><strong>XXX@版權所有@2013</strong></div> 147 </body> 148 </html>