作者 主題: 多圖顯示的首頁廣告圖片輪播  (閱讀 3047 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
多圖顯示的首頁廣告圖片輪播
« 於: 十一月 23, 2016, 07:04:30 下午 »
在手機中使用的輪圖片不適合太大張,才會影響載入速度,因此推薦 owl.carousel 給大家,他可以一次展示多張圖,每張圖都有自己的連結,很適合作商品展示,用法也很簡單:
1、先在 index.php 的最後加入
代碼: [選擇]
function get_flash_xml()
{
    $flashdb = array();
    if (file_exists(ROOT_PATH . DATA_DIR . '/flash_data.xml'))
    {

        // 兼容v2.7.0及以前版本
        if (!preg_match_all('/item_url="([^"]+)"\slink="([^"]+)"\stext="([^"]*)"\ssort="([^"]*)"/', file_get_contents(ROOT_PATH . DATA_DIR . '/flash_data.xml'), $t, PREG_SET_ORDER))
        {
            preg_match_all('/item_url="([^"]+)"\slink="([^"]+)"\stext="([^"]*)"/', file_get_contents(ROOT_PATH . DATA_DIR . '/flash_data.xml'), $t, PREG_SET_ORDER);
        }

        if (!empty($t))
        {
            foreach ($t as $key => $val)
            {
                $val[4] = isset($val[4]) ? $val[4] : 0;
                $flashdb[] = array('src'=>$val[1],'url'=>$val[2],'text'=>$val[3],'sort'=>$val[4]);
            }
        }
    }
    return $flashdb;
}

2、把 index_ad.lbi 內容改為(先備份)
代碼: [選擇]
<link rel="stylesheet" href="themes/模板目錄/css/owl.carousel.min.css"></link>
<link rel="stylesheet" href="themes/模板目錄/css/owl.theme.default.min.css"></link>
<script src='themes/模板目錄/js/jquery.min.js'></script>
<script src="themes/模板目錄/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>
    <script>
    $(".owl-carousel").owlCarousel({
    items: 4, // 一次顯示幾個項目
    loop: true, // 是否無限循環
    margin: 10, // 與右邊圖片的距離
    nav: true, // 導航文字
    autoplay: true, // 自動輪播
    autoplayTimeout: 2000, // 切換時間
    autoplayHoverPause: true, // 滑鼠經過時暫停
    navText : ['&laquo;上一張','下一張&raquo;'],     //HTML導航文字
    dots: false,     //顯示圓點導航按鈕
    smartSpeed: 500, //換圖速度
    /*
items     Type: Number     Default: 3     在屏幕中可見的旋轉木馬項
margin     Type: Number     Default: 0     旋轉木馬項的margin-right值,單位像素
loop     Type: Boolean     Default: false     是否無限循環,會複製第一項和最後一項來製作無限循環的錯覺
center     Type: Boolean     Default: false     旋轉木馬項居中。在奇數和偶數項中都可以很好的工作
mouseDrag     Type: Boolean     Default: true     是否可以使用鼠標拖拽
touchDrag     Type: Boolean     Default: true     是否可以觸摸拖拽
pullDrag     Type: Boolean     Default: true     Stage pull to edge.
freeDrag     Type: Boolean     Default: false     Item pull to edge
stagePadding     Type: Number     Default: 0     Stage上的Padding left和Padding right(可以看到相鄰的項)
merge     Type: Boolean     Default: false     合併旋轉木馬項。Looking for data-merge='{number}' inside item..
mergeFit     Type: Boolean     Default: true     如果屏幕比旋轉木馬項小,使旋轉木馬項適合屏幕大小
autoWidth     Type: Boolean     Default: false     設置非網格內容。嘗試在div上使用width樣式
startPosition     Type: Number/String     Default: 0     開始點或URL Hash字符串,如:'#id'
URLhashListener     Type: Boolean     Default: false     監聽url hash 的變化。必須在旋轉木馬項上設置data-hash屬性
nav     Type: Boolean     Default: false     顯示ext/prev按鈕
navRewind     Type: Boolean     Default: true     跳轉到前一項或後一項
navText     Type: Array     Default: ['prev','next']     HTML箭頭導航
slideBy     Type: Number/String     Default: 1     Navigation slide by x. 'page' string can be set to slide by page.
dots     Type: Boolean     Default: true     顯示圓點導航按鈕
dotsEach     Type: Number/Boolean     Default: false     每多少個項顯示一個圓點導航按鈕
dotData     Type: Boolean     Default: false     使用data-dot的內容
lazyLoad     Type: Boolean     Default: false     是否懶加載圖片。data-src和data-src-retina為高分辨率。如果元素不是<img>會設置為元素的內聯背景圖像。
lazyContent     Type: Boolean     Default: false     lazyContent選項只在測試版中有,發行版中已經被刪除。
autoplay     Type: Boolean     Default: false     旋轉木馬是否自動播放
autoplayTimeout     Type: Number     Default: 5000     旋轉木馬自動播放的時間間隔
autoplayHoverPause     Type: Boolean     Default: false     是否在鼠標滑過時停止自動播放
smartSpeed     Type: Number     Default: 250     速度計算
fluidSpeed     Type: Boolean     Default: Number     速度計算
autoplaySpeed     Type: Number/Boolean     Default: false     是新密碼自動播放的速度
navSpeed     Type: Number/Boolean     Default: false     旋轉木馬導航的速度
dotsSpeed     Type: Boolean     Default: Number/Boolean     分頁的速度
dragEndSpeed     Type: Number/Boolean     Default: false     Drag end speed
callbacks     Type: Boolean     Default: true     是否允許回調函數
responsive     Type: Object     Default: empty object     包含responsive選項的對象。設置為flase取消responsive能力。
responsiveRefreshRate     Type: Number     Default: 200     Responsive的刷新頻率
responsiveBaseElement     Type: DOM element     Default: window     可以設置在任何DOM元素上。如果你關心不支持響應式的瀏覽器(如IE8),可以在包裹容器中使用該屬性。
responsiveClass     Type: Boolean     Default: false     可選的輔助class。添加owl-reponsive-和breakpoint class到主元素上。可以在給定breakpoint的元素上設置內容樣式。
video     Type: Boolean     Default: false     是否允許添加YouTube/Vimeo視頻。
videoHeight     Type: Number/Boolean     Default: false     設置視頻的高度。
videoWidth     Type: Number/Boolean     Default: false     設置視頻的寬度。
animateOut     Type: String/Bolean     Default: false     CSS3 animation out.
animateIn     Type: String/Bolean     Default: false     CSS3 animation in.
fallbackEasing     Type: String     Default: swing     Easing for CSS2 $.animate.
info     Type: Function     Default: false     獲取基本信息的回調函數(當前的 item/pages/widths) 。Info函數的第二個參數是Owl DOM元素的對象引用。
nestedItemSelector     Type: String/Class     Default: false     當owl元素嵌套在某些很深的DOM結構中時使用該參數。在class名字前面不要使用.號。
itemElement     Type: String     Default: div     owl-item的DOM元素類型。
stageElement     Type: String     Default: div     owl-stage.的DOM元素類型。
navContainer     Type: String/Class/ID/Bolean     Default: false     設置自定義的導航容器class
dotsContainer     Type: String/Class/ID/Bolean     Default: false     設置自定義的導航容器class
*/
    })
    </script>

3、上傳附件至themes/模板目錄
themes/模板目錄/需改為實際模板資料夾名稱
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php