【网易云-body1】

一、效果

二、html

<div class="middle"><div class="middle-top"><div class="carousel"><!-- 左右箭头 --><a href="" class="arrow-left"><span></span></a><a href="" class="arrow-right"><span></span></a><!-- 小圆点 --><ol class="circle"><li></li></ol><!-- 轮播图片 --><div class="carousel_main"><div class="carousel-box"><ul><li id="0"><a href="#"><img src="./imgs/01.jpg"></a></li><!-- <li id="1"><a href="#"><img src="./imgs/02.jpg"></a></li><li id="2" class="current"><a href="#"><img src="./imgs/03.jpg"></a></li><li id="3"><a href="#"><img src="./imgs/04.jpg"></a></li><li id="4"><a href="#"><img src="./imgs/05.jpg"></a></li><li id="5"><a href="#"><img src="./imgs/06.jpg"></a></li><li id="6"><a href="#"><img src="./imgs/07.jpg"></a></li><li id="7"><a href="#"><img src="./imgs/08.jpg"></a></li><li id="8"><a href="#"><img src="./imgs/09.jpg"></a></li><li id="9"><a href="#"><img src="./imgs/10.jpg"></a></li> --></ul></div><div class="adv"><a href="#" class="download"></a><p>PC 安卓 iPhone WP iPad Mac 六大客户端</p></div></div></div></div></div>

三、css

.carousel_main {width: 980px;height: 100%;margin: 0 auto;
}.middle-top .carousel {position: relative;/*小圆点和箭头*/width: 100%;height: 285px;background-color: gray;
}.middle-top .carousel .carousel-box {width: 730px;height: 285px;float: left;
}.middle-top .carousel .carousel-box ul li {float: left;/* display: none; */
}.middle-top .carousel .carousel-box ul li img {width: 730px;height: auto;
}.middle-top .carousel .carousel-box ul .current {display: block;
}.middle-top .carousel .adv {position: relative;float: right;width: 250px;height: 100%;background: url("../logo/download.png") no-repeat 0 0;
}.middle-top .carousel .adv .download {position: absolute;top: 186px;left: 19px;width: 216px;height: 56px;
}.middle-top .carousel .adv .download:hover {background: url("../logo/download.png") no-repeat 0 -290px;
}.middle-top .carousel .adv p {position: absolute;bottom: 18px;left: 2px;width: 254px;height: 16px;font-size: 12px;color: #8d8d8d;text-align: center;
}/* 左右箭头 */
.middle-top .carousel .arrow-left,
.middle-top .carousel .arrow-right {position: absolute;/*绝对定位后，浏览器将其从inline转换未block,可设置宽高*/top: 40%;width: 37px;height: 63px;
}.middle-top .carousel .arrow-left span,
.middle-top .carousel .arrow-right span {display: block;position: absolute;top: 17px;width: 28px;height: 28px;
}.middle-top .carousel .arrow-left:hover,
.middle-top .carousel .arrow-right:hover {background-color: black;opacity: 0.2;
}.middle-top .carousel .arrow-left {left: 9%;
}.middle-top .carousel .arrow-left span {left: 12px;border-top: 2px solid #e1f2fe;border-left: 2px solid #e1f2fe;transform: rotate(-45deg);
}.middle-top .carousel .arrow-right {right: 9%;
}.middle-top .carousel .arrow-right span {right: 12px;border-top: 2px solid #e1f2fe;border-right: 2px solid #e1f2fe;transform: rotate(45deg);
}/* 小圆点 */
.middle-top .carousel ol {position: absolute;top: 90%;left: 35%;
}.middle-top .carousel ol li {float: left;width: 8px;height: 8px;background-color: #ccc5c9;margin-right: 10px;border-radius: 10px;
}.middle-top .carousel ol li:hover {cursor: pointer;background-color: red;
}