Web前端,王者荣耀轮播区域

轮播区域分为2个部分

第一个部分为ul li图片

第二部分为标题部分无序列表完成

由于要获得移入标题控制图片转换,所以引入jQuery,同过入口函数获取slidebox,根据jQuery,hd标题-控制图片,bd是图片主体,autoplay自动轮播,effect:leftLoopx向左滚动

实现效果

公告区分为2个层

第一层为标题title区域,使用无序列表ul li

第二层为内容区域使用嵌套ul li,第一行li为内容的标题,所以单加个类名,设置字体大小,字体颜色

内容左侧的热门是给了一个红色宽为1像素的圆角边框(border-radious)

重点:    /* 隐藏 */

  overflow: hidden;

    /* 移出变为... */

    text-overflow: ellipsis;

    /* 超出不换行 */

    white-space: nowrap;

需要得到移入标题后,随之第二层的内容随之变化,引用jQuery,入口函数获取slidetextbox,

这里·hd为标题,标题控制内容,bd则为内容主体  effect:leftLoop向左滚动实现效果

王者官网原图

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值