目前位置: 首頁 > ECSHOP響應式模版 > 25、ECSHOP + Bootstrap3 製作多圖滾動首頁主廣告

25、ECSHOP + Bootstrap3 製作多圖滾動首頁主廣告 超大 稍大 微大

ECSHOP 繁體中文版-響應式模板-虛擬主機::ECSHOP2.7.3繁體中文全支援-原來如此 發表於: 2017-03-03
使用依賴 jquery 的 owl.carousel 插件為網站的首頁主廣告,特點是可以多圖展示並輪播,使用不同寬度的圖片或視頻也不會變形,因為圖片不需太大,可加快手機載入速度,你也可以調用網站的促銷商品...
index.dwt :
<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>


只有本站虛擬主機會員才能對文章發表問題
如果你是本站虛擬主機會員請先至會員中心首頁綁定主機帳號
其他會員請至留言板提問!