Jquery 实现图片轮换

网站首页没有一点动画怎么可以,我以前用过Flash As3做过图片切换,效果非常不错,可是麻烦,改变起来麻烦。一直都想自己做个图片切换效果,总认为比较麻烦,今天自己实践了一下,其实还比较简单。不过有个小问题,IE8不兼容模式下 设置有透明效果的div 样式添加失效了,但是我用谷歌,IE8兼容测试都ok。

反正是给自己记录的,也不多话了,js没有与页面分离,也没有做出插件。一个网站要不了几个这种效果,先实现了再说吧。最后的效果还是很高大上的。

页面+JS代码

代码如下:
自动运行 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 = " 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(); });

<div class="codetitle"><a style="CURSOR: pointer" data="96981" class="copybut" id="copybut96981" onclick="doCopy('code96981')"> 代码如下:

<div class="codebody" id="code96981">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="<a href="http://www.w3.org/1999/xhtml"&gt;http://www.w3.org/1999/xhtml">

<a href="https://www.f2er.com/tag/tupian/" target="_blank" class="keywords">图片</a>切换