仿京东轮播图 | 易学教程

非常感谢CSDN的分享，我也会把自己的学到的知识分享给大家，大家共同进步
原理：设置一个div，里面有图片，上一页，下一页，点选按钮
代码：
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.1.1.min.js"></script>
	</head>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 500px;
			height: 400px;
			margin: 20px auto;/*居中关键*/
			position: relative;/*不可重叠*/
			border: 1px solid #ccc;/*边框1px加粗实线*/
		}
		a{
			display: none;
			width: 500px;
			height: 400px;
			/*color: #fff;*/
			text-align: center;
			font:700 100px/400px "simsun"
		}
		ul{
			position: absolute;
			bottom: 30px;
			left: 50%;
			list-style: none;
			margin-left: -55px;
		}
		ul li{
			float: left;
			width: 18px;
			height: 18px;
			background-color: black;
			margin: 0 2px;
			/*cursor: move;*/
			border-radius: 9px;
			/*color: #fff;*/
			text-align: center;
			line-height: 18px;
		}
		.arrow span{
			position: absolute;
			top: 50%;
			width: 38px;
			height: 60px;
			color: #fff;
			text-decoration: none;
			font: 700 36px/60px "simsun";
			text-align:center;
			background: rgba(0,0,0,.3);
			margin-top: -30px;
			cursor: pointer;
		}
		#arrow-1{
			left: 0;
		}
		#arrow-r{
			right: 0;
		}
		.arrow span:hover{
			background: rgba(0,0,0,.8);
		}
		.current{
			background: red;
		}
		.show{
			display: block;
		}
	</style>
	<body>
		
	<div class="box" id="box">
		<a  href="#" class="show"><img src="img/LunBoTu/500x500-1.png"></a>
		<a  href="#" ><img src="img/LunBoTu/500x500-2.png"></a>
		<a  href="#" ><img src="img/LunBoTu/500x500-3.png"></a>
		<a  href="#" ><img src="img/LunBoTu/500x500-4.png"></a>
		<a  href="#" ><img src="img/LunBoTu/500x500-2.png"></a>
		<ul class="mainbanner_list" >
			<li class="current"><a href="javascript:void(0);">1</a></li>
			<li ><a href="javascript:void(0);">2</a></li>
			<li><a href="javascript:void(0);">3</a></li>
			<li><a href="javascript:void(0);">4</a></li>
			<li><a href="javascript:void(0);">5</a></li>
		</ul>
		
		<div class="arrow">
			<span href ="#" id="arrow-1">&lt;</span>
			<span href ="#" id="arrow-r">&gt;</span>
		</div>
	</div>
	</body>
	<script>
//		var aArr = document.getElementsByTagName("a");
//		var liArr = document.getElementsByTagName("li");
//		var spArr = document.getElementsByTagName("span");
//		var box = document.getElementById("box");
		var aArr = $("a");
		var liArr = $("li");
		var spArr = $("span");
		var box = $("#box");
		var $list = $(".mainbanner_list");
        var $items = $list.children();
		var count = 0;
		spArr[1].onclick =fn1;
		spArr[0].onclick =fn2;
		
		var timer =setInterval(fn1,4000);
		box.onmouseover =function(){
			clearInterval(timer);
		}
		box.onmouseout = function(){
			timer = setInterval(fn1,1000);
		}
		for (var i = 0; i < liArr.length; i++) {
			liArr[i].onclick = fn3();
		}
		$("ul li").on('mouseenter',function(){
			var $cur_a = $(this).find('a');
			var index = $(this).index();//获取坐标
			//alert("adas");
			goto(index);
		});
		
		var goto = function(_idx) {
              var idx = _idx;
              //debugger;
             // $items.eq(idx).addClass('current').siblings().removeClass('current');
              count = idx;
			  if(count === liArr.length){
				count =0;
			  }
			  for (var i = 0; i < liArr.length; i++) {
				aArr[i].className = "";
				liArr[i].className ="";
			}
			aArr[count].className ="show";
			liArr[count].className ="current";        
        }		
		function fn1(){
			count++;
			if(count === liArr.length){
				count =0;
			}
			for (var i = 0; i < liArr.length; i++) {
				aArr[i].className = "";
				liArr[i].className ="";
				
			}
			aArr[count].className ="show";
			liArr[count].className ="current";
		}
		
		function fn2(){
			count--;
			if(-1 ==count){
				count =liArr.length-1;
			}
			for (var i = 0; i < liArr.length; i++) {
				aArr[i].className ="";
				liArr[i].className ="";
			}
			aArr[count].className ="show";
			liArr[count].className ="current";
		}
		function fn3(){
			for (var i = 0; i < liArr.length; i++) {
				aArr[i].className ="";
				liArr[i].className ="";
			}
			
			aArr[count].className ="show";
			liArr[count].className ="current";
		}
	</script>
</html>
效果图：
来源：CSDN
作者：冬~风满楼
链接：https://blog.csdn.net/wnwmxes/article/details/104244336
标签
互联网电商
电子商务
轮播