網(wǎng)站首頁(yè)沒(méi)有一點(diǎn)動(dòng)畫(huà)怎么可以，我以前用過(guò)Flash As3做過(guò)圖片切換，效果非常不錯(cuò)，可是麻煩，改變起來(lái)麻煩。一直都想自己做個(gè)圖片切換效果，總認(rèn)為比較麻煩，今天自己實(shí)踐了一下，其實(shí)還比較簡(jiǎn)單。不過(guò)有個(gè)小問(wèn)題，IE8不兼容模式下 設(shè)置有透明效果的div 樣式添加失效了，但是我用谷歌，IE8兼容測(cè)試都o(jì)k。
反正是給自己記錄的，也不多話(huà)了，js沒(méi)有與頁(yè)面分離，也沒(méi)有做出插件。一個(gè)網(wǎng)站要不了幾個(gè)這種效果，先實(shí)現(xiàn)了再說(shuō)吧。最后的效果還是很高大上的。
頁(yè)面+JS代碼
復(fù)制代碼代碼如下:
<script type="text/javascript">
var picCurrent = 1;
var picTotal = 8;
var interval; //自動(dòng)運(yùn)行
function picChange(current) {
//停止當(dāng)前動(dòng)畫(huà)
if ($("#divImg").is(":animated")) { $("#divImg").stop(); }
picCurrent = current;
//為當(dāng)前選擇的設(shè)置樣式
$("#divLink").find("a").removeClass("picselect")
$("#divLink").find("a[title='" + picCurrent + "']").addClass("picselect");
//設(shè)置下面的圖片說(shuō)明
var remark = "<a href=/"images/pic" + picCurrent + ".jpg/">";
switch (picCurrent) {
case 1: remark += " 菊花〔拉丁學(xué)名：Dendranthema morifolium（Ramat. ）Tzvel.〕，常用chrysanthemum。菊花是菊科，菊屬多年生草本... "; break;
default: remark += picCurrent + "測(cè)試說(shuō)明"; break;
}
remark += "</a>";
$("#picremark").html(remark);
//運(yùn)行動(dòng)畫(huà)
$("#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);
}
//自動(dòng)切換圖片
function PicRun(functionName) {
picChange(1);
interval = setInterval(PicNext, "3000");
}
$(document).ready(function () {
PicRun();
});
</script>
復(fù)制代碼代碼如下:
<!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" style="border-left-color: rgb(0, 153, 204); border-left-width: 1px; border-left-style: solid; padding: 0px 3px; margin: 3px auto 0px; width: 640px; background-color: rgb(242, 246, 251); clear: both; border-top-color: rgb(0, 153, 204); border-top-width: 1px; border-top-style: solid; border-right-color: rgb(0, 153, 204); border-right-width: 1px; border-right-style: solid; color: rgb(0, 0, 0); font-family: Tahoma, Helvetica, Arial, 宋體, sans-serif;"> 復(fù)制代碼代碼如下:
.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;
}
