JS实现焦点图轮播效果的方法详解

焦点图（Carousel）是一个在网页中展示图片或其他内容的流行方式，焦点图的特点是在页面的顶部或中央用封面的图片展示网站重点内容，引导用户进入网站的内页。在网页设计中，焦点图常常是网页布局中非常重要的部分，所以实现一个好的焦点图轮播效果至关重要。

在本文中，我将从JavaScript实现焦点图轮播效果的角度，为大家介绍焦点图轮播效果实现的详细步骤。

1. 实现焦点图轮播效果的基本思路

想要实现焦点图轮播效果，我们需要通过JavaScript来操作DOM，动态改变图片的显示。具体而言，我们需要完成以下三个步骤：

切换图片：每隔一段时间，自动轮换显示下一张照片。
实现焦点切换：同时切换焦点，显示当前图片的位置信息。
手动控制：鼠标悬停或者点击相应的按钮，切换图片。

在实现这三个步骤的过程中，我们需要熟悉JavaScript的一些基本操作，包括：DOM操作、定时器的使用、事件绑定等。

2. 示例1：基于原生JS的焦点图轮播效果实现

在这个示例中，我们使用纯JavaScript来实现焦点图轮播效果。基本思路是通过定时器切换图片，同时需要实现焦点切换和手动控制的功能。

<html>
<head>
    <meta charset="utf-8">
    <title>JS实现焦点图轮播效果样例</title>
    <style>
        .slider{width:600px;height:400px;margin:0 auto;overflow:hidden;position:relative;}
        .slider ul{position:absolute;}
        .slider li{float:left;width:600px;height:400px;}
        .slider .dot{position:absolute;right:0;bottom:0;}
        .slider .dot a{display:inline-block;width:12px;height:12px;background-color:#fff;border-radius:50%;
            margin-left:5px;margin-bottom:5px;}
        .slider .dot a.active{background-color:#f60;}
    </style>
</head>
<body>
<div class="slider">
    <ul>
        <li><img src="http://images.cnblogs.com/cnblogs_com/xuexiang/499843/o_banner1.jpg"></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/xuexiang/499843/o_banner2.jpg"></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/xuexiang/499843/o_banner3.jpg"></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/xuexiang/499843/o_banner4.jpg"></li>
    </ul>
    <div class="dot">
        <a href="javascript:void(0);" class="active"></a>
        <a href="javascript:void(0);"></a>
        <a href="javascript:void(0);"></a>
        <a href="javascript:void(0);"></a>
    </div>
</div>
<!--加载jquery脚本-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    var currentIdx = 0; // 默认显示第一张图片，并将当前显示图片的索引设置为0。
    var $sliderList = $(".slider ul");
    var $sliderItems = $(".slider li");
    var sliderCount = $sliderItems.length; // 图片张数
    var sliderWidth = $sliderItems.width(); // 图片宽度
    var sliderInterval = null; // 切换延时变量

    // 手动切换
    $(".slider .dot a").click(function () {
        var index = $(this).index();
        currentIdx = index;
        changeSlider();
    });

    // 轮换切换
    sliderInterval = setInterval(function () {
        if(currentIdx < sliderCount - 1) {
            currentIdx ++;
        }else{
            currentIdx = 0;
        }
        changeSlider();
    },3000);

    /**
     * 切换图片和焦点
     */
    function changeSlider() {
        // 切换图片
        var position = -currentIdx * sliderWidth;
        $sliderList.animate({left: position + "px"}, 500);

        // 切换焦点
        $(".slider .dot a").removeClass("active");
        $(".slider .dot a").eq(currentIdx).addClass("active");
    }
</script>
</body>
</html>

3. 示例2：使用开源JS库Swiper实现焦点图轮播效果

除了手写JS实现焦点图轮播效果之外，我们还可以使用开源JS库Swiper（https://www.swiper.com.cn/）快速实现焦点图轮播效果。Swiper是一款基于jQuery开发的轮播插件，支持自动轮播、手动轮播、响应式、无缝衔接等多种轮播效果。

在这个示例中，我们使用Swiper库实现焦点图轮播效果。需要注意的是，由于Swiper依赖于jQuery，所以我们需要先引入jQuery库。

<html>
<head>
    <meta charset="utf-8">
    <title>Swiper实现焦点图轮播效果样例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
    <style>
        .swiper-container{width:600px;height:400px;margin:0 auto;overflow:hidden;}
        .swiper-container img{width:100%;height:auto;}
        .swiper-pagination{position:absolute;left:50%;bottom:10px;margin-left:-35px;}
        .swiper-pagination-bullet{width:8px;height:8px;display:inline-block;background:#fff;border-radius:100%;margin:0 5px;}
        .swiper-pagination-bullet-active{background-color:#f60;}
    </style>
</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="http://images.cnblogs.com/cnblogs_com/xuexiang/499843/o_banner1.jpg"></div>
        <div class="swiper-slide"><img src="http://images.cnblogs.com/cnblogs_com/xuexiang/499843/o_banner2.jpg"></div>
        <div class="swiper-slide"><img src="http://images.cnblogs.com/cnblogs_com/xuexiang/499843/o_banner3.jpg"></div>
        <div class="swiper-slide"><img src="http://images.cnblogs.com/cnblogs_com/xuexiang/499843/o_banner4.jpg"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>
<!--加载jquery脚本-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        autoplay: {
            delay: 3000, // 自动轮播的时间间隔
            disableOnInteraction: false, // 用户操作完之后是否继续自动轮播
        },
        loop: true, // 循环播放
        navigation: {
            nextEl: '.swiper-button-next', // 下一个按钮
            prevEl: '.swiper-button-prev', // 上一个按钮
        },
        pagination: {
            el: '.swiper-pagination', // 分页器
        }
    });
</script>
</body>
</html>