Jquery 实现grid绑定模板

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

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

页面+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=https://www.jb51.net/article/\"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>

复制代码 代码如下: