jquery 实现轮播图

ゝ一世哀愁。 2022-05-11 12:52 424阅读 0赞

<!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>轮播图</title>
    		<script src="js/jquery-1.12.3.js"></script>
    		<script>
    			$(function(){
    				$(".rs").on("click",function(){  //右箭头点击事件
     					$(".imgs").css({  
    						marginLeft: function(index, value) {   //此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。
    							var move = parseInt(value) - 290;  //每点击一次移动一个图片的像素
    							if(move == -1160){				   //当图片移动超过界限后,返回第一张图片
    								return 0 + "px";
    							}
    							return move + "px";
    						}
     					});     
    					$(".imgs").stop().fadeOut(5).fadeIn(500);  //stop 停止之前的所有动画  fadeOut 淡出  fadeIn 淡入
    				});
    				$(".ls").on("click",function(){
    					//左边
    					$(".imgs").css({
    						marginLeft: function(index, value) {
    							var move = parseInt(value) + 290;
    							if(move == 290){
    								return -870 + "px";
    							}
    							return move + "px";
    						}
    					});
    					$(".imgs").stop().fadeOut(5).fadeIn(500);
    				});
    				
    			});
    		</script>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			div{
    				width: 290px;
    				margin: 200px auto;
    				overflow: hidden;
    				position: relative;
    			}
    			ul{
    				width: 1800px;
    				height: 430px;
    				margin-left: 0;
    			}
    			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/item1.jpg" /></li>
    				<li><img src="img/item2.jpg" /></li>
    				<li><img src="img/item3.jpg" /></li>
    				<li><img src="img/item4.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>