Question

我在使用jquery脚本的网站上工作，在主页上显示桌面视频和手机图像。我试图用滑块替换手机的单个图像，而不是有更多的图像。滑块标记采用ul列表形式。您可以在第9行下面的jquery脚本的片段中看到手机图片（header_video_image.jpg）

<script type="text/javascript">
    jQuery(document).ready(function(){
        var BV = new $.BigVideo({
                            container:$('#top-images'),
                            controls:false
                        });
        BV.init();
if (Modernizr.touch) {
BV.show("{{ 'header_video_image.jpg' | asset_url }}");
} else {
        BV.show([
            { type: "video/mp4",  src: "/assets/home-video.mp4" },
            { type: "video/webm", src: "/assets/home-video.webm" },
            { type: "video/ogg",  src: "/assets/home-video.ogv" }
        ],{doLoop:true});
}
    });
</script>

我想用以下ul列表替换header_video_image.jpg：

<ul class="rslides" id="slider1">
  <li><img src="img/qz3b0o.jpg" alt=""></li>
  <li><img src="img/2e54mc0.jpg" alt=""></li>
  <li><img src="img/qz3b0o.jpg" alt=""></li>
</ul>

有可能吗？

Answer 1

尝试这样的事情：

<script type="text/javascript">
jQuery(document).ready(function(){
    var BV = new $.BigVideo({
                        container:$('#top-images'),
                        controls:false
                    });
    BV.init();
    if (Modernizr.touch) {

        // BV.show("{{ 'header_video_image.jpg' | asset_url }}");

        var mobileSlider = '<ul class="rslides hide" id="slider1">';
        mobileSlider += '<li><img src="img/qz3b0o.jpg" alt=""></li>';
        mobileSlider += '<li><img src="img/2e54mc0.jpg" alt=""></li>';
        mobileSlider += '<li><img src="img/qz3b0o.jpg" alt=""></li>';
        mobileSlider += '</ul>';

        BV.show( 100, function() {$( this ).html( mobileSlider );});

    } else {
            BV.show([
                { type: "video/mp4",  src: "/assets/home-video.mp4" },
                { type: "video/webm", src: "/assets/home-video.webm" },
                { type: "video/ogg",  src: "/assets/home-video.ogv" }
            ],{doLoop:true});
    }
});

如何将未列表的列表插入jquery？

1 个答案: