這篇文章主要介紹了關於基於JSON格式資料的簡單jQuery投影片外掛程式(jquery-slider)的介紹,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
jquery-slider幻燈片插件透過json資料來提供圖片地址和描述信息,同時也可以更換json數據來動態切換不同的圖片,對json數據jquery幻燈片插件相關知識感興趣的朋友一起學習吧
jquery-slider是一款基於JSON格式資料的jQuery投影片外掛程式。這張投影片透過JSON資料來提供圖片地址和描述資訊等,你可以透過更換JSON資料來動態切換不同的圖片。
使用方法
#在頁面中引入jquery和slider.js檔案和font-awesome字體圖示檔案。
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/slider.js"></script>
HTML結構
使用
作為投影片的容器,裡面放置作為前後導航按鈕的
<p class="slider" id="slider"> <button type="button" class="button button-prev"> <i class="fa fa-chevron-left" aria-hidden="true"></i> </button> <button type="button" class="button button-next"> <i class="fa fa-chevron-right" aria-hidden="true"></i> </button> </p>
CSS樣式
為投影片設定下面的CSS樣式。
.slider { width: 100%; overflow: hidden; height: 500px; position: relative; } .sliderList { position: absolute; top: 0; width: 300%; height: 100%; list-style: none; } .sliderList li { position: absolute; top: 0; bottom: 0; overflow: hidden; width: 33.333333%; height: 100%; padding: 0; margin: 0; } .sliderList li img { width: 100%; min-height: 100%; border: none; } .bulletList { position: absolute; bottom: 15px; width: 100%; margin: 0 auto; list-style: none; } .bulletList li { display: inline-block; width: 12px; height: 12px; margin: 0 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background-color: #fff; cursor: pointer; } .bulletList .bulletActive { background-color: #0b0d18; } .content { position: absolute; top: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.3); font-size: 48px; color: #fff; } .button { position: absolute; bottom: 15px; z-index: 2; display: block; width: 40px; height: 40px; box-sizing: border-box; margin: 0; padding: 0; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; background-color: rgba(5, 0, 36, 0.6); color: #fff; } .button-prev { left: 15px; } .button-next { right: 15px; }
JSON資料
該投影片的圖片和圖片描述資訊有JSON資料來提供,格式如下:
sliderJSON = [ { "imagePath": "1.jpg", "order": "2", "url": "#", "slideText": "图片描述" }, { "imagePath": "2.jpg", "order": "3", "url": "#", "slideText": "图片描述" }, { "imagePath": "3.jpg", "order": "1", "url": "#", "slideText": "图片描述" }, { "imagePath": "4.jpg", "order": "4", "url": "#", "slideText": "图片描述" }
jquery-slider投影片外掛程式的github位址為:https://github.com/eryasov/jquery-slider
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
關於jquery ajaxfileuplod 上傳檔案essyui laoding的效果
#
以上是基於JSON格式資料的簡單jQuery投影片外掛(jquery-slider)的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!