码迷,mamicode.com
首页 > 其他好文 > 详细

轮播图

时间:2016-05-30 14:32:03      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:

1、html部分

<div class="carousel">
		      	<div id="slider" class="swipe" style="visibility:visible;">
		        	<div class="swipe-wrap">
		          		<figure>
		            		<div class="face faceInner">
		              			<img src="img/find/swip1.jpg"/>
		            		</div>
		          		</figure>
		          		<figure>
		            		<div class="face faceInner">
		              			<img src="img/find/swip1.jpg" />
		            		</div>
		          		</figure>
				        <figure>
				            <div class="face faceInner">
				              <img src="img/find/swip1.jpg"/>
				            </div>
				        </figure>
		          		<figure>
		            		<div class="face faceInner">
		              			<img src="img/find/swip1.jpg"/>
		            		</div>
		          		</figure>
		        	</div>
		        	<!--圆点-->
		        	<nav>
		            	<ul id="position">
		             		<li class="on"></li>
		              		<li></li>
		              		<li></li>
		              		<li></li>
		            	</ul>
		          	</nav>
		      	</div>     
		    </div>

  

2、js部分

var slider = Swipe(document.getElementById(‘slider‘), {
		    auto: 3000,//轮播时间
	        continuous: true,//是否连续播放
	        disableScroll: false,
	        callback: function(pos) {
	          var i = bullets.length;
	          while (i--) {
	            bullets[i].className = ‘ ‘;
	          }
	          bullets[pos].className = ‘on‘;
	        }
      });
      var bullets = document.getElementById(‘position‘).getElementsByTagName(‘li‘);  

3、css部分 

.center {
  position: relative;
  width: 100%;
  top: 1.28rem; 
}
  .center .carousel {
    width: 100%;
    height: 3rem;
    background: red;
    overflow: hidden; 
}
    .center .carousel img {
      width: 100%;
      height: 3rem;
 }

4、sass部分

.center{
    position:relative;
    width: 100%;
    top:1.28rem;    
    .carousel {
        width: 100%;
        height: 3rem;       
        background: red;
        overflow: hidden;
        img{
            width: 100%;
            height: 3rem;
        }
    }
    
} 

  

  

  

  

  

轮播图

标签:

原文地址:http://www.cnblogs.com/qing1304197382/p/5541833.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!