使用JQuery实现简单的图片切换

快来打我* 2022-08-27 04:51 227阅读 0赞

1.html代码

2.css代码

#slides-show  { height: 510px; width: 1024px;  position: relative;  overflow: hidden;}
    	#slides-show .slides-wrap{ position: absolute; top:0px; left: 0;}
    	#slides-show .slides-item{ padding: 0; height: 520px;}
    	#slides-show .slides-item img{ width: 1024px; height: 520px; margin-bottom:0;}

3.js

ps： 记得引入JQuery

全部代码：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>使用JQuery实现简单的图片切换</title>
    <style type="text/css">
    	#slides-show  { height: 510px; width: 1024px;  position: relative;  overflow: hidden;}
    	#slides-show .slides-wrap{ position: absolute; top:0px; left: 0;}
    	#slides-show .slides-item{ padding: 0; height: 520px;}
    	#slides-show .slides-item img{ width: 1024px; height: 520px; margin-bottom:0;}
    </style>
    <script src="js/jquery.min.js"></script>
    </head>
    <body>
    <div id="slides-show">
    			<div class="slides-wrap">
    				<div class="slides-item"><img src="img/slide-1.jpg"/></div>
    				<div class="slides-item"><img src="img/slide-2.jpg"/></div>
    				<div class="slides-item"><img src="img/slide-3.jpg"/></div>
    			</div>
    		</div>
    <script type="text/javascript">
    	$(document).ready(function(){
    		var len=$("#slides-show .slides-wrap .slides-item").length;
    		var cur=0;
    		var flag=false;
    		function slide(){
    			$("#slides-show .slides-wrap").css("top", "-"+ (cur * 520) + "px");
    			
    			if(flag) {cur += 1; flag=false;$("#slides-show .slides-wrap").fadeOut(3000);}
    			else{ flag=true;$("#slides-show .slides-wrap").fadeIn(1000);}
    			if(cur > len -1) cur=0;
    			console.log(cur);
    		}
    		slide();
    		setInterval(function(){
    			slide();
    		},3000);
    	});
    </script>
    </body>
    </html>