轮播图，So easy

js css jquery 插件

轮播效果预览

结构布局

三层布局：

——page-wrapp
—— ——item-wrap[轮播效果是通过这一层的滚动实现的]
—— —— ——sub-item

说明：

  • page-wrapp作为轮播盒子框架，即限定可见区域
  • item-wrap作为轮播外层的盒子
  • sub-item作为每一个轮播图的盒子

1 .page-wrapp的宽高等于sub-item的宽高,page-wrapp的overflow属性设为hidden,这样超出page-wrap范围的将是不可见的
2 .item-wrap的宽度等于sub-item的总宽度，,多个sub-item并排[可以用浮动的方式实现],高度等于sub-item的高度.
3 .这样虽然item-wrap的宽度大于page-wrapp的宽度，但因为page-wrapp设置了overflow:hidden,所以也只能显示一张图片的大小。
4 .为了得到轮播的效果这时可以使用动画将item-wrap在水平方向平移，也就得到了轮播的效果

<div class="page-wrapp">
	<div class="item-wrap">
	    <div class="sub-item">
	    	<img src="/img/compents/background01.jpg" alt="" class="img-item">
	    </div>
	    <div class="sub-item">
	    	<img src="/img/compents/cat-cartoon.jpg" alt="" class="img-item">
	    </div>
	    <div class="sub-item">
	    	<img src="/img/compents/cup.jpg" alt="" class="img-item">
	    </div>
	    <div class="sub-item">
	    	<img src="/img/compents/leaf.jpg" alt="" class="img-item">
	    </div>
	    <div class="sub-item">
	    	<img src="/img/compents/nature01.jpg" alt="" class="img-item">
	    </div>
	</div>
</div>

css样式

/*这里的样式是针对全屏设置的，最外层的轮播框架宽高在此设为浏览器窗口的大小*/
.page-wrapper,
    .page-wrapper .item-wrap,
    .page-wrapper .sub-item,
    .page-wrapper .sub-item .img-item {
    	position: relative;
        height: 100%;
    }
    
    .page-wrapper {
        min-width: 720px;
        min-height: 500px;
        overflow: hidden;
        zoom: 1;
    }
    
    .page-wrapper .item-wrap {
    	/*因为有5个子元素，所以宽度是5个子元素之和[子元素和父级的宽度是相等的],所以总宽度为父级的5倍*/
        width: 500%;
        overflow: hidden;
        zoom: 1;
    }
    
    .page-wrapper .sub-item {
        float: left;
        width: 20%;
    }
    
    .page-wrapper .sub-item .img-item {
        width: 100%;
    }

轮播动画实现

添加轮播按钮，点击时触发轮播事件

<!-- 轮播按钮 -->
<div class="left-btn-wrap">
	<span class="silder-left-btn" id="leftBtn"></span>
</div>
<div class="right-btn-wrap">
	<span class="silder-right-btn" id="rightBtn"></span>
</div>

这里可以使用jQuery的animate动效实现轮播效果

/*左滚动
参数说明：
$itemWrap=$('.item-wrap'); 轮播外层盒子
*/
$leftBtn.on('click', function(){
	$itemWrap.animate({
		'margin-left': 0 - $imgItems.width()
	}, 1000, function(){
		/*轮播一次就动态的将第一个图片元素移到最后，变成最后一张图片，这样可以实现无限循环的效果*/
		$itemWrap.append($('.item-wrap .sub-item').first());
		$itemWrap.css("margin-left",0);
	})
}）
/*右滚动*/
$rightBtn.on('click', function(){
	$itemWrap.prepend($('#itemWrap .sub-item').last());
		$itemWrap.css("margin-left",0 - $imgItems.width());
	$itemWrap.animate({
		'margin-left': 0
	}, 1000)
}）

这样就可以实现一个简单的轮播图的效果，上面给出的事例还带有轮播导航条[右下角],这可以通过增加一个data-index属性来记录轮播索引位置。

注：这中做法每旋转一次就需要动态的修改DOM结构，另一种思路是将第一屏copy到最后的方式来实现无缝衔接

查看完整demo

github:https://github.com/xiaofuzi/gallery

Prev Next