基于jQuery的自适应三屏图片滚动展示的代码

jQuery的自适应三屏图片滚动展示是一种基于jQuery的图片滚动展示技术，它可以根据不同的屏幕大小自动调整图片的显示，从而使图片在任何屏幕上都能得到最佳的显示效果。

使用方法

• 首先，需要准备三张不同尺寸的图片，分别用于小屏幕、中屏幕和大屏幕的显示；
• 然后，在页面中引入jQuery库，并将三张图片放置到页面中，并为每张图片添加相应的id；
• 接着，需要添加一段JavaScript代码，该代码将根据屏幕大小，自动判断使用哪张图片，并将图片显示在页面中；
• 最后，需要添加一段jQuery代码，该代码将根据屏幕大小，自动更换图片，从而实现自适应三屏图片滚动展示的效果。

JavaScript代码示例

$(window).resize(function(){
    var width = $(window).width();
    if(width <= 800){
        $("#img1").show();
        $("#img2").hide();
        $("#img3").hide();
    }else if(width > 800 && width <= 1200){
        $("#img1").hide();
        $("#img2").show();
        $("#img3").hide();
    }else{
        $("#img1").hide();
        $("#img2").hide();
        $("#img3").show();
    }
});

jQuery代码示例

$(function(){
    var index = 0;
    var imgNum = $("#imgList li").length;
    var imgWidth = $("#imgList li").width();
    var moveDistance = imgWidth * imgNum;
    var moveTime = 500;
    var intervalTime = 3000;
    var autoTimer = null;

    //设置图片列表宽度
    $("#imgList").width(moveDistance);

    //自动轮播
    function autoMove(){
        if(index < imgNum - 1){
            index++;
        }else{
            index = 0;
        }
        $("#imgList").animate({left: -index * imgWidth}, moveTime);
    }
    autoTimer = setInterval(autoMove, intervalTime);
});