Jquery 实现图片轮换
网站首页没有一点动画怎么可以，我以前用过FlashAs3做过图片切换，效果非常不错，可是麻烦，改变起来麻烦。一直都想自己做个图片切换效果，总认为比较麻烦，今天自己实践了一下，其实还比较简单。不过有个小问题，IE8不兼容模式下设置有透明效果的div样式添加失效了，但是我用谷歌，IE8兼容测试都ok。
反正是给自己记录的，也不多话了，js没有与页面分离，也没有做出插件。一个网站要不了几个这种效果，先实现了再说吧。最后的效果还是很高大上的。
页面+JS代码
<scripttype="text/javascript">
varpicCurrent=1;
varpicTotal=8;
varinterval;//自动运行
functionpicChange(current){
//停止当前动画
if($("#divImg").is(":animated")){$("#divImg").stop();}
picCurrent=current;
//为当前选择的设置样式
$("#divLink").find("a").removeClass("picselect")
$("#divLink").find("a[title='"+picCurrent+"']").addClass("picselect");
//设置下面的图片说明
varremark="<ahref=\"images/pic"+picCurrent+".jpg\">";
switch(picCurrent){
case1:remark+="菊花〔拉丁学名：Dendranthemamorifolium（Ramat.）Tzvel.〕，常用chrysanthemum。菊花是菊科，菊属多年生草本...";break;
default:remark+=picCurrent+"测试说明";break;
}
remark+="</a>";
$("#picremark").html(remark);
//运行动画
$("#divImg").animate({left:-((picCurrent-1)*1000)+"px"},"1000");
returnfalse;
}
//暂不需使用
functionPicPer(){
if(picCurrent>1){
picCurrent--;
}
else{
picCurrent=picTotal;
}
picChange(picCurrent);
}
//下一张
functionPicNext(){
if(picCurrent==picTotal){
picCurrent=1
}
else{
picCurrent++;
}
picChange(picCurrent);
}
//自动切换图片
functionPicRun(functionName){
picChange(1);
interval=setInterval(PicNext,"3000");
}
$(document).ready(function(){
PicRun();
});
</script>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片切换</title>
<scriptsrc="jquery-1.8.0.js"type="text/javascript"></script>
<linkhref="picchange.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<divclass="picMain">
<divclass="picimg"id="divImg">
<imgsrc="images/pic1.jpg"class="pic"/>
<imgsrc="images/pic2.jpg"class="pic"/>
<imgsrc="images/pic3.jpg"class="pic"/>
<imgsrc="images/pic4.jpg"class="pic"/>
<imgsrc="images/pic5.jpg"class="pic"/>
<imgsrc="images/pic6.jpg"class="pic"/>
<imgsrc="images/pic7.jpg"class="pic"/>
<imgsrc="images/pic8.jpg"class="pic"/>
</div>
<divclass="picaction"id="divLink">
<ahref="images/pic8.jpg"title="8"onclick="returnpicChange(8)"class="">8</a><ahref="images/pic7.jpg"title="7"onclick="returnpicChange(7)">7</a><ahref="images/pic6.jpg"title="6"
onclick="returnpicChange(6)">6</a><ahref="images/pic5.jpg"title="5"onclick="returnpicChange(5)">
5</a><ahref="images/pic4.jpg"title="4"onclick="returnpicChange(4)">4</a>
<ahref="images/pic3.jpg"title="3"onclick="returnpicChange(3)">3</a><ahref="images/pic2.jpg"
title="2"onclick="returnpicChange(2)">2</a><ahref="images/pic1.jpg"title="1"
onclick="returnpicChange(1)"class="">1</a>
</div>
<divid="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;
}
.picRemarka
{
color:#FFFFFF;
text-decoration:none;
}
.picRemarka: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;
}
.picactiona
{
border:1pxsolid#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;
}
以上就是本文的全部内容了，实现的功能很实用，希望大家能够喜欢。