更新于

jq自动轮播v1.2

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

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

先上图:

响应式预览:

功能特性:

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

演示地址

轮播图demo

已有 10 条评论

    泽泽
    泽泽

    来自 Mac-Chrome 的网友发布于 305 天前

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

      来自 Windows10-火狐浏览器 的网友发布于 305 天前

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

        来自 Mac-Chrome 的网友发布于 305 天前

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

          来自 Windows10-火狐浏览器 的网友发布于 305 天前

          @泽泽 那就还行
            泽泽
            泽泽

            来自 Mac-Chrome 的网友发布于 305 天前

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

              来自 Windows10-火狐浏览器 的网友发布于 305 天前

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

    泽泽
    泽泽

    来自 Mac-Chrome 的网友发布于 306 天前

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

      来自 Windows10-火狐浏览器 的网友发布于 306 天前

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

        来自 Mac-Chrome 的网友发布于 306 天前

        @木灵鱼儿 等你写好有需要的时候直接拿:huaji:
          木灵鱼儿
          木灵鱼儿

          来自 Windows10-火狐浏览器 的网友发布于 306 天前

          @泽泽 好说好说

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有391条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局

购买