简单好用的基于jq自定义轮播

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内容：引入jquery1.8.3版本
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>

/*轮播*/

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;
})();

多种其他轮播效果可以参考 swiper插件　网址https://www.swiper.com.cn/

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！