网站首页没有一点动画怎么可以，我以前用过Flash As3做过图片切换，效果非常不错，可是麻烦，改变起来麻烦。一直都想自己做个图片切换效果，总认为比较麻烦，今天自己实践了一下，其实还比较简单。不过有个小问题，IE8不兼容模式下 设置有透明效果的div 样式添加失效了，但是我用谷歌，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" οnclick=" return picChange(8)" class="">8</a> <a href="images/pic7.jpg"title="7" οnclick=" return picChange(7)">7</a> <a href="images/pic6.jpg" title="6"οnclick=" return picChange(6)">6</a> <a href="images/pic5.jpg" title="5" οnclick=" return picChange(5)">5</a> <a href="images/pic4.jpg" title="4" οnclick=" return picChange(4)">4</a><a href="images/pic3.jpg" title="3" οnclick=" return picChange(3)">3</a> <a href="images/pic2.jpg"title="2" οnclick=" return picChange(2)">2</a> <a href="images/pic1.jpg" title="1"οnclick=" 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; }