jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)

jQuery实现带缩略图的焦点图片切换(自动播放/响应鼠标动作)攻略

1. 准备工作

在实现本攻略前，我们需要准备以下内容：

1. 最新版的jQuery库，在编写代码时建议使用jQuery v3.x 版本；
2. Html页面中，包含用于展示焦点图片切换的元素，例如id为carousel-container的元素用于显示切换的图片；
3. Html页面中，包含用于展示缩略图的元素，例如id为thumbnail-container的元素，用于显示所有的缩略图；
4. 缩略图为固定大小的正方形，可以使用css样式来设置缩略图的宽度和高度；
5. 向缩略图元素中添加鼠标悬停效果和点击事件的相关css样式或脚本；
6. 确定一组与缩略图对应的焦点图片及其URL，将其存储在Javascript数组中。

2. 实现思路

本攻略将通过 jQuery 实现以下效果：

1. 在页面加载时，自动播放焦点图片切换；
2. 鼠标悬停在缩略图上时，展示对应的焦点图片；
3. 鼠标点击缩略图时，展示对应的焦点图片，并停止自动播放。

3. 代码实现

3.1 HTML结构

我们首先需要在HTML代码中添加用于展示焦点图片的容器及缩略图的容器代码，如下：

<div id="carousel-container">
    <img src="img/1.jpg" alt="">
</div>
<div id="thumbnail-container">
    <img src="img/thumb/1.jpg" alt="">
</div>

3.2 CSS样式

在CSS样式中，我们需要设置缩略图的大小和一些交互效果，如鼠标悬停和选中状态。

#thumbnail-container img{
    width: 70px;
    height: 70px;
    margin: 5px;
    cursor: pointer;
}
#thumbnail-container img:hover, #thumbnail-container img.active{
    border: 2px solid #f00;
}

3.3 Javascript代码

我们的Javascript代码分为两个部分：展示焦点图片的代码和展示缩略图的代码。

3.3.1 焦点图片切换代码

我们可以通过jQuery来实现焦点图片的切换。核心代码片段如下：

var index = 0;
var imgList = [
    {url: "img/1.jpg"},
    {url: "img/2.jpg"},
    {url: "img/3.jpg"},
    {url: "img/4.jpg"},
    {url: "img/5.jpg"}
];

function showImage(){
    index ++;
    if(index >= imgList.length){
        index = 0;
    } 
    var imgUrl = imgList[index].url;
    $("#carousel-container img").attr("src", imgUrl);

    // 设置当前缩略图的选中状态
    $("#thumbnail-container img").removeClass("active");
    $("#thumbnail-container img").eq(index).addClass("active");
}

// 设置定时器自动播放
var timer = setInterval(function(){
    showImage();
}, 3000);

// 当鼠标悬停在焦点图片上时，停止定时器
$("#carousel-container").hover(function(){
    clearInterval(timer);
}, function(){
    timer = setInterval(function(){
        showImage();
    }, 3000);
});

// 当用户点击某个缩略图时，切换到对应的焦点图片
$("#thumbnail-container img").click(function(){
    index = $(this).index() - 1;
    showImage();

    // 停止定时器
    clearInterval(timer);
});

3.3.2 缩略图展示代码

缩略图的展示代码相对比较简单，只需要监听鼠标事件，切换到对应的焦点图片即可。代码如下：

// 鼠标悬停时，切换到对应的焦点图片
$("#thumbnail-container img").hover(function(){
    var index = $(this).index() - 1;
    var imgUrl = imgList[index].url;
    $("#carousel-container img").attr("src", imgUrl);
});

4. 示例

以下两个示例展示了本攻略的完整代码实现。

4.1 示例一

该示例演示自动播放和鼠标悬停效果，以及点击缩略图后的效果。

查看示例一

4.2 示例二

该示例演示了如何动态生成缩略图，并添加选中状态。

查看示例二