標籤：style class blog code java http
網站首頁沒有一點動畫怎麼可以，我以前用過Flash As3做過圖片切換，效果非常不錯，可是麻煩，改變起來麻煩。一直都想自己做個圖片轉場效果，總認為比較麻煩，今天自己實踐了一下，其實還比較簡單。不過有個小問題，IE8不相容模式下 設定有透明效果的div 樣式添加失效了，但是我用Google，IE8相容測試都ok。
反正是給自己記錄的，也不多話了，js沒有與頁面分離，也沒有做出外掛程式。一個網站要不了幾個這種效果，先實現了再說吧。最後的效果還是很高大上的。
：http://files.cnblogs.com/xiaoshuai1992/PicChange.zip
頁面+JS代碼
<script type="text/javascript"> var picCurrent = 1; var picTotal = 8; var interval; //自動運行 function picChange(current) { //停止當前動畫 if ($("#divImg").is(":animated")) { $("#divImg").stop(); } picCurrent = current; //為當前選擇的設定樣式 $("#divLink").find("a").removeClass("picselect") $("#divLink").find("a[title=‘" + picCurrent + "‘]").addClass("picselect"); //設定下面的圖片說明 var remark = "<a href=\"images/pic" + picCurrent + ".jpg\">"; switch (picCurrent) { case 1: remark += " 菊花〔拉丁學名：Dendranthema morifolium（Ramat. ）Tzvel.〕，常用chrysanthemum。菊花是菊科，菊屬多年生草本... "; break; default: remark += picCurrent + "測試說明"; break; } remark += "</a>"; $("#picremark").html(remark); //運行動畫 $("#divImg").animate({ left: -((picCurrent - 1) * 1000) + "px" }, "1000"); return false; } //暫不需使用 function PicPer() { if (picCurrent > 1) { picCurrent--; } else { picCurrent = picTotal; } picChange(picCurrent); } //下一張 function PicNext() { if (picCurrent == picTotal) { picCurrent = 1 } else { picCurrent++; } picChange(picCurrent); } //自動切換圖片 function PicRun(functionName) { picChange(1); interval = setInterval(PicNext, "3000"); } $(document).ready(function () { PicRun(); }); </script>
<!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> <title>圖片切換</title> <script src="jquery-1.8.0.js" type="text/javascript"></script> <link href="picchange.css" rel="stylesheet" type="text/css" /> </head><body> <div class="picMain"> <div class="picimg" id="divImg"> <img src="images/pic1.jpg" class="pic" /> <img src="images/pic2.jpg" class="pic" /> <img src="images/pic3.jpg" class="pic" /> <img src="images/pic4.jpg" class="pic" /> <img src="images/pic5.jpg" class="pic" /> <img src="images/pic6.jpg" class="pic" /> <img src="images/pic7.jpg" class="pic" /> <img src="images/pic8.jpg" class="pic" /> </div> <div class="picaction" id="divLink"> <a href="images/pic8.jpg" title="8" onclick=" return picChange(8)" class="">8</a> <a href="images/pic7.jpg" title="7" onclick=" return picChange(7)">7</a> <a href="images/pic6.jpg" title="6" onclick=" return picChange(6)">6</a> <a href="images/pic5.jpg" title="5" onclick=" return picChange(5)"> 5</a> <a href="images/pic4.jpg" title="4" onclick=" return picChange(4)">4</a> <a href="images/pic3.jpg" title="3" onclick=" return picChange(3)">3</a> <a href="images/pic2.jpg" title="2" onclick=" return picChange(2)">2</a> <a href="images/pic1.jpg" title="1" onclick=" return picChange(1)" class="">1</a> </div> <div id="picremark" class="picRemark"> 測試介紹檔案了啊</div> </div></body></html>
css的實現
.picMain{ margin: auto; overflow: hidden; width: 1000px; height: 400px; position: relative;}.picimg{ width: 10000px; height: 400px; background-color: #000000; position: absolute; top: 0px;}.picRemark{ position: absolute; width: 500px; height: 50px; bottom: 0px; left: 0px; color: #FFFFFF; text-indent: 2em;}.picRemark a{ color: #FFFFFF; text-decoration: none;}.picRemark a:hover{ text-decoration: underline;}.picaction{ position: absolute; width: 1000px; height: 50px; background-color: #000000; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; overflow: auto; bottom: 0px; left: 0px; text-align: right;}.picaction a{ border: 1px solid #C0C0C0; width: 30px; height: 30px; float: right; line-height: 30px; text-decoration: none; text-align: center; color: #FFFFFF; font-weight: bold; margin-top: 10px; display: block; margin-right: 10px;}.pic{ width: 1000px; height: 400px; float: left;}.picselect{ background-color: #919191;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
