jquery实现定制轮播图功能

最新推荐文章于 2022-05-25 14:37:48 发布

legolas94

最新推荐文章于 2022-05-25 14:37:48 发布

阅读量193

点赞数

文章标签： jquery 轮播图

本文链接：https://blog.csdn.net/KGLegolas/article/details/90699673

版权

这篇博客介绍了一个基于jQuery实现的可高度定制的轮播图插件。该插件支持显示或隐藏控制栏、文字说明栏，可以选择是否默认播放，并且允许添加转场动画。通过创建myCarousel.js工具类，设置相应的样式，并在目标元素中调用，即可轻松实现自定义轮播效果。

摘要由CSDN通过智能技术生成

本插件根据业务场景进行了充分的定制，可选功能有是否显示轮播图的控制栏，是否显示文字说明栏。控制栏选择框跳转，是否默认播放……，代码简单易懂，可定制程度高，还可根据具体场景需要，增加转场动画等。
首先新建myCarousel.js工具类，实现轮播图的功能代码：

var timer = null;
(function ($) {
    MyCarousel = {
        play: function () {
            if (this.opts.index == this.opts.len) this.opts.index = -1;
            this.opts.index++;
            $("#imgContainer li img").attr('src', this.opts.imgUrls[this.opts.index]);
            $("#selectImg option").removeAttr("selected").eq(this.opts.index).prop("selected", true);
            if (this.opts.show_infobar) {
                $("#infobar").html(this.opts.imgNames[this.opts.index]);
            }
        },
        /*play END*/
        bindAction: function () {
            var self = this;
            $("#imgContainer,#prev,#next").bind('mouseover.myCarousel', function () {
                $("#prev,#next").show();
            });
            $("#imgContainer").bind('mouseout.myCarousel', function () {
                if (!$("#prev,#next").is(":hidden")) $("#prev,#next").hide();
            });
            $("#prev,#nav_prev").bind('click.myCarousel', function () {
                if (self.opts.index == 0) self.opts.index = self.opts.len + 1;
                self.opts.index--;
                $("#imgContainer li img").attr('src', self.opts.imgUrls[self.opts.index]);
                $("#selectImg option").removeAttr("selected").eq(self.opts.index).prop("selected", true);
                if (self.opts.show_infobar) {
                    $("#infobar").html(self.opts.imgNames[self.opts.index]);
                }
            });