简单的前端轮播(无自动跳转)_前端实现轮播图点击小方块实现图片切换不自动轮播-CSDN博客

本文链接：https://blog.csdn.net/A_Xi_Baa/article/details/77991097

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- bookstrap导入三个 -->
		<link rel="stylesheet" href="bootstrap3.3.7/css/bootstrap.min.css">
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="bootstrap3.3.7/js/bootstrap.min.js"></script>
	</head>
	
<style>
	.biankuang{
		border: 2px solid red;
	}
	li{
		float: left;
		list-style: none;
		margin-right: 10px;
	}
</style>
	<body>
		<center>
			<div style="color:red;z-index: 5;top: 30%;left: 0px;" id="houtui"><span class="glyphicon glyphicon-backward"></span></div>
			<div >
				<img src="image/1.jpg" width="50%" class="tu" />
				<img src="image/2.jpg" width="50%"  class="tu" />
				<img src="image/3.jpg" width="50%"  class="tu" />
				<img src="image/4.jpg" width="50%"  class="tu" />
				<img src="image/5.jpg" width="50%"  class="tu" />
				<img src="image/6.jpg" width="50%"  class="tu" />
			</div>
			<div style="color:red;z-index: 5;top: 30%;right: 0px;" id="qianjin"><span class="glyphicon glyphicon-forward"></span></div>
			
			
			<ul >
				<li class="xiatu"><img src="image/1.jpg" width="50px"  /></li>
				<li class="xiatu"><img src="image/2.jpg" width="50px"  /></li>
				<li class="xiatu"><img src="image/3.jpg" width="50px"  /></li>
				<li class="xiatu"><img src="image/4.jpg" width="50px"  /></li>
				<li class="xiatu"><img src="image/5.jpg" width="50px"  /></li>
				<li class="xiatu"><img src="image/6.jpg" width="50px"  /></li>
			</ul>
		</center>


	<script>
		//创建一个索引为0的指向最前面
		var  i=0;
		//一进来显示第一个图，其余的兄弟隐藏
		$('.tu').eq(0).show().siblings('.tu').hide();
		
		//点下面图事件
		$('.xiatu').click(function(){
			//获取当前数字赋值给i
			i=$(this).index();
			//调用zhanshi()方法
			zhanshi();
		});
		
		//点下一图事件
		$("#qianjin").click(function(){
			//判断当前索引是最后一个
			if(i==5){
				//索引变成第一个
				i=0;
			}else{
				//否则索引就加1
				i++;
			}
			//调用zhanshi()方法
			zhanshi();
		});
		
		//点上一图事件
		$("#houtui").click(function(){
			//判断当前索引是最前一个
			if(i==0){
				//索引变成第一个
				i=5;
			}else{
				//否则索引就减1
				i--;
			}
			//调用zhanshi()方法
			zhanshi();
		});
		
		//zhanshi()方法
		function zhanshi(){
			//显示出点击那个数字对应图片以动画形式展现，其余的退出动画
			//可加入其他翻转动画，详情问亮哥
			$('.tu').eq(i).show().siblings('.tu').hide();
			
			//给当前点击的添加边框样式.其他兄弟去掉样式
			$('.xiatu').eq(i).addClass("biankuang").siblings('.xiatu').removeClass("biankuang");
		}
	</script>
	</body>

</html>