轮播图

Posted 2020-07-16

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;
        }
    }
    
}