Html
    Css
    Js


* {
	margin:0px;
	padding:0px;
}
.banner {
	width:500px;
	height:300px;
	margin:150px auto;
	position:relative;
	overflow:hidden;
	cursor:pointer;
}
.banner ul {
	list-style:none;
	width:700%;
	height:300px;
	position:absolute;
}
.banner ul li {
	width:500px;
	height:300px;
	float:left;
}
.banner ul li img {
	width:100%;
	height:100%;
}
.banner .arrow .left,.banner .arrow .right {
	width:40px;
	height:80px;
	background:#000000;
	opacity:0.3;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	font-family:"宋体";
	font-size:52px;
	color:#fff;
	line-height:80px;
	text-align:center;
}
.arrow .left {
	left:0px;
}
.arrow .right {
	right:0px;
}
.banner .arrow {
	display:none;
}
/*鼠标经过盒子,让箭头显示出来*/
		    .banner:hover .arrow {
	display:block;
	cursor:pointer;
}
/*小圆点样式*/
		   .banner ol {
	list-style:none;
	width:200px;
	height:20px;
	background:#222222;
	position:absolute;
	bottom:50px;
	left:50%;
	transform:translateX(-50%);
	/*opacity:0.3;
	*/
		    border-radius:10px;
}
.banner ol li {
	width:10px;
	height:10px;
	background:#fff;
	border-radius:50%;
	float:left;
	margin-left:21px;
	margin-top:5px;
	cursor:pointer;
}
.banner ol .now {
	background:aqua;
}

↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

超完美滚动轮播图

2
      0
      2018/4/13 9:01:24
      还是有bug,当连续点击左右切换按钮时(鼠标不移动),两侧的左右切换按钮没有规律性的偶尔消失
          轻酌~浅醉0
          2018/4/13 9:52:08
          我没试出来,不过我设置的是鼠标移出包裹图片的这个div,按钮才消失,按常理来说,鼠标没移出应该不会消失。。。
      回复