Day17 轮播图1

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代码生成小圆点

    最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
    平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

    相关阅读更多精彩内容

    • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
      kismetajun阅读 28,842评论 1 45
    • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
      _Yfling阅读 14,175评论 1 92
    • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
      kiddings阅读 3,310评论 0 11
    • 五月是康乃馨盛开的季节,母亲家的那盆康乃馨开的正美正艳。 母亲是位热爱生活地道的农家妇人,她向来干...
      飘_677f阅读 667评论 1 2
    • 说别人爱听的话,不说别人不爱听的话; 不要在别人背后议论别人,要也只能表扬别人; 尖锐的直接说出来,这是容易的事;...
      石板头阅读 164评论 0 0

    友情链接更多精彩内容