简单轮播图的实现

最新推荐文章于 2019-09-04 22:01:15 发布

放肆的肆～

最新推荐文章于 2019-09-04 22:01:15 发布

阅读量248

点赞数 1

分类专栏： js 文章标签：轮播图 js

本文链接：https://blog.csdn.net/qq_35054844/article/details/70305604

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播</title>
	<style type="text/css">
	*{margin: 0;padding: 0;list-style:none;}
	.banner{
		width: 1000px;height: 345px;
		position: relative;margin: 50px;
		overflow: hidden;
	}
	.banner .img{
		width: 6000px;position: absolute;
	}
	.img li{float: left;width: 1000px;}
	.num{
		position: absolute;width: 100%;bottom:10px;
		left:0px;text-align:center;
	}
	.num li{
		width: 10px;height: 10px;background: #333;
		border-radius:50%;margin: 0 3px;
		display: inline-block;
	}
	.num .on{background: #f39;}
	.btn{
		width: 30px;height: 50px;
		position: absolute;top:50%;
		background: rgba(0,0,0,0.5);
		text-align:center;line-height:50px;
		color:#fff;font-size:40px;
		margin-top: -25px;font-family:'宋体';
		cursor:pointer;
	}
	.btn_l{left:0px;}
	.btn_r{right:0px;}
	</style>
</head>
<body>
	<div class="banner">
		<ul class="img">
			<li><img src="./001.jpg" width="100%"></li>
			<li><img src="./002.jpg" width="100%"></li>
			<li><img src="./003.jpg" width="100%"></li>
			<li><img src="./004.jpg" width="100%"></li>
			<li><img src="./005.jpg" width="100%"></li>
		</ul>
		<ul class="num">
			<li class="on"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div class="btn btn_l"><</div>
		<div class="btn btn_r">></div>
	</div>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	//定义全局变量
	var i = 0;
	//无缝第一步 克隆第一张图片插入到尾部
	var cloneimg = $('.banner .img li:first').clone();
	//插入尾部
	$('.banner .img').append(cloneimg);


	var len = $('.img li').length;//获取图片数量

	//启动定时器
	var inte = setInterval(moveR,3000);

	//鼠标悬停效果
	$('.banner').hover(function(){
		//清除定时器
		clearInterval(inte);
	},function(){
		inte = setInterval(moveR,3000);
	});


	//绑定单击事件
	$('.banner .num li').click(function(){
		//获取当前元素的索引
		i = $(this).index();
	
		//计算left
		var newleft = i*1000;
		//设置动画
		$('.banner .img').stop().animate({left:-newleft+'px'},1000);
		//设置圆点的样式
		$('.banner .num li:eq('+i+')').addClass('on').siblings().removeClass('on');
	
	})

	//绑定左右单击事件
	$('.banner .btn_r').click(function(){
		moveR();
	})
		//绑定左右单击事件
	$('.banner .btn_l').click(function(){
		moveL();
	})

	//移动右
	function moveR()
	{
		i++;
		//判断越界
		if(i == len){
			//无缝第二步 越界时用css快速定位ul位置 0
			$('.banner .img').css({left:0});
			//修改i的值
			// i = 0;
			i = 1;
		}
		//计算left
		var newleft = i*1000;
		//设置动画
		$('.banner .img').stop().animate({left:-newleft+'px'},1500);
		//无缝第三步
		if(i == len-1){
			$('.banner .num li:eq(0)').addClass('on').siblings().removeClass('on');
		}else{
			//设置圆点的样式
			$('.banner .num li:eq('+i+')').addClass('on').siblings().removeClass('on');
		}
	}
	//移动左
	function moveL()
	{
		i--;
		//判断越界
		if(i == -1){
			//无缝第四步
			$('.banner .img').css({left:-(len-1)*1000});
			// i = len-1;
			i = len -2;
		}
		//计算left
		var newleft = i*1000;
		//设置动画
		$('.banner .img').stop().animate({left:-newleft+'px'},1500);
		//设置圆点的样式
		$('.banner .num li:eq('+i+')').addClass('on').siblings().removeClass('on');
	}

	</script>
</body>
</html>