jQuery制作全屏宽度固定高度轮播图(实例讲解)-前端开发

下面我会详细讲解“jQuery制作全屏宽度固定高度轮播图(实例讲解)”的完整攻略。

下面我会详细讲解“jQuery制作全屏宽度固定高度轮播图(实例讲解)”的完整攻略。

1. 确定轮播图的基本结构

首先，我们需要确定轮播图的基本结构。本例中，我们使用ul标签将图片放在同一个列表内，并设置其宽度和高度。具体代码如下：

<div class="slider-wrapper">
    <ul class="slider">
        <li><img src="img1.jpg" alt="img1"></li>
        <li><img src="img2.jpg" alt="img2"></li>
        <li><img src="img3.jpg" alt="img3"></li>
    </ul>
</div>

<style>
    .slider-wrapper {
        width: 100%;
        height: 500px;
        overflow: hidden;
        position: relative;
    }
    .slider {
        width: 300%;
        height: 500px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .slider li {
        float: left;
        height: 500px;
        width: 33.33%;
        list-style: none;
    }
    .slider img {
        width: 100%;
        height: 100%;
    }
</style>

其中，.slider-wrapper包裹着整个轮播图，并设置其宽度、高度、溢出等属性；.slider为图片列表，并设置其宽度、高度、定位等属性；.slider li为每张图片的外层包裹元素，设置其宽度、高度、浮动等属性；.slider img为每张图片，设置其宽度、高度等属性，使其填满其容器。

2. 添加轮播图切换的JavaScript代码

接着，我们需要编写JavaScript代码来实现轮播图的切换。我们可以先设置图片索引值index，并在一个循环定时器内进行切换。具体代码如下：

<script>
    var index = 0; // 设置图片索引值
    var slider = $('.slider');
    var sliderItem = $('.slider li');
    var length = sliderItem.length; // 图片的数量

    setInterval(function() {
        index++;
        if(index >= length) {
            index = 0;
        }
        var targetLeft = index * (-100/3) + '%'; // 根据index计算targetLeft
        slider.animate({'left': targetLeft}, 500); // 使用animate()方法改变left值完成切换
    }, 2000); // 切换时间间隔为2s
</script>

其中，index为图片索引值，初始化为0；slider为图片列表元素；sliderItem为每个图片的元素；length为图片的数量。在定时器内，先将index加1，然后判断index是否已经达到图片数量，如果是则将其重置为0，接着将targetLeft设为当前index所对应的targetLeft值，并使用animate()方法实现轮播图的动画切换。最后，设定定时器时间间隔为2s，即每隔2s轮播切换一次。

3. 响应式设计

最后，我们需要进行响应式设计，使轮播图适应不同分辨率的屏幕。本例中，我们可以使用@media查询来实现。具体代码如下：

@media only screen and (max-width: 768px) {
    .slider-wrapper {
        height: 300px;
    }
    .slider li {
        width: 50%;
        height: 300px;
    }
}

其中，@media只针对宽度小于768px的屏幕进行响应式设计，将.slider-wrapper的高度设为300px，将.slider li的宽度设为50%。

示例说明

示例1：

假设我们有三张图片，宽度分别为800px，700px和900px，我们需要将它们以全屏宽度固定高度的方式进行轮播。此时，我们可以按照上述方法编写代码，最终效果为：三张图片轮流出现在全屏幕内，切换时间间隔为2s，同时在屏幕宽度小于768px时，切换为占50%宽度的轮播图。

示例2：

假设我们需要在轮播图上添加前进和后退按钮，来让用户手动控制图片切换。此时，我们可以在HTML代码中添加按钮元素，并为其绑定click事件，具体代码如下：

<div class="slider-wrapper">
    <ul class="slider">
        <li><img src="img1.jpg" alt="img1"></li>
        <li><img src="img2.jpg" alt="img2"></li>
        <li><img src="img3.jpg" alt="img3"></li>
    </ul>
    <div class="prev"></div>
    <div class="next"></div>
</div>

<script>
    var index = 0;
    var slider = $('.slider');
    var sliderItem = $('.slider li');
    var length = sliderItem.length;
    var prevBtn = $('.prev');
    var nextBtn = $('.next');

    prevBtn.on('click', function() {
        if(index == 0) {
            index = length - 1;
        } else {
            index--;
        }
        var targetLeft = index * (-100/3) + '%';
        slider.animate({'left': targetLeft}, 500);
    });

    nextBtn.on('click', function() {
        if(index == length - 1) {
            index = 0;
        } else {
            index++;
        }
        var targetLeft = index * (-100/3) + '%';
        slider.animate({'left': targetLeft}, 500);
    });

    setInterval(function() {
        index++;
        if(index >= length) {
            index = 0;
        }
        var targetLeft = index * (-100/3) + '%';
        slider.animate({'left': targetLeft}, 500);
    }, 2000); 
</script>

其中，我们在.slider-wrapper的内部添加了.prev和.next两个div元素，分别表示向前和向后的按钮，并在JS代码中添加拥有click事件的prevBtn和nextBtn，并在响应函数中对index进行加减操作。最后厘余定时器内同样实现自动切换。

以上是本例的完整攻略及两个示例说明。