自动播放带文字描述焦点轮播图

浏览：1979次- 评论：0次- 发布时间：2018-04-28

Html

Css

/*图片轮播*/
(function($) {
    slideplayer = function(object, config) {
        this.obj = object;
        this.n = 0;
        this.j = 0;
        var _this = this;
        var t;
        var defaults = {
            width: "586px",
            height: "346px",
            fontsize: "12px",
            right: "0px",
            bottom: "10px",
            time: "5000"
        };
        this.config = $.extend(defaults, config);
        this.count = $(this.obj + " li").size();

// Download by http://www.codefans.net
        this.factory = function() {
            //元素定位
            $(this.obj).css({
                position: "relative",
                zIndex: "0",
                margin: "0",
                padding: "0",
                width: this.config.width,
                height: this.config.height,
                overflow: "hidden"
            });
            $(this.obj).prepend(
                "<div style='position:absolute;z-index:20;right:" +
                this.config.right +
                ";bottom:7px;'></div>"
            );
            $(this.obj + " li")
                .css({
                    position: "absolute",
                    top: "0",
                    left: "0",
                    width: "100%",
                    height: "100%",
                    overflow: "hidden"
                })
                .each(function(i) {
                    $(_this.obj + " div").append("<a>" + (i + 1) + "</a>");
                });
            $(this.obj + " img").css({
                border: "none",
                width: "100%",
                height: "100%"
            });
            this.resetclass(this.obj + " div a", 0);
            //标题背景
            $(this.obj).prepend("<div class='dkTitleBg'></div>");
            $(this.obj + " .dkTitleBg").css({
                position: "absolute",
                margin: "0",
                padding: "0",
                zIndex: "1",
                bottom: "0",
                left: "0",
                width: "100%",
                height: _this.height,
                background: "#cc0055",
                overflow: "hidden"
            });
            //插入标题
            $(this.obj).prepend("<div class='dkTitle'></div>");
            $(this.obj + " p").each(function(i) {
                $(this)
                    .appendTo($(_this.obj + " .dkTitle"))
                    .css({
                        position: "absolute",
                        margin: "0",
                        padding: "0",
                        zIndex: "2",
                        bottom: "0",
                        left: "0",
                        width: "100%",
                        height: "32px",
                        lineHeight: "32px",
                        textIndent: "10px",
                        textDecoration: "none",
                        fontSize: _this.size,
                        color: "#FFFFFF",
                        background: "#000",
                        opacity: "0.6",
                        overflow: "hidden"
                    });
                if (i != 0) {
                    $(this).hide();
                }
            });
            this.slide();
            this.addhover();
            t = setInterval(this.autoplay, this.config.time);
        };
        //图片渐影
        this.slide = function() {
            $(this.obj + " div a").mouseover(function() {
                _this.j = $(this).text() - 1;
                _this.n = _this.j;
                if (_this.j >= _this.count) {
                    return;
                }
                $(_this.obj + " li:eq(" + _this.j + ")")
                    .fadeIn("200")
                    .siblings("li")
                    .fadeOut("200");
                $(_this.obj + " .dkTitle p:eq(" + _this.j + ")")
                    .show()
                    .siblings()
                    .hide();
                _this.resetclass(_this.obj + " div a", _this.j);
            });
        };
        //滑过停止
        this.addhover = function() {
            $(this.obj).hover(
                function() {
                    clearInterval(t);
                },
                function() {
                    t = setInterval(_this.autoplay, _this.config.time);
                }
            );
        };
        //自动播放
        this.autoplay = function() {
            _this.n = _this.n >= _this.count - 1 ? 0 : ++_this.n;
            $(_this.obj + " div a")
                .eq(_this.n)
                .triggerHandler("mouseover");
        };
        //翻页函数
        this.resetclass = function(obj, i) {
            $(obj).css({
                float: "left",
                marginRight: "5px",
                width: "16px",
                height: "16px",
                lineHeight: "16px",
                textAlign: "center",
                fontWeight: "800",
                fontSize: "12px",
                color: "#000",
                background: "#FFFFFF",
                cursor: "pointer"
            });
            $(obj)
                .eq(i)
                .css({
                    color: "#FFFFFF",
                    background: "#ff5400",
                    textDecoration: "none"
                });
        };
        this.factory();
    };
})(jQuery);

new slideplayer("#slideplay", {
    width: "376px",
    height: "296px",
    fontsize: "14px",
    time: "5000"
});

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.7.2

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：带文字描述，页面结构简单的jquery轮播图

调用：

new slideplayer("#slideplay", {
    width: "376px",
    height: "296px",
    fontsize: "14px",
    time: "5000"
});

参数可设置：

宽：width

高：height

字体大小：fontsize

角标距右侧距离：right

角标距底部距离：bottom

自动播放时间：time

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取