您的位置 首页 javascript教程

js如何实现动态无缝轮播

首先,我们来看一下效果图:

a7c69d3417fd9276b7ab8efeb946cfe.png

效果图是这样的,我们需要定义一个div,并放入三张图片,还需要左右两个按钮,以及底下三个按钮三个div。

HTML代码:

<div class="banner" id="banner">
    <ul class="clear" >
      <li style="left:0" ><img src="k1.jpg"></li>
      <li style="left:100%" ><img src="k-2.jpg"></li>
      <li style="left:100%"><img src="k-3.jpg"></li>
    </ul>
    <div class="pageNav"></div>
    <div class="leftBtn"></div>
    <div class="rightBtn"></div>
</div>

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

网站地图