jQuery-demos轮播图练习(一)

在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);
});

小结：没有完全实现作者的所有功能，原轮播可以在滚动时自动切换当前小图，并且始终保持在中间位置，看了一下他的源代码是使用了一个插件，还有一些css3的知识，最近刚开始学习css3，回头再重新用css3重做应该会做的更好。

源代码戳这里

刚刚学会使用GitHub，可以上传一些之前做的demo了！加油加油，还有那么多要学的东东！css3好有意思啊，又学到好多新方法，已经想做点什么来试试手了！