這篇文章主要介紹“jquery roundabout如何用”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“jquery roundabout如何用”文章能幫助大家解決問題。
網(wǎng)站建設哪家好,找成都創(chuàng)新互聯(lián)公司!專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、微信小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了哈密免費建站歡迎大家使用!
在jquery中,roundabout用于將一組靜態(tài)HTML元素轉換成可以靈活定制具有類似于轉盤旋轉效果的交互區(qū)域,是一個jQuery插件;該插件能夠將無序列表和其他嵌套的HTML結構循環(huán)展示,還包括了3D轉換、時鐘效果、點擊計數(shù)等功能,使用語法為“元素對象.roundabout({...});”。
本教程操作環(huán)境:windows10系統(tǒng)、jquery3.4.1版本、Dell G3電腦。
roundabout是一個jQuery插件,很容易將無序列表和其他嵌套的HTML結構循環(huán)展示,很強大的自定義功能。里面自帶了好多例子如3D轉換,時鐘效果、點擊計數(shù)、圖像循環(huán)顯示
Roundabout是一個jQuery插件,能夠將一組靜態(tài)HTML元素轉換成可以靈活定制具有類似于轉盤旋轉效果的交互區(qū)域。有多種旋轉形狀可供選擇。
示例如下:
引用樣式文件
js腳本文件
Html
js
$(document).ready(function() { $('#featured-area ul').roundabout({ easing: 'easeOutInCirc', duration: 600, // 運動速度 autoplay: true, // 自動播放 autoplayDuration: 1500, // 自動播放的時間 minOpacity: 0, //最小的透明度 maxOpacity: 1, //最大的透明度 reflect: false, // 為true時是從左向右移動,為false從右向左移動 startingChild: 3, // 默認的顯示第幾張圖片 autoplayInitialDelay: 5000, // 從第幾秒時,開始自動播放(默認毫秒)開始的第一次管用 autoplayPauseOnHover: true, // 鼠標移入元素內是否自動播放,為true不播放,false還自動播放 enableDrag: true // 在移動端可以拖拽播放 }); });
關于“jquery roundabout如何用”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識,可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。