无限图像滑块与纯CSS3 [英] Infinite Image slider with pure CSS3

问题描述

CSS3 有很多滑块的例子，但是几乎所有的滑块都需要点击触发来改变幻灯片。

例如，假设一个结构为

 < div class =parent> 
< div class =child> 
第一个DIV 
< / div> 
< div class =child> 
第二个DIV 
< / div> 
< div class =child> 
第三个DIV 
< / div> 
< / div> 
  

使用CSS

  .parent {
 width：100px; 
 height：100px; 
 overflow：hidden; 
} 
 .child {
 width：100％; 
 height：100％; 
 float：left; 
} 
  

可以继续滚动子 ，我应该回答，而不是评论，所以在这里，你可以参考一个来源 - http：// css3.bradshawenterprises.com/cfimg/ ，它使用CSS3动画交换图像。

虽然我建议你使用jQuery或JS而不是CSS3动画由于跨浏览器支持，特别是当它涉及到IE。

There are numerous example of sliders made by CSS3, but almost all of them needs click trigger to change the slide. I wonder if it is possible to make a auto-slider, which continuously and indefinitely change the slides.

For example, consider a structure as

<div class="parent">
    <div class="child">
       First DIV
    </div>
    <div class="child">
       Second DIV
    </div>
    <div class="child">
       Third DIV
    </div>
</div>

with CSS

.parent {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
.child {
    width: 100%;
    height: 100%;
    float: left;
}

can we continueously scroll the child elements inside the parent frame?

解决方案

As you suggested, that I should answer instead of a comment so here it goes, you can refer to a source here - http://css3.bradshawenterprises.com/cfimg/ which uses CSS3 animations to swap the images.

Though I would suggest you to use jQuery or JS instead of CSS3 animations due to cross browser support especially when it comes to IE.

这篇关于无限图像滑块与纯CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！