最近觉得手生,看到优酷官网的轮播图,所以决定写个旋转轮播图效果。
与之前自己写的轮播图最大不同的是:
之前我做轮播图有两种方式
- 通过设置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"><