上個(gè)月寫(xiě)到一些基本屬性操作，這個(gè)月我主要從輪播圖出發(fā)。在兼容ie9上，我寫(xiě)到一篇swiper3兼容ie9的文章，但是發(fā)現(xiàn)改版的swiper3不是想象那么好。又通過(guò)網(wǎng)絡(luò)搜索，轉(zhuǎn)為使用slick.js。
一,slick.js使用方法：
引用文件：<link rel="stylesheet" href="style/slick.css">
<script src="script/jquery.min.js"></script>
<script src="script/slick.min.js"></script>
編寫(xiě)html代碼：<div class="slick">
    <div><a href="http://www.szfangwei.cn"><img src="images/1.jpg" alt=""></a></div>
    <div><a href="http://www.szfangwei.cn"><img src="images/2.jpg" alt=""></a></div>
    <div><a href="http://www.szfangwei.cn"><img src="images/3.jpg" alt=""></a></div>
    <div><a href="http://www.szfangwei.cn"><img src="images/4.jpg" alt=""></a></div>
    <div><a href="http://www.szfangwei.cn"><img src="images/5.jpg" alt=""></a></div>
</div>

編寫(xiě)js代碼：$(function(){
    $('.slick').slick({
        dots: true, //分頁(yè)器
arrow:true,//左右箭頭
      pauseHove: false, //鼠標(biāo)懸停是否停止不動(dòng)
      infinite: true,  //是否循環(huán)
      slidesToShow:3,  //一行幾列
    });

});
二，案例：

案例1：首頁(yè)輪播大圖：
html代碼：
 <div class="banner1" id="indexbanner1">
  <a href="http://www.szfangwei.cn"><img src="images/1.jpg" width="100%"/> </a>
<a href="http://www.szfangwei.cn"><img src="images/1.jpg" width="100%"/> </a>
<a href="http://www.szfangwei.cn"><img src="images/1.jpg"  width="100%"/> </a>
</div>
基本js代碼：  $('.banner1').slick({
        swipe: true,
        arrows: false,
        dots: true,
        fade: true,
        cssEase: 'linear',
        speed: 500,
        autoplaySpeed: 2500,
        autoplay: true,
        pauseHove: false,
        infinite: true

});案例2:3行輪播產(chǎn)品圖

：
html代碼：
<ul id="about4">
    <li class="each-item">
        <a href="http://www.szfangwei.cn" class="picture" >
                <img src="images/01.jpg" width="340" height="440"/>
            <div class="lans">國(guó)家級(jí)高新企業(yè)</div>
        </a>
    </li>
    <li class="each-item">

        <a href="http://www.szfangwei.cn" class="picture" >
                <img src="images/03.jpg" width="340" height="440"/>
            <div class="lans">ISO9001質(zhì)量認(rèn)證</div>
        </a>
    </li>
    <li class="each-item">
        <a href="http://www.szfangwei.cn" class="picture" >
                <img src="images/03.jpg" width="340" height="440"/>
            <div class="lans">ISO9001質(zhì)量認(rèn)證</div>
        </a>
    </li>
    <li class="each-item">
        <a href="http://www.szfangwei.cn" class="picture" >
                <img src="images/01.jpg" width="340" height="440"/>
            <div class="lans">國(guó)家級(jí)高新企業(yè)</div>
        </a>
    </li>
    <li class="each-item">
        <a href="http://www.szfangwei.cn" class="picture" >
                <img src="images/03.jpg" width="340" height="440"/>
            <div class="lans">ISO9001質(zhì)量認(rèn)證</div>
        </a>
    </li>
    <li class="each-item">
        <a href="http://www.szfangwei.cn" class="picture" >
                <img src="images/03.jpg" width="340" height="440"/>
            <div class="lans">ISO9001質(zhì)量認(rèn)證</div>
        </a>
    </li>
</ul>Js代碼：

$(function () {     $('#about4').slick({         pauseHove: false,         infinite: true,         slidesToShow:3,         arrow: true     }); })
二，與swiper相比的優(yōu)缺點(diǎn)：優(yōu)點(diǎn)：
排序簡(jiǎn)單，便于操作與上手；
與swiper相比，Js和css包輕便，占據(jù)內(nèi)存較少；
兼容性良好，兼容到ie7及以上；
容易制作動(dòng)畫(huà)效果，比swiper少引入一個(gè)css文件包。

缺點(diǎn)：
太過(guò)于復(fù)雜的效果，不易制作；
效果動(dòng)畫(huà)，需要自己手寫(xiě)較多，不太適合懶癌患者；
在某些環(huán)境下，swiper會(huì)比其好一些。如3D效果（slick.js不支持）

使用slick.js應(yīng)注意的點(diǎn)：
css和js包應(yīng)該加載正確；
Css代碼上需要寫(xiě)上：
    .slick-slide:focus, .slick-slide a:focus {outline: none;}

原因：slick插件里進(jìn)行拖拽時(shí)，會(huì)出現(xiàn)默認(rèn)的藍(lán)色邊框.如圖：
附上，一些上文未講過(guò)的slick.js基本屬性：
1.accessibility為 true時(shí)，可以通過(guò)鍵盤的tab鍵和方向鍵進(jìn)行操作
2.adaptiveHeight為true時(shí)，每個(gè)滑塊的高度與內(nèi)容的高度相一致
3.autoplay為true時(shí)，可以使選項(xiàng)卡自動(dòng)滑動(dòng)
4.cssEase為'ease'時(shí)，采用css3的ease屬性，即滑動(dòng)的時(shí)候滑塊的速度逐漸變慢
5.edgeFriction為0時(shí)，滑動(dòng)到最后一張圖片時(shí)，圖片不能再滑動(dòng)。
6.infinite為false時(shí)，不能無(wú)限循環(huán)。
7.initialSlide為1時(shí)，就從第1張滑塊開(kāi)始滑動(dòng)。

以上就是關(guān)于如何制作兼容性很高的網(wǎng)頁(yè)（主求性價(jià)比，ie9）(如何解決電腦兼容性問(wèn)題)，希望對(duì)你有幫助，更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。

當(dāng)前標(biāo)題：如何制作兼容性很高的網(wǎng)頁(yè)（主求性價(jià)比，ie9）(如何解決電腦兼容性問(wèn)題)
標(biāo)題網(wǎng)址：http://chinadenli.net/news24/314124.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、定制網(wǎng)站、網(wǎng)站策劃、做網(wǎng)站、ChatGPT、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)