jq实现轮播

我就是我 2023-10-11 10:26 2阅读 0赞

**运用新学的JQ基础做一个简单的轮播**  
首先  
建立一个DIV来存放图片。  
要设置插入图片的DIV的长度  
核心的JQ语句是ANIMATED(“转入方法”，时间）  
其次判定 第一张与最后一张的转换  
PS我们这里是多放一张（第一张和最后一张）来实现无缝转换  
判定可以用LEFT的定位或者用INDEX来进行判定  
嘻嘻，话不多说。我来上代码（PS：代码不是我的，用来借鉴。结尾有出处）

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>自写jquery轮播图带左右箭头</title>
    <style type="text/css">
    *{
    	margin:0 auto;
    	padding:0;
    }
    ul{
    	list-style-type:none;
    	}
    img{
    	border:0;
    	}
    .branch_bar{
    	width:550px;
    	height:220px;
    	overflow:hidden;
    	position:relative;
    	}
    .branch_bar .branch{
    	width:3000px;
    	}
    .branch_bar .branch li{
    	float:left;
    	}
    .branch_bar .branch li img{
    	width:550px;
    	height:220px;
    	}
    .prev{
    	position:absolute;
    	top:100px;
    	left:10px;
    	color:#fff;
    	cursor:pointer;
    	}
    .next{
    	position:absolute;
    	top:100px;
    	right:10px;
    	color:#fff;
    	cursor:pointer;
    	}
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>//温情提示：在IE8及以下的版本可能加载延迟导致错误，请更换自己下载的jquery版本
    <script type="text/javascript">
    	$(function(){
    		var timer = '';
    		var branch_len = $('.branch li').length;
    		var branch_img_len = $('.branch img').width();
    		var branch_img_count_len = parseInt(branch_len * branch_img_len);
    		
    		$(".next").click(function(){
    			if(!$(".branch li:first").is(":animated")){
    				$(".branch li:first").animate({'marginLeft':'-=550px'},500,function(){
    					$(".branch li:first").css('marginLeft',0);
    					$('.branch').append($(".branch li:first"));
    				});
    			}
    		});
    		
    		$(".prev").click(function(){
    			if(!$(".branch li:first").is(":animated")){
    				$('.branch').prepend($(".branch li:last"));
    				$('.branch li:first').css({'marginLeft':'-550px'});
    				$(".branch li:first").animate({'marginLeft':'+=550px'},500,function(){
    					$(".branch li:first").css('marginLeft','0px');
    				});
    			}
    		});
    		
    		timer = setInterval(function(){
    			$(".next").click();
    		},2000);
    		
    		$(".branch_bar").mouseenter(function(){
    			clearInterval(timer);
    		});
    		
    		$(".branch_bar").mouseleave(function(){
    			timer = setInterval(function(){
    				$(".next").click();
    			},2000)
    		});
    	});
    </script>
    </head>
     
    <body>
    <div class="branch_bar">
        <ul class="branch">
            <li><a href="#" title=""><img src="images/banner_small_1.png"></a></li>
            <li><a href="#" title=""><img src="images/banner_small_2.png"></a></li>
            <li><a href="#" title=""><img src="images/banner_small_3.png"></a></li>
            <li><a href="#" title=""><img src="images/banner_small_4.png"></a></li>
        </ul>
        <span class="prev">«向左滚动</span>
        <span class="next">向右滚动»</span>
    </div>
    </body>
    </html>