Html
    Css
    Js

    
                        
ul {
	margin:0;
	padding:0;
}
.clear {
	clear:both;
}
.swiper_Mycontainer {
	position:relative;
	margin:0 auto;
}
.swiper_Mywrapper {
	margin:0 auto;
	padding:0;
	overflow:hidden;
}
.swiper_Myslide {
	margin:0 auto;
	padding:0;
	position:relative;
	overflow:hidden;
}
.swiper_Myslide li {
	float:left;
	position:relative;
	overflow:hidden;
	height:300px;
	ba
}
.swiper_Myslide li img {
	width:100%;
}
.clear2:after {
	content:"";
	clear:both;
	display:block;
}
.swiper_buttton {
	position:absolute;
	top:50%;
	margin-top:-15px;
	cursor:pointer;
	text-align:center;
	max-width:5%;
	display:none;
}
.swiper_but_prev {
	left:2%;
	font-size: 30px
}
.swiper_but_next {
	right:2%;
	font-size: 30px
}
.swiper_Mycontainer:hover .swiper_buttton {
	display:block;
}
.uldian {
	position:absolute;
	left:0;
	width:100%;
	text-align:center;
	bottom:2%;
}
.uldian li {
	height:10px;
	width:10px;
	border-radius:100px;
	background-color:#000;
	display:inline-block;
	margin:0 5px;
	cursor:pointer;
}
.uldian li.cur {
	background-color:#FFF;
}

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

缩减版banner轮播图

1
      沙磊0
      2017/11/16 21:20:03

      有个bug,不断地点击→箭头,下面的小圆点不循环了

      回复