jQuery 简单的图片轮播特效

快来打我* 2022-08-05 11:09 159阅读 0赞

加了很多技术群，前端的，程序的，运维的等等。。。

经常有入门菜鸟问 图片轮播怎么实现。

我总是很无奈的说，这个百度上一搜一大堆视频教程，为毛不看看呢？

后来有人竟然说看不懂。我也是醉了。

于是就自己花了 5分钟。写了一个demo 很简单，甚至可以更精简。

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    	<script type="text/javascript">
    		$(function(){
    			var this_num = 0 ; // 当前下标
    			var b_li_count = 0; // 图片总数
    			var left_num = 0;	// 当前偏移量
    			
    			// 计算总数
    			b_li_count = $("#banner .banner_box ul li").length;
    			b_li_count = b_li_count-1;  // 减去1  与数组下标相符
    
    
    			// 点击右边 图片
    			$(".banner_right").click(function(){
    				
    				$("#banner .banner_box").stop();
    
    				this_num++;
    
    				// 如果当前下标 大于总数
    				if(this_num>b_li_count){
    					this_num = 0;
    					left_num =0;
    				}else{
    					left_num = this_num*1000*-1;
    				}
    
    				$("#banner .banner_box").animate({
    				   left: left_num
    				}, 500);
    			});
    
    
    			// 点击左边图片
    			$(".banner_left").click(function(){
    				
    				$("#banner .banner_box").stop();
    
    				this_num--;
    				// 计算值
    				if(this_num<0){
    					this_num = b_li_count;
    					left_num = b_li_count*1000*-1;
    				}else{
    					left_num = this_num*1000*-1;
    				}
    
    				$("#banner .banner_box").animate({
    				   left: left_num
    				}, 500);
    			});
    
    		})
    	</script>
    </head>
    <style type="text/css">
    	*{
    		margin: 0px;
    		padding: 0px;
    	}
    	#banner{
    		height: 500px;
    		width: 1000px;
    		position: relative;
    		background: #222;
    		overflow: hidden;
    		margin: 0px auto;
    	}
    	.banner_left{
    		width: 60px;
    		height: 100%;
    		margin: 0px 30px;
    		display: block;
    		background: transparent url("slider-arrow.png") no-repeat scroll 0px 50%;
    		position: absolute;
    		top: 0px;
    		z-index: 10;
    		cursor: pointer;
    		text-indent: -9999px;
    		opacity: 0;
    	}
    
    	.banner_right{
    		width: 60px;
    		height: 100%;
    		margin: 0px 30px;
    		display: block;
    		background: transparent url("slider-arrow.png") no-repeat scroll 0px 50%;
    		background-position: 100% 50%;
    		position: absolute;
    		top: 0px;
    		right: 0px;
    		z-index: 10;
    		cursor: pointer;
    		text-indent: -9999px;
    		opacity: 0;
    	}
    
    	.banner_left:hover,.banner_right:hover{
    		opacity: 1;
    	}
    
    	.banner_box{
    		width: 9999999999px;
    		position: absolute;
    		left: 0px;
    		top: 0px;
    	}
    	.banner_box ul li{
    		float: left;
    		display: block;
    	}
    	.banner_box ul li a{
    		border: 0px none;
    		display: block;
    
    	}
    	.banner_box ul li a img{
    		border: 0px none;
    		width: 1000px;
    		height: 500px;
    	}
    </style>
    <body>
    	<div id="banner">
    		<div class="banner_box">
    			<ul>
    				<li><a href=""><img src="01.jpg"></a></li>
    				<li><a href=""><img src="02.jpg"></a></li>
    				<li><a href=""><img src="03.jpg"></a></li>
    				<li><a href=""><img src="04.jpg"></a></li>
    			</ul>
    		</div>
    		<div class="banner_left"></div>
    		<div class="banner_right"></div>
    	</div>
    </body>
    </html>