jQuery 简单的图片轮播特效

最新推荐文章于 2023-07-16 16:45:03 发布

陈小陌

最新推荐文章于 2023-07-16 16:45:03 发布

阅读量1.9k

点赞数

分类专栏： JavaScript+jQuery HTML+CSS 文章标签： jquery 轮播图片

本文链接：https://blog.csdn.net/qq812069449/article/details/48442461

版权

JavaScript+jQuery 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML+CSS

1 篇文章 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>

陈小陌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 简单的图片轮播特效

加了很多技术群，前端的，程序的，运维的等等。。。经常有入门菜鸟问图片轮播怎么实现。我总是很无奈的说，这个百度上一搜一大堆视频教程，为毛不看看呢？后来有人竟然说看不懂。我也是醉了。于是就自己花了 5分钟。写了一个demo 很简单，甚至可以更精简。 $(function(){ var this_num = 0 ; // 当前下标 var
复制链接

扫一扫