专栏首页前端知识分享第21天:京东页面轮播图

第21天:京东页面轮播图

一、轮播图小圆点

HTML代码
1 <ul class="circle"><!--小圆点-->
2             <li class="current">1</li>
3             <li>2</li>
4             <li>3</li>
5             <li>4</li>
6             <li>5</li>
7             <li>6</li>
8 </ul>

二、轮播图制作

HTML代码
 1 <div class="slider">
 2         <a href="#"><img src="images/slider1.jpg" alt=""></a>
 3         <ul class="circle"><!--小圆点-->
 4             <li class="current">1</li>
 5             <li>2</li>
 6             <li>3</li>
 7             <li>4</li>
 8             <li>5</li>
 9             <li>6</li>
10         </ul>
11         <div class="arrow"><!--左右两个三角按钮-->
12             <a href="javascript:;" class="arrow_l"><</a>
13             <a href="javascript:;" class="arrow_r">></a>
14         </div>

CSS代码

京东页面完成情况:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第72天:jQuery实现下拉菜单

    1、块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度

    半指温柔乐
  • 第42天:焦点图

    半指温柔乐
  • 第68天:原型prototype方法

    构造函数有一个prototype属性,指向实例对象的原型对象。通过同一个构造函数实例化的多个对象具有相同的原型对象。经常使用原型对象来实现继承

    半指温柔乐
  • vue 的上拉加载,下拉刷新(基于better-scrol)

    我先吐槽下,这个vue 的上拉刷新前几次都是有现成的框架,来做的,这个better-scroll的我是真的一开始没有看懂,可能是自己太笨了吧,不过 写这个的真的...

    我乃小神神
  • Cypress学习12-父子元素定位

    若要在元素中获取所有下一个同级DOM元素,直到另一个元素,请使用.next until()命令。

    上海-悠悠
  • PHP之多条件混合筛选功能的实现方法

    以上这篇PHP之多条件混合筛选功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考。

    砸漏
  • <li>标签

    <li> 标签定义列表,<li> 元素通常与有序列表 (<ol>) 和无序列表 (<ul>) 一起运用。

    Html5知典
  • Pug迭代

    听着music睡
  • pyhon 列表的增删改查

    py3study
  • 第3章 排列清单控制标记

    排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另外一种列表。对于概况因特网上的内容,列表特别重要。

    py3study

扫码关注云+社区

领取腾讯云代金券