0%

jq自动轮播v1.2

发布于 / 分类: JavaScript,锋利的JQuery,实例 / 已有 10 条评论 / 阅读量 596

最后更新于 2019年09月10日

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

先上图:

响应式预览:

功能特性:

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

演示地址

轮播图demo

select下拉列表移动 网页换肤(cookie)
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao
  1. 泽泽

    发表于:
    来自 Google Chrome 76 in mac

    很酷,不过轮播居然没有自动轮播,仿佛失去了灵魂。。。:kaixin::kaixin:

    1. 木灵鱼儿

      发表于:
      来自 FireFox 68 in windows 10
      @泽泽

      自动轮播还不简单,直接做个setInterval(),然后里面隔一段时间模拟点击就行了,还挺简单的,然后再做个判断,当hover状态时删除这个定时器,离开时重新设置即可

      1. 泽泽

        发表于:
        来自 Google Chrome 76 in mac
        @木灵鱼儿

        等你写好有需要的时候直接拿:huaji:

        1. 木灵鱼儿

          发表于:
          来自 FireFox 68 in windows 10
          @泽泽

          好说好说

  2. 泽泽

    发表于:
    来自 Google Chrome 76 in mac

    手机端样式保持不变就行,左侧的文字信息其实不用展示那么多,有标题和描述文字即可:huaji:【试图让你支持移动端】

    1. 木灵鱼儿

      发表于:
      来自 FireFox 68 in windows 10
      @泽泽

      我有个疑问,如果这边写了media only screen and (max-width:900px) and (min-width:300px;){}这个媒体查询会不会冲突,你自己又写了一个这个分辨率内的媒体查询,虽然里面的css设置的元素不一样

      1. 泽泽

        发表于:
        来自 Google Chrome 76 in mac
        @木灵鱼儿

        不会冲突,如果即使里面设置的元素一样,也是以后面的为准

        1. 木灵鱼儿

          发表于:
          来自 FireFox 68 in windows 10
          @泽泽

          那就还行

          1. 泽泽

            发表于:
            来自 Google Chrome 76 in mac
            @木灵鱼儿

            之前qingyi模板的夜间模式就是重写css样式,覆盖掉默认样式:weixiao:,话说你模板能不能点击完表情就自动把表情框关掉啊,每次点完还以为没点上呢:xiaoku:

            1. 木灵鱼儿

              发表于:
              来自 FireFox 68 in windows 10
              @泽泽

              要是点多个那不是每次都要点开,不是更麻烦