将自动播放功能添加到纯CSS滑块

时间:2014-09-22 15:40:31

标签: html css css3 slider slideshow

我想在我的css滑块中添加一个自动播放功能,但不确定它是否可以使用当前的代码结构。有关如何在不修改当前代码结构的情况下添加的任何建议吗?

我创造了一个小提琴供参考:

http://jsfiddle.net/gh0a3ypk/

    <div class="wav-gal-splash-container">
    <div class="wav-gal-splash-slide-container"> 
    <input id="wav-gal-splash-slider-1" type="radio" name="radio-set" class="wav-gal-splash-slider-selector1" checked="checked" />
    <label for="wav-gal-splash-slider-1" class="wav-gal-splash-slider-label-1"></label>     
    <input id="wav-gal-splash-slider-2" type="radio" name="radio-set" class="wav-gal-splash-slider-selector2" />
    <label for="wav-gal-splash-slider-2" class="wav-gal-splash-slider-label-2"></label>       
    <input id="wav-gal-splash-slider-3" type="radio" name="radio-set" class="wav-gal-splash-slider-selector3" />
    <label for="wav-gal-splash-slider-3" class="wav-gal-splash-slider-label-3"></label>     
    <input id="wav-gal-splash-slider-4" type="radio" name="radio-set" class="wav-gal-splash-slider-selector4" />
    <label for="wav-gal-splash-slider-4" class="wav-gal-splash-slider-label-4"></label>       
    <input id="wav-gal-splash-slider-5" type="radio" name="radio-set" class="wav-gal-splash-slider-selector5" />
    <label for="wav-gal-splash-slider-5" class="wav-gal-splash-slider-label-5"></label>      
    <div class="wav-gal-splash-slider-background">
    <ul class="wav-gal-splash-slides">
    <li><a href=""><img src="http://fakeimg.pl/824x392/?text=one" /></a></li>
    <li><img src="http://fakeimg.pl/824x392/?text=two" /></li>
    <li><img src="http://fakeimg.pl/824x392/?text=three" /></li>
    <li><img src="http://fakeimg.pl/824x392/?text=four" /></li>
    <li><img src="http://fakeimg.pl/824x392/?text=five" /></li>
    </ul>
    </div>
    </div>
    </div>

0 个答案:

没有答案