css轮播图实现
实现要点:
- laber标签和单选框的结合
- E+F, E~F 类型选择器的使用
- 伪类选择符
E:checked的使用 - css轮播图
jquery轮播图实现原理
html和css部分
<style>
.container {
position: relative;
height: 300px;
width: 200px;
overflow: hidden;
}
.carousel img {
width: 200px;
height: 300px;
}
.carousel {
position: absolute;
left: 0; /*通过该值来控制container中呈现的内容*/
width: 800px;
}
.carousel>li {
float: left; /*让carousel内部的图片水平排布*/
}
</style>
<div class="container">
<ul class="carousel">
<li>轮播图片</li>
<li>轮播图片</li>
<li>轮播图片</li>
<li>轮播图片</li>
</ul>
<div>
- 让carousel内部的图片水平排布;为container设置宽高(一张图片的大小),并设置overflow为hidden,即让一个图片大小的内容呈现出来.让carousel绝对定位,通过其left值来控制container中呈现的内容.
JavaScript部分
- 通过 $(node).animate()来实现动画效果(通过
$(node).css('left','-200px')也可以实现图片切换效果,但是没有动画效果)
// 通过$(node).animate()来修改carousel的left值,从而实现动画效果
$carousel.animate({left: "-200px"}, 1000);
- 轮播图一直向右切换到达最后一张图片image4(或一直向左切换到达第一张图片),此时再向右切换时,如果直接使用
$(node).animate()切换到第一张图片的话,轮播图会呈现从最后一张向左滑动到第一张,影响滑动效果. - 为了解决上述问题,需要在轮播图的最后添加image1,在轮播图的开头添加image4(如下图所示). 当滑动到最右端image1时,可以使用
$(node).css('left','xxxpx')"暗地里" 切换到前面的image1;下次再往右切换就从前面的image01开始,从而实现统一的滑动效果.
688001.jpg
