html：

<div class="indexSlide1">
    <div class="left-btn"><em class="ico-index"></em></div>
    <div class="right-btn"><em class="ico-index"></em></div>
    <ul>
        <li><a href="#"><img src="images/index1114/banner1.jpg"></a></li>
        <li><a href="#"><img src="images/index1114/banner2.jpg"></a></li>
        <li><a href="#"><img src="images/index1114/banner3.jpg"></a></li>
        <li><a href="#"><img src="images/index1114/banner4.jpg"></a></li>
        <li><a href="#"><img src="images/index1114/banner5.jpg"></a></li>
        <li><a href="#"><img src="images/index1114/banner3.jpg"></a></li>
    </ul>
    <dl>
        <dd class="active ico-index">1</dd>
        <dd class="ico-index">2</dd>
        <dd class="ico-index">3</dd>
        <dd class="ico-index">4</dd>
        <dd class="ico-index">5</dd>
        <dd class="ico-index">6</dd>
    </dl>
    <div class="clear"></div>
</div>

js 调用：

  //*轮播 author:水晶草 *//
　　　　new slider('indexSlide1');

Js内容：

/*轮播*/

var slider = (function () {
    var banner = function (bannerIndex) {
        this.bannerIndex = $("." + bannerIndex);
        this.init();
    };
    banner.prototype = {
        init: function () {
            this.bannerLi();
            this.bannerAnimate();
            this.boundEvent();
            this.leftRightBtn();
        },
        bannerLi: function () {
            var that = this;
            var length = this.bannerIndex.find("li").length;
            if (length < 2) {
                this.bannerIndex.find("dl").remove();
                return;
            }

            this.bannerIndex.find("li").hide();
            this.bannerIndex.find("li").first().show();

            this.bannerIndex.find("dd").click(function () {
                clearInterval(that.timer);
                if (!that.bannerIndex.find("li").is(":animated")) {
                    var index = $(this).index();
                    that.bannerIndex.find("dd").removeClass("active");
                    $(this).addClass("active");
                    that.bannerIndex.find("li").fadeOut();
                    that.bannerIndex.find("li").eq(index).fadeIn();
                }
            })

        },
        bannerAnimate: function () {
            var that = this;
            var length = this.bannerIndex.find("li").length;
            if (length < 2) {
                return;
            }
            that.timer = setInterval(function () {
                clearInterval(that.timer);
                if (!that.bannerIndex.find("li").is(":animated")) {
                    var index1 = that.bannerIndex.find("dd.active").index();
                    var length = that.bannerIndex.find("dd").length - 1;

                    if (index1 == length) {
                        index1 = -1;
                    }
                    index1++;
                    that.ctrlChange(index1);
                }
            }, 5000);
        },
        boundEvent: function () {
            var that = this;
            this.bannerIndex.hover(function () {
                clearInterval(that.timer);
                that.timer = 0;
            }, function () {
                that.bannerAnimate();
            });

        },
        leftRightBtn: function () {
            var that = this;
            /*点击左右按钮触发上面的事件*/

            that.bannerIndex.find(".left-btn,.right-btn").hide();
            that.bannerIndex.hover(function()
            {
                that.bannerIndex.find(".left-btn,.right-btn").show();
            },function()
            {
                that.bannerIndex.find(".left-btn,.right-btn").hide();

            })
            that.bannerIndex.find(".left-btn").click(function () {
                if (!that.bannerIndex.find("li").is(":animated")) {
                    var index1 = that.bannerIndex.find("dd.active").index();
                    var length = that.bannerIndex.find("dd").length ;

                    if (index1 == 0) {
                        index1 = length;
                    }
                    index1--;
                    that.ctrlChange(index1);
                }

            })
            that.bannerIndex.find(".right-btn").click(function () {
                if (!that.bannerIndex.find("li").is(":animated")) {
                    var index1 = that.bannerIndex.find("dd.active").index();
                    var length = that.bannerIndex.find("dd").length - 1;

                    if (index1 == length) {
                        index1 = -1;
                    }
                    index1++;
                    that.ctrlChange(index1);
                }
            })
        },
        ctrlChange: function (index1) {
            var that = this;
            that.bannerIndex.find("dd").removeClass("active");
            that.bannerIndex.find("dd").eq(index1).addClass("active");
            that.bannerIndex.find("li").fadeOut(500);
            that.bannerIndex.find("li").eq(index1).fadeIn(500);
            //console.log(new Date().getSeconds());
        }
    };
     return banner;
})();

优质内容筛选与推荐>>
1、python字符串的拼接
2、07-常用内置对象
3、新手玩转GAE
4、android 屏幕适配
5、Unity V3 初步使用 —— 为我的.NET项目从简单三层架构转到IOC做准备

赞赏

长按二维码向我转账

受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

阅读

已发送

发送中