如何制作兼容性很高的网页(主求性价比,ie9)(如何解决电脑兼容性问题)

2024-01-17    分类: 网站建设

上个月写到一些基本属性操作,这个月我主要从轮播图出发。在兼容ie9上,我写到一篇swiper3兼容ie9的文章,但是发现改版的swiper3不是想象那么好。又通过网络搜索,转为使用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>
编写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>

编写js代码:$(function(){
    $('.slick').slick({
        dots: true, //分页器
arrow:true,//左右箭头
      pauseHove: false, //鼠标悬停是否停止不动
      infinite: true,  //是否循环
      slidesToShow:3,  //一行几列
    });

});
二,案例:

案例1:首页轮播大图:
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行轮播产品图


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">国家级高新企业</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质量认证</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质量认证</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">国家级高新企业</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质量认证</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质量认证</div>
        </a>
    </li>
</ul>Js代码:

$(function () {     $('#about4').slick({         pauseHove: false,         infinite: true,         slidesToShow:3,         arrow: true     }); })
二,与swiper相比的优缺点:优点:
排序简单,便于操作与上手;
与swiper相比,Js和css包轻便,占据内存较少;
兼容性良好,兼容到ie7及以上;
容易制作动画效果,比swiper少引入一个css文件包。

缺点:
太过于复杂的效果,不易制作;
效果动画,需要自己手写较多,不太适合懒癌患者;
在某些环境下,swiper会比其好一些。如3D效果(slick.js不支持)

使用slick.js应注意的点:
css和js包应该加载正确;
Css代码上需要写上:
    .slick-slide:focus, .slick-slide a:focus {outline: none;}

原因:slick插件里进行拖拽时,会出现默认的蓝色边框.如图:
附上,一些上文未讲过的slick.js基本属性:
1.accessibility为 true时,可以通过键盘的tab键和方向键进行操作
2.adaptiveHeight为true时,每个滑块的高度与内容的高度相一致
3.autoplay为true时,可以使选项卡自动滑动
4.cssEase为'ease'时,采用css3的ease属性,即滑动的时候滑块的速度逐渐变慢
5.edgeFriction为0时,滑动到最后一张图片时,图片不能再滑动。
6.infinite为false时,不能无限循环。
7.initialSlide为1时,就从第1张滑块开始滑动。


以上就是关于如何制作兼容性很高的网页(主求性价比,ie9)(如何解决电脑兼容性问题),希望对你有帮助,更多内容关注创新互联。

当前标题:如何制作兼容性很高的网页(主求性价比,ie9)(如何解决电脑兼容性问题)
标题网址:https://www.cdcxhl.com/news24/314124.html

成都网站建设公司_创新互联,为您提供网站导航定制网站网站策划做网站ChatGPT移动网站建设

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

外贸网站建设