javascript - 如何重新创建 div

Question

我有一个 html 页面包含一个名为 wowslider-container1 的 div。当持续时间和延迟等属性的值发生变化时，我想重新创建 wowslider-container1 中的元素。如果我创建另一个 slider ，它将创建多个 slider 。如果我躲起来，双方都会躲起来。我能做些什么？我不需要多个 slider 。

Duration:<input type="number" id="txtDuration" />
&nbsp;&nbsp;Delay<input type="number" id="txtDelay" />
<button onclick="set()">Set </button>
<br/>
<br/>
<div>
    <div id="wowslider-container1">
        <div class="ws_images">
            <ul>
                <li>
                    <a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor: pointer">
                        <img id="wows1_0" class="imgMain" src="SBG_HomePg_ANA2019_1146x405V3.jpg" len="0" alt="Consign." />
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

脚本

var delay_value=100;
var duration_value=20;

function set() {
    var dur=document.getElementById("txtDuration").value;
    var del=document.getElementById("txtDelay").value;
    setDuration(del, dur);
}

function setDuration(delay,duration) {
    delay_value=delay;
    duration_value=duration;
    jQuery("#wowslider-container1").wowSlider({
        effect: "fade",
        prev: "",
        next: "",
        duration: duration_value * 100,
        delay: delay_value * 100,
        width: 900, height: 640,
        autoPlay: true,
        autoPlayVideo: false,
        playPause: true,
        stopOnHover: false,
        loop: false,
        bullets: 0,
        caption: false,
        captionEffect: "parallax",
        controls: true,
        controlsThumb: false,
        responsive: 1,
        fullScreen: false,
        gestures: 2,
        onBeforeStep: 0,
        images: 0
    });
}

setDuration(20,100);

Answer 1

API 显示选项只能在 slider 初始化期间设置(并且没有 destroy() 事件)，因此您必须删除事件/元素并重新启动 slider :

http://wowslider.com/help/wowslider-api-184.html

HTML:

Duration: <input type="number" id="txtDuration">
Delay: <input type="number" id="txtDelay">
<button onclick="set()">Set </button>
<br><br>
<div class="wow-slider-container">
    <div class="wow-slider">
        <div class="images">
            <ul>
                <li>
                    <a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor:pointer">
                        <img id="wows1_0" class="imgMain" src='SBG_HomePg_ANA2019_1146x405V3.jpg' len='0' alt="Consign.">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Javascript:

<script type="text/javascript">
    var wowSliderOptions = {
        effect: 'fade',
        prev: '',
        next: '',
        duration: 20,
        delay: 100,
        width: 900,
        height: 640,
        autoPlay: true,
        autoPlayVideo: false,
        playPause: true,
        stopOnHover: false,
        loop: false,
        bullets: 0,
        caption: false,
        captionEffect: 'parallax',
        controls: true,
        controlsThumb: false,
        responsive: 1,
        fullScreen: false,
        gestures: 2,
        onBeforeStep: 0,
        images: 0
    }

    var wowSliderContent = jQuery('.wow-slider').html();
    var wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);

    function set() {
        // Set user-defined options
        wowSliderOptions.duration = document.getElementById('txtDuration').value;
        wowSliderOptions.delay = document.getElementById('txtDelay').value;

        // Remove original WOW Slider instance
        wowSlider.remove();

        // Recreate original HTML slides
        jQuery('.wow-slider-container').html(wowSliderContent);

        // Start WOW Slider
        wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
    }
</script>