旋转轮播图

来源:转载

最近觉得手生,看到优酷官网的轮播图,所以决定写个旋转轮播图效果。
与之前自己写的轮播图最大不同的是:
之前我做轮播图有两种方式

  • 通过设置ul和li,把li排成一行,计算宽度,达到轮播图左右切换的效果
  • 把li摞在一起,设置渐变隐藏或者显示,类似慕课网官网效果
    旋转轮播图实现的原理又给我提供了一种新的思路,通过在切换中改变标签的内容和位置来达到切换效果
    实例代码:
    html
<div class="tuul"> <!--左右--> <div class="button-two"> <span class="left"></span> <span class="right"></span> </div> <!--图片--> <ul class="bg"> <li class="no0"><img src="优酷轮播图image/image1.jpg" height="410" width="970"/></li> <li class="no1"><img src="优酷轮播图image/image2.jpg" height="410" width="970"/></li> <li class="no2"><img src="优酷轮播图image/image3.jpg" height="410" width="970"/></li> <li class="no3"><img src="优酷轮播图image/image4.jpg" height="410" width="970"/></li> <li class="no4"><img src="优酷轮播图image/image5.jpg" height="410" width="970"/></li> <li class="waiting"><img src="优酷轮播图image/image6.jpg" height="410" width="970"/></li> <li class="waiting"><img src="优酷轮播图image/image7.jpg" height="410" width="970"/></li> <li class="waiting"><img src="优酷轮播图image/image8.jpg" height="410" width="970"/></li> <li class="waiting"><img src="优酷轮播图image/iamge9.jpg" height="410" width="970"/></li> </ul> <!--按钮--> <div class="button"> <ul> <li></li> <li></li> <li class="cur"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div></div>

css

*{ padding: 0; margin: 0; } .tuul{ width: 1189px; height: 340px; margin: 100px auto; position: relative; overflow: hidden; } .bg{ list-style: none; } .bg li{ position: absolute; background-color: #000; } .bg li img{ width: 100%; height: 100%; } .waiting{ display: none; } .bg li.no0{ width: 174px;height:122px;left:-116px;top:100px;z-index: 777; } .bg li.no1{ width: 356px;height:223px;left:0px;top:26px;z-index: 888; } .bg li.no2{ width: 642px;height:273px;left:274px;top:0px;z-index: 999; } .bg li.no3{ width: 356px;height:223px;left:834px;top:26px;z-index: 888; } .bg li.no4{ width: 174px;height:122px;left:1097px;top:100px;z-index: 777; } .bg li.no1 img , .bg li.no3 img{ opacity: 0.3; } /*按钮部分*/ .button{ width: 600px; height: 20px; position: absolute; top: 312px; left: 454px; } .button ul{ list-style: none; } .button li{ float: left; width: 16px; height: 16px; background-color: blue; margin-right: 10px; border-radius: 100px; cursor: pointer; } .button li.cur{ background-color:red; }

javascript

*{ padding: 0; margin: 0; } .tuul{ width: 1189px; height: 340px; margin: 100px auto; position: relative; overflow: hidden; } .bg{ list-style: none; } .bg li{ position: absolute; background-color: #000; } .bg li img{ width: 100%; height: 100%; } .waiting{ display: none; } .bg li.no0{ width: 174px;height:122px;left:-116px;top:100px;z-index: 777; } .bg li.no1{ width: 356px;height:223px;left:0px;top:26px;z-index: 888; } .bg li.no2{ width: 642px;height:273px;left:274px;top:0px;z-index: 999; } .bg li.no3{ width: 356px;height:223px;left:834px;top:26px;z-index: 888; } .bg li.no4{ width: 174px;height:122px;left:1097px;top:100px;z-index: 777; } .bg li.no1 img , .bg li.no3 img{ opacity: 0.3; } /*按钮部分*/ .button{ width: 600px; height: 20px; position: absolute; top: 312px; left: 454px; } .button ul{ list-style: none; } .button li{ float: left; width: 16px; height: 16px; background-color: blue; margin-right: 10px; border-radius: 100px; cursor: pointer; } .button li.cur{ background-color:red; }

分享给朋友:
您可能感兴趣的文章:
随机阅读: