之前看过一个主题,忘记是谁的了,他的首页轮播特别好看,当时我还天真的以为他的轮播的背景色是自动获取的,为此还特意自己去看了下自动获取图片平均色,现在学了jq后尝试性仿写了一个,因为找不到原来主题的地址,所以大部分都是凭借自己的印象做的,有能力者可以自行移植到typecho主题上。

先上图:

响应式预览:

功能特性:

[x] 采用jquery 3.4.1
[x] 图片预加载
[x] 自动提取对应的内容
[x] 增加自动轮播功能
[x] 可以自行移植到主题上使用
[x] 响应式功能完善,只是320分辨率及以上设备

演示地址

轮播图demo

分类: JavaScript锋利的JQuery实例 标签: 暂无标签

评论

全部评论 10

  1. 泽泽
    泽泽
    Google Chrome MacOS
    手机端样式保持不变就行,左侧的文字信息其实不用展示那么多,有标题和描述文字即可:huaji:【试图让你支持移动端】
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @泽泽我有个疑问,如果这边写了media only screen and (max-width:900px) and (min-width:300px;){}这个媒体查询会不会冲突,你自己又写了一个这个分辨率内的媒体查询,虽然里面的css设置的元素不一样
      1. 泽泽
        泽泽
        Google Chrome MacOS
        @木灵鱼儿不会冲突,如果即使里面设置的元素一样,也是以后面的为准
        1. 木灵鱼儿
          木灵鱼儿
          FireFox Windows 10
          @泽泽那就还行
          1. 泽泽
            泽泽
            Google Chrome MacOS
            @木灵鱼儿之前qingyi模板的夜间模式就是重写css样式,覆盖掉默认样式:weixiao:,话说你模板能不能点击完表情就自动把表情框关掉啊,每次点完还以为没点上呢:xiaoku:
            1. 木灵鱼儿
              木灵鱼儿
              FireFox Windows 10
              @泽泽要是点多个那不是每次都要点开,不是更麻烦
  2. 泽泽
    泽泽
    Google Chrome MacOS
    很酷,不过轮播居然没有自动轮播,仿佛失去了灵魂。。。:kaixin::kaixin:
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @泽泽自动轮播还不简单,直接做个setInterval(),然后里面隔一段时间模拟点击就行了,还挺简单的,然后再做个判断,当hover状态时删除这个定时器,离开时重新设置即可
      1. 泽泽
        泽泽
        Google Chrome MacOS
        @木灵鱼儿等你写好有需要的时候直接拿:huaji:
        1. 木灵鱼儿
          木灵鱼儿
          FireFox Windows 10
          @泽泽好说好说

目录