轮播图

一、轮播图之左右切换

　　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;
   100%;
  top: 1.28rem; 
}
  .center .carousel {
     100%;
    height: 3rem;
    background: red;
    overflow: hidden; 
}
    .center .carousel img {
       100%;
      height: 3rem;
 }

　　4、sass部分

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

二、轮播图之上下切换　　

　　1、html部分

　　

<div id="scroll0" class="contain">
	  	<ul id="ul">
	  		<li>111111</li>
	  		<li>222222</li>
	  		<li>333333</li>
	  		<li>444444</li>
	  		<li>555555</li>
	  		<li>666666</li>  
	  		<li>777777</li>
	  		<li>111111</li>
	  	</ul>
	  </div>

　　2、css部分

.contain{
			 100%;
			height: 50px;
			overflow: hidden;
		}
		li{
			 100%;
			height: 50px;
			font-size: 16px;
			font-weight: bold;
			line-height: 50px;
			text-align: center;
			background: lightpink;
		}
		li:nth-child(odd){
			background: burlywood;
		}

　　3、js部分

<script type="text/javascript">
	    var index = 0;
		var length = $('li').length;
		var height = $('li').height();
	    function move(){
	    	index++;
	    	if(index == -1){
				index = length-1;
			}else if(index == length){
				index = 0;				                  
                    $('ul').css({'margin-top':0});                                           
			}
			$('ul').animate({
	           	marginTop:-index*height+'px'
	         },600);
	    }
	    function autoMove(){
			interval = setInterval(function(){
				move();
			},3000)
		}	
		autoMove();
		
	  </script>

　三、全屏轮播

　　1、html部分

<!--轮播图-->

<div class="banner_innerBox" id="banner_innerBox">
　　<ul class="banner_ul" id="banner_ul">
　　　　<li class="num0{$i+1}" style="background:url(img/banner/1600-900-200k-3_305-355458_1600x900.jpg) center no-repeat;">
　　　　　　<a href="{$bannerLi.b_url}" target="_blank"></a>
　　　　</li>
　　　　<li class="num0{$i+1}" style="background:url(img/banner/NSD-2016-1600x900_305-285624_1600x900.jpg) center no-repeat;">
　　　　　　<a href="{$bannerLi.b_url}" target="_blank"></a>
　　　　</li>
　　　　<li class="num0{$i+1}" style="background:url(img/banner/1600-900-200k-3_305-355458_1600x900.jpg) center no-repeat;">
　　　　　　<a href="{$bannerLi.b_url}" target="_blank"></a>
　　　　</li>
　　</ul>
　　<ul class="dianhao_ul" id="dianhao_ul">
　　　　<li class="cur"></li>
　　　　<li class=""></li>
　　　　<li class=""></li>
　　</ul>
　　<div class='index_bannerBtn Pre'><</div>
　　<div class='index_bannerBtn Next'>></div>
</div>

      2、css部分　　

　　

.banner-box{
	min- 1210px;
    max- 1920px;
	height: 500px;
	margin: 0px auto;
	position: relative;
    overflow: hidden;
    z-index: 1;
}
.banner_innerBox{
    left: 0px;
    top: 0px;
     100%;
}
.banner_ul {
    position: absolute;
    left: 0px;
    top: 0px;
     100%;
}
.banner_innerBox li{
	float: left;
}
.banner_ul li a {
    display: block;
     100%;
    height: 500px;
    z-index: 1;
    top: 0px;
    background: #FFF;
    opacity: 0;
    filter: Alpha(Opacity=0);
}
.dianhao_ul {
    position: absolute;
    left: 48%;
    bottom: 10px;
     100%;
    font-size: 0px;
    text-align: center;
    height: 20px;
    z-index: 100;
    margin: 0 auto;
}
.dianhao_ul li {
    display: inline-block;
     15px;
    height: 15px;
    /*background: url(../images/liticon.png) no-repeat 0px -320px;*/
    margin-right: 7px;
    cursor: pointer;
    background: #ff5837;
    border-radius: 15px;
}
.dianhao_ul li.cur {
    /*background: url(../images/liticon.png) no-repeat 0px -280px;*/
   background: #FFF;
}
.index_bannerBtn {
	position: absolute;
    top: 50%;
    margin-top: -30px;
     38px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    display: none;
}
.banner-box:hover .index_bannerBtn {
    display: block;
}
.banner-box .Pre {
    left: 0;
}
.banner-box .Next {
    right: 0;
}　　

3、js部分　

