首页 > 想做一个轮播效果,不知道应该怎么实现

想做一个轮播效果,不知道应该怎么实现

如图想实现一个点击两边按钮会内容会左右滑动的效果。
我原设想是用一个ul标签当中间容器,li标签作为子元素,float布局,ul宽度自适应其子元素的总宽度,然后把ul放在固定宽度的容器中,超出隐藏,控制ul相对外部容器的位置就可以达到轮播的效果,但是我发现li超过5个后,就会换行,我和想在同一行不一样,不知道是哪里出了问题,求指点

========================
我ul relative,li absolute,然后通过js初始化时设置各元素的位置,然后点击两侧按钮时改变ul的位置,我这样做的确能达到轮播效果,但是没有动画,是瞬时完成的,即使我给ul和li都加了animation:2s;也不行,怎么解决呢?

========================
css动画是如何触发的,父元素relative,子元素absolute,我修改父元素的位置,子元素跟着动,会有动画效果吗


慕课网有专门讲图片轮播特效的,讲的挺好的!


设置ul的宽度为总的li的宽度
ul = liWidth* liLen;

可以使用jQuery的animate,如果你用jQ库的话。
应该是ul 使用absolute,li不用absolute,ul的父类使用relative。
如果是使用CSS3的话,有一个transition这个属性里也有一个animate

来看看这个插件:jQuery全能滚动插件


设置ul的宽度为9999px ..


你的想法是对的,但是ul的宽度不够,就会导致子元素换行,你只需要为ul设置足够的宽度就行了。

width:99999px

父元素relative,子元素absolute,我修改父元素的位置,子元素跟着动。 这样写轮播的思路是正确的。
用css也是可以实现动画的效果。 在父元素的样式里面加入css3的过渡。
用js控制父元素的位置。 做出的效果和jQuery animate()方法做出的差不多。

【热门文章】
【热门文章】