Jquery 实现grid绑定模板
网站首页没有一点动画怎么可以,我以前用过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; }