整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
圖1
圖2
圖3
就愛UI - 分享UI設計的點點滴滴
信很多前端開發人員都會遇到boss讓修改checkbox和radio樣式，畢竟自帶的樣式太丑了。后來我們發現修改自帶樣式并不是那么容易，最后直接使出殺手锏——點擊之后替換圖片。
今天教大家一種方法，不用替換圖片，隨意修改樣式。還是先看效果圖：
先講一下原理：將input和label綁定，我們會發現，點擊label的時候也會觸發點擊input事件，所以秘訣就是把input隱藏掉，向label添加偽元素 :before替代前面的容器，：after替代選中之后的標志。通過修改:before和:after樣式，就能實現各式各樣的單選復選框了。
一、修改普通復選框樣式
廢話不多說，直接上代碼：
上面代碼中“+”代表選中該元素后一個兄弟元素，“：checked”表示選中狀態。
二、修改單選框樣式
這里要注意一下，單選范圍內所有的name要保持一致。
三、自定義其他樣式
這個舉個實現開關性質的樣式提供參考，更多樣式，需要自己去探索發現。
四、總結
以后再也不用擔心修改單選復選框樣式問題了，樣式想怎么改就怎么改。給大家留個問題：input和label綁定的樣式還有很多，舉一反三，思索一下還能應用在哪方面？
有問題，歡迎隨時聯系我，我是竹風，希望與各位前端愛好者共同學習交流！
圖片切換在目前的web或者app應用中早已不是新鮮事，尤其是在App首頁頂部推薦中會經常用到，今天就給大家推薦幾款Github上開源的圖片滑動切換庫。
slick一款功能異常強大的圖片切換效果庫，支持各種動畫效果和樣式，運行效果如下圖所示。
slick運行效果
目前slick在Github上的信息如下圖所示。
github上的信息
目前star數已經達到了18k+，可以說是非常火熱的一個開源庫了。
安裝
可以通過npm或者bower進行安裝。
安裝
實現
首先看下html代碼，是一個很簡單的div代碼塊。
html代碼
然后是js代碼進行調用，其中包含一些常用的配置。
js代碼調用
slick庫唯一的缺點就是依賴于jQuery，現在已經沒人喜歡用jQuery了，希望slick庫能脫離jQuery，那樣就會更受歡迎了。
swipe是一款輕量級的圖片滑動切換的庫，對移動端表現出完美的支持，運行效果如下。
swipe插件運行效果
目前swipe在Github上的信息如下所示。
swipe在github上的信息
安裝
swipe同樣支持npm和bower安裝的方式。
安裝
使用
使用swipe插件也非常的簡單，首先定義html元素。
html元素
然后定義CSS樣式。
CSS樣式
最后通過js代碼進行調用。
js代碼調用
今天這篇文章給大家總結了兩個非常實用的圖片滑動切換插件，分別支持PC端和移動端，歡迎自己動手體驗。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
