jquery - 幻灯片jquery并转换为css

Question

我下载了用于幻灯片放映的脚本，它可以正常工作，但在实现此幻灯片放映后，我遇到了 HTML5 中的 seo 优化问题。因为此代码使用此 <div u="">或 <img u="">它仍然写信给我说我不能使用这个带有标签“u”的组合 div。

这是幻灯片的完整脚本:

<!-- Jssor Slider Begin -->
        <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
        <!-- ================================================== -->
        <div id="slider1_container" style="display: none; position: relative; margin: 0 auto;
        top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
            <!-- Loading Screen -->
            <div u="loading" style="position: absolute; top: 0px; left: 0px;">
                <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
                top: 0px; left: 0px; width: 100%; height: 100%;">
                </div>
                <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
                top: 0px; left: 0px; width: 100%; height: 100%;">
                </div>
            </div>
            <!-- Slides Container -->
            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 500px; overflow: hidden;">
                <div>
                    <img u="image" src2="../img/1920/red.jpg" />
                </div>
                <div>
                    <img u="image" src2="../img/1920/purple.jpg" />
                </div>
                <div>
                    <img u="image" src2="../img/1920/blue.jpg" />
                </div>
            </div>

            <!--#region Bullet Navigator Skin Begin -->
            <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
            <style>
                /* jssor slider bullet navigator skin 21 css */
                /*
                .jssorb21 div           (normal)
                .jssorb21 div:hover     (normal mouseover)
                .jssorb21 .av           (active)
                .jssorb21 .av:hover     (active mouseover)
                .jssorb21 .dn           (mousedown)
                */
                .jssorb21 {
                    position: absolute;
                }
                .jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
                    position: absolute;
                    /* size of bullet elment */
                    width: 19px;
                    height: 19px;
                    text-align: center;
                    line-height: 19px;
                    color: white;
                    font-size: 12px;
                    background: url(../img/b21.png) no-repeat;
                    overflow: hidden;
                    cursor: pointer;
                }
                .jssorb21 div { background-position: -5px -5px; }
                .jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
                .jssorb21 .av { background-position: -65px -5px; }
                .jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }
            </style>
            <!-- bullet navigator container -->
            <div u="navigator" class="jssorb21" style="bottom: 26px; right: 6px;">
                <!-- bullet navigator item prototype -->
                <div u="prototype"></div>
            </div>
            <!--#endregion Bullet Navigator Skin End -->

            <!--#region Arrow Navigator Skin Begin -->
            <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
            <style>
                /* jssor slider arrow navigator skin 21 css */
                /*
                .jssora21l                  (normal)
                .jssora21r                  (normal)
                .jssora21l:hover            (normal mouseover)
                .jssora21r:hover            (normal mouseover)
                .jssora21l.jssora21ldn      (mousedown)
                .jssora21r.jssora21rdn      (mousedown)
                */
                .jssora21l, .jssora21r {
                    display: block;
                    position: absolute;
                    /* size of arrow element */
                    width: 55px;
                    height: 55px;
                    cursor: pointer;
                    background: url(../img/a21.png) center center no-repeat;
                    overflow: hidden;
                }
                .jssora21l { background-position: -3px -33px; }
                .jssora21r { background-position: -63px -33px; }
                .jssora21l:hover { background-position: -123px -33px; }
                .jssora21r:hover { background-position: -183px -33px; }
                .jssora21l.jssora21ldn { background-position: -243px -33px; }
                .jssora21r.jssora21rdn { background-position: -303px -33px; }
            </style>
            <!-- Arrow Left -->
            <span u="arrowleft" class="jssora21l" style="top: 123px; left: 8px;">
            </span>
            <!-- Arrow Right -->
            <span u="arrowright" class="jssora21r" style="top: 123px; right: 8px;">
            </span>
            <!--#endregion Arrow Navigator Skin End -->
            <a style="display: none" href="http://www.jssor.com">Bootstrap Slider</a>
        </div>
        <!-- Jssor Slider End -->

我尝试将此代码的样式转换为 css，但之后 slider 不起作用。因为我删除了所有标签“u”并且我只使用“class”作为样式。但在它不起作用之后。

这是我尝试将样式从 html 转换为 css 的 css 文件，但仅此不起作用:

#slider1_container { 
    display: none; 
    position: relative; 
    margin: 0 auto;
    top: 0px; 
    left: 0px; 
    width: 1300px; 
    height: 580px; 
    overflow: hidden; 
}

.slider_background {
    background-position: center top;
    background-color: black;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: 100% 100%;
    width: 100%;
    height: 580px;
}

.loading {
    position: absolute; 
    top: 0px; 
    left: 0px;
}

#slider_filter {
    filter: alpha(opacity=70); 
    opacity: 0.7; 
    position: absolute; 
    display: block;
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%;
}

.slides {
    cursor: move; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 580px; 
    overflow: hidden;
}

.jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
    position: absolute;
    /* size of bullet elment */
    width: 19px;
    height: 19px;
    text-align: center;
    line-height: 19px;
    color: white;
    font-size: 12px;
    background: url(../img/b21.png) no-repeat;
    overflow: hidden;
    cursor: pointer;
}

.jssorb21 div { background-position: -5px -5px; }
.jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
.jssorb21 .av { background-position: -65px -5px; }
.jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }

.jssora21l, .jssora21r {
    display: block;
    position: absolute;
    /* size of arrow element */
    width: 55px;
    height: 55px;
    cursor: pointer;
    background: url(../img/a21.png) center center no-repeat;
    overflow: hidden;
}

.jssora21l { background-position: -3px -33px; }
.jssora21r { background-position: -63px -33px; }
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21l.jssora21ldn { background-position: -243px -33px; }
.jssora21r.jssora21rdn { background-position: -303px -33px; }

#slider_image {
    position: absolute; 
    display: block; 
    background: url(../img/loading.gif) no-repeat center center;
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%;
}

这是我的网站，我仍在尝试在没有 html 错误的情况下实现此功能以进行 seo 优化。

输出错误

VALIDATE WEB

Answer 1

请使用类名而不是id来定义css。

.slider1_container {
    ...
}

要通过 html 验证，请将 u 属性替换为 data-u。

引用:http://www.jssor.com/development/pass-html-validation.html