window.onload= function() {
        	//首页banner效果
	var banner_ul=$('#banner_ul');
	banner_ul.append(banner_ul.find('li').clone());
	var bannerCounts=$('#banner_ul li').length;
	var banner_lis=banner_ul.find('li');
	banner_lis.css({
		'width':100/bannerCounts+'%'
	});
	banner_ul.css({
		'width':bannerCounts*100+'%'
	});
	//当前编号
	var cBIndex=(function(){
		var curIndex=0;
		return function(curI){
				if(curI!==undefined){
					curIndex=curI;
				}
				return curIndex;
		}
	})();
	//点号样式控制
	function dianhaoCssFn(dh_index){
		var dh_in=dh_index%(bannerCounts/2);
		$('#dianhao_ul li').removeClass('cur');
		$('#dianhao_ul li').eq(dh_in).addClass('cur');
	}
	//内部元素摇摆特效
	function ybFn(flag){
		var curI=cBIndex();
		var flyDiv=banner_lis.eq(cBIndex()).find('.flyPic_Box');
		flyDiv.animate({
			'left':parseInt(flyDiv.css('left'))+30*flag+'px'
		},300,function(){
			flyDiv.animate({
			'left':parseInt(flyDiv.css('left'))-30*flag+'px'
			},300);
		});
	}
	function bannerPreFn(){
		$('#bannerNext_A,#bannerPre_A').unbind('click');
        $('#dianhao_ul').undelegate('mouseenter');
		if(cBIndex()==0){
			banner_ul.css('left',-(bannerCounts/2)*100+'%');
			cBIndex(bannerCounts/2);
		}
		banner_ul.animate({
			'left':-(cBIndex()-1)*100+'%'
			},500,'swing',function(){
				cBIndex(cBIndex()-1);
				dianhaoCssFn(cBIndex());
				//内部元素摇摆
				ybFn(1);
				$('#bannerPre_A').bind('click',bannerPreFn);
				$('#bannerNext_A').bind('click',bannerNextFn);
                $('#dianhao_ul').delegate('li','mouseenter',function(){
                    dianhaoAniFn($(this));
                })
		});
	}
	function bannerNextFn(){
		$('#bannerNext_A,#bannerPre_A').unbind('click');
        $('#dianhao_ul').undelegate('mouseenter');
		if(cBIndex()>=bannerCounts-1){
			banner_ul.css('left',-(bannerCounts/2-1)*100+'%');
			cBIndex(bannerCounts/2-1);
		}
		banner_ul.animate({
			'left':-(cBIndex()+1)*100+'%'
			},500,'swing',function(){
				cBIndex(cBIndex()+1);
				dianhaoCssFn(cBIndex());
				//内部元素摇摆
				ybFn(-1);
				$('#bannerPre_A').bind('click',bannerPreFn);
				$('#bannerNext_A').bind('click',bannerNextFn);
                $('#dianhao_ul').delegate('li','mouseenter',function(){
                    dianhaoAniFn($(this));
                })
		});
	}
//    点击点号控制飞入飞出
    function dianhaoAniFn(curElment) {
	    banner_ul.stop();
        var curLiIndex=curElment.index();
        var tarIndex=0;
        if(cBIndex()>(bannerCounts/2-1)){
            tarIndex=curLiIndex+bannerCounts/2;
        }else{
            tarIndex=curLiIndex;
        }
        if(tarIndex-cBIndex()==0){
            return;
        }
        $('#bannerNext_A,#bannerPre_A').unbind('click');
//        $('#dianhao_ul').undelegate('mouseenter');
        var ybfnFlag=tarIndex>cBIndex()?-1:1;
        banner_ul.animate({
            'left':-tarIndex*100+'%'
        },500,'swing',function(){
            cBIndex(tarIndex);
            dianhaoCssFn(tarIndex);
            //内部元素摇摆
            ybFn(ybfnFlag);
            $('#bannerPre_A').bind('click',bannerPreFn);
            $('#bannerNext_A').bind('click',bannerNextFn);
           /* $('#dianhao_ul').delegate('li','mouseenter',function(){
                dianhaoAniFn($(this));
            })*/
        });
    }
    $('#dianhao_ul').delegate('li','mouseenter',function(){
	    dianhaoAniFn($(this));
    })
    var banner_Timer=setInterval(bannerNextFn,5000);
	//向前按钮
	$('.Pre').click(function(){
		bannerPreFn();	
		clearInterval(banner_Timer);
	});
	//向后按钮
	$('.Next').click(function(){
		bannerNextFn();		
	});	
	
	//点击左右按钮时定时器清除  离开时添加
	$('.Pre').mouseleave(function(){
		banner_Timer=setInterval(bannerNextFn,5000);
	});
	//点击圆点时定时器清除  离开时添加 不能同时添加清除定时器
	$('.dianhao_ul li').mouseenter(function(){
		clearInterval(banner_Timer);
	});
	$('.dianhao_ul li').mouseleave(function(){
		banner_Timer=setInterval(bannerNextFn,5000);
	});
    }