jq自动轮播v1.2

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

先上图:

响应式预览:

功能特性:

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

演示地址

轮播图demo

0
  • 本文分类:JavaScript锋利的JQuery实例
  • 本文标签:暂无标签
  • 流行热度:已超过 222 人围观了本文
  • 发布日期:2019年09月10日 - 0时57分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

评论(10)

    泽泽

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

      木灵鱼儿

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

        泽泽

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

          木灵鱼儿

          @泽泽 那就还行

            木灵鱼儿

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

            泽泽

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

    泽泽

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

      木灵鱼儿

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

        泽泽

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

          木灵鱼儿

          @泽泽 好说好说

微信收款码
微信收款码