jquery 实现轮播图_滑动切换

待我称王封你为后i 2022-05-11 12:56 327阅读 0赞

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title>轮播图_滑动</title>
    		<script src="js/jquery-1.12.3.js"></script>
    		<script>
    			$(function(){
    				var key = true;  //用来控制动画,在上一次动画未完成时,点击左右无效
    				$(".rs").on("click",function(){
    					//右边
    					$(".imgs").css({
    						marginLeft: function(index, value) {
    							var move = parseInt(value);
    							if(move == -1160){   //当图片移动超出界限后,使图片重新定位到第一张
    								return 0 + "px";
    							}
    						}
    					});
    					if(key){
    						key = false;
    						$(".imgs").animate({
    							marginLeft:"-=290"  //移动图片,累加
    						},500,function(){
    							key = true;
    						});
    					}
    					
    				});
    				$(".ls").on("click",function(){
    					//左
    					$(".imgs").css({
    						marginLeft: function(index, value) {
    							var move = parseInt(value);
    							if(move == 0){
    								return -1160 + "px";
    							}
    						}
    					});
    					//左边
    					if(key){
    						key = false;
    						$(".imgs").animate({
    							marginLeft:"+=290"
    						},500,function(){
    							key = true;
    						});
    					}
    				});
    				
    			});
    		</script>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			div{
    				width: 290px;
    				margin: 200px auto;
    				overflow: hidden;
    				position: relative;
    			}
    			ul{
    				width: 1800px;
    				height: 430px;
    				margin-left: -290px;
    			}
    			ul>li{
    				list-style: none;
    				float: left;
    			}
    			span{
    				display: block;
    				width: 40px;
    				font-size: 50px;
    				background-color: rgba(0,0,0,0.3);
    				color: white;
    				text-align: center;
    				line-height: 80px;
    			}
    			div .leftArrow{
    				position: absolute;
    				top: 50%;
    				left: 0;
    				margin-top: -40px;
    			}
    			div .rightArrow{
    				position: absolute;
    				top: 50%;
    				right: 0;
    				margin-top: -40px;
    			}
    			div>a{
    				display: none;
    			}
    			div:hover a{
    				display: inline-block;
    			}
    		</style>
    	</head>
    
    	<body>
    		
    		<div>
    			<ul class="imgs">
    				<li><img src="img/item4.jpg" /></li>
    				<li><img src="img/item1.jpg" /></li>
    				<li><img src="img/item2.jpg" /></li>
    				<li><img src="img/item3.jpg" /></li>
    				<li><img src="img/item4.jpg" /></li>
    				<li><img src="img/item1.jpg" /></li>
    			</ul>
    			<a href="javascript:void(0)" class="ls"><span class="leftArrow"><</span></a>
    			<a href="javascript:void(0)" class="rs"><span class="rightArrow">></span></a>
    			
    		</div>
    		
    	</body>
    
    </html>