Day17 轮播图1

2018-07-30  本文已影响0人  会会_3a05

Jquerty 轮播图

例如:

margin: 0;

padding: 0

ul,ol{

list-style: none;

}

/*消除图片底部3像素距离*/

img{

vertical-align: top;

}

  • < img src="images/1.jpg" width="500" height="200">
  • < img src="images/2.jpg" width="500" height="200">
  • < img src="images/3.jpg" width="500" height="200">
  • < img src="images/4.jpg" width="500" height="200">
  • < img src="images/5.jpg" width="500" height="200">
  • 展示效果如图:

    再此之前 我们要明白,小圆点 1 2 3 并不是写死的,它是根据ul li中的图片张数来决定的 ,所以 我们要先把div中ol li中的代码去掉

    要实现无缝滚动 就需要多一张图片才行 ,即克隆第一张图片,放到最后面。此时css布局保留,div中只剩下:

    ```

  • < img src="images/1.jpg" width="500" height="200">
  • < img src="images/2.jpg" width="500" height="200">
  • < img src="images/3.jpg" width="500" height="200">
  • < img src="images/4.jpg" width="500" height="200">
  • < img src="images/5.jpg" width="500" height="200">
  • 此时我们用js代码生成小圆点

    上一篇下一篇

    猜你喜欢

    热点阅读