jQuery-demos轮播图练习(一)-优快云博客

本文介绍了一种使用jQuery实现的轮播图效果，包括小图导航、底部圆点导航等功能。作者通过克隆图片列表实现了流畅的滚动效果，并确保白色背景始终跟随当前展示的大图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在jQuery插件库上看到一个轮播图觉得很漂亮，就自己尝试做了一个，实现左侧小图定时滚动，小图和底部的原点可以点击切换大图，离开后小图继续滚动，白色背景始终保持在当前图上。

思路：HTML结构分了大图片部分、小图导航和底部圆点三个部分；通过克隆图片列表加长了列表长度，当滚动到克隆的图片部分时，将整个列表拉回原位，看起来就像连续滚动的效果了。

html

<div class="images">    //大图部分
    <ul class="iunit">
        <li><img src="images/a1.png" alt=""></li>
        <li><img src="images/a2.png" alt=""></li>
        <li><img src="images/a3.png" alt=""></li>
        <li><img src="images/a4.png" alt=""></li>
        <li><img src="images/a5.png" alt=""></li>
        <li><img src="images/a6.png" alt=""></li>
    </ul>
</div>
<div class="nav">     //小图导航部分 li有6个
    <ul class="nunit">
        <li class="cur">
            <a href="javascript:;">
            <img src="images/a1x.png" alt="">
            <span class="title">Title</span><br>
            <span class="descrip">Description</span>
            </a>
        </li>
    </ul>
</div>
<div class="sub_nav">   //底部圆点导航部分
    <ul class="sunit">
        <li class="cur"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

复制代码

css就不放上来了，全部源文件在最后的链接，下面是js部分代码:

1.获取元素和克隆列表

var $carousel = $("#carousel");          
var $iunit = $carousel.find(".iunit");  //大图片部分的ul
var $nunit = $carousel.find(".nunit");  //小图片部分的ul
var $sunit = $carousel.find(".sunit");  //圆点部分的ul
var idx=0, _idx = 0;   //设置三个信号量分别控制三个部分,降低三个部分之间的耦合性
var s_idx = 0;

//克隆两个图片列表
$iunit.find("li").clone().appendTo($iunit);
$nunit.find("li").clone().appendTo($nunit);

//获取每一个里表中的li，这里要在克隆之后获取，否则就只能获取到克隆之前的个数
var $iunit_lis = $iunit.find("li");
var $nunit_lis = $nunit.find("li");
var $sunit_lis = $sunit.find("li");
复制代码

2.添加鼠标移入和移除事件监听

//添加鼠标移入监听，给后面加cur添加important否则权重不够行内
$nunit_lis.mouseenter(function(){
    $(this).css("background-color", "rgba(255,255,255,0.3)");
});
$nunit_lis.mouseleave(function(){
	$(this).css("background-color", "rgba(0,0,0,0.08)");
});
复制代码

3.左侧导航部分添加点击事件监听

$nunit_lis.click(function(){
    //当前点击的下标1-12
    idx = $(this).index();

    $(this).siblings("li").removeClass("cur");
    $(this).addClass("cur");
    //判断下标，当大于7时，下标值减去6，返回1-6
    if(idx > 6){idx -= 6;}

    $nunit_lis.eq(idx+6).addClass("cur");
    //添加运动事件，内部判断索引值为6时，still移动，但是移动之后拉回到0
    $iunit.animate({"left": -980 * idx}, 300, function(){
        if(idx>5){
            $(this).css("left", 0);
        }
    });
    //小圆点跟随信号量idx值一同改变
    $sunit_lis.eq(idx).addClass("cur").siblings("li").removeClass("cur");
});
复制代码

4.底部圆点添加点击事件监听

$sunit_lis.click(function(){
    s_idx = $(this).index();
    $sunit_lis.eq(s_idx).addClass("cur").siblings("li").removeClass("cur");
    $iunit.animate({"left": -980 * s_idx}, 300);
});
复制代码

5.封装运动函数，开启定时器让导航滚动起来

function go(){
    _idx++;

    $nunit.animate({"top": -70 * _idx}, 300, function(){
        if(_idx>5){
            _idx=0;
            $nunit.css("top", 0);
        }
    })
}

var timer = setInterval(go, 1000);

$carousel.mouseenter(function(){
    clearInterval(timer);
});
$carousel.mouseleave(function(){
    timer = setInterval(go, 1000);
});
复制代码