Question

我有一个HTML页面，其中包含一个称为div的{{1}}。我想在诸如持续时间和延迟之类的属性值更改时在wowslider-container1中重新创建元素。如果我创建另一个滑块，它将创建多个滑块。如果我躲起来，两者都会躲起来。我能做什么？我不需要多个滑块。

wowslider-container1

脚本

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>

Answer 1

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

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>

如何重新创建div

1 个答案: