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

先上图：

响应式预览：

功能特性：

采用jquery 3.4.1
图片预加载
自动提取对应的内容
增加自动轮播功能
可以自行移植到主题上使用
响应式功能完善，只是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
          @泽泽好说好说
          回复

相关推荐

暂无相关推荐
获得点赞 0
文章被阅读 6,391
最后更新 19-09-10 0:57:04

目录