25、ECSHOP + Bootstrap3 製作多圖滾動首頁主廣告
2017-03-03
512
相關文章
使用依賴 jquery 的 owl.carousel 插件為網站的首頁主廣告,特點是可以多圖展示並輪播,使用不同寬度的圖片或視頻也不會變形,因為圖片不需太大,可加快手機載入速度,你也可以調用網站的促銷商品...
index_ad.lbi :

點擊圖片可以放大檢視

點擊圖片可以放大檢視
index_ad.lbi :
<link href="{$tpl}css/owl.carousel.min.css" rel="stylesheet" type="text/css" media="all" /> <link href="{$tpl}css/owl.theme.default.min.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="{$tpl}js/owl.carousel.min.js"></script> <div class="owl-carousel"> <!--{foreach from=get_flash_xml() item=playerdb name=get_flash_xml}--> <div class="item"> <a href="{$playerdb.url}" title="{$playerdb.text}"><img src="{$playerdb.src}" /></a> </div> <!--{/foreach}--> </div> <style type="text/css"> .owl-dots { text-align: right; } </style> <script type="text/javascript"> $(".owl-carousel").owlCarousel({ items: 3, // 一次顯示幾個項目 loop: true, // 是否無限循環 margin: 10, // 與右邊圖片的距離 nav: false, // 導航文字 autoplay: true, // 自動輪播 autoplayTimeout: 1000, // 切換時間 autoplayHoverPause: true, // 滑鼠經過時暫停 dots: true, //顯示圓點導航按鈕 smartSpeed: 800, //換圖速度 }); </script>點擊圖片可以放大檢視

點擊圖片可以放大檢視

點擊圖片可以放大檢視

如果你對25、ECSHOP + Bootstrap3 製作多圖滾動首頁主廣告有任何問題請到討論區發帖。