Question

我正在尝试创建我的第一个jQuery滑块。我浏览并学习了一些关于jQuery动画的知识。我决定借助它做我的滑块。

我的身体部分有两个部门。第一个分区就像一个大屏幕，我的图像滑动。第二个分区是缩略图数组。这里，与所显示的滑块图像相对应的缩略图将被镶边。

现在，我必须继续我的jQuery代码，这样每当我点击一个缩略图时，应该在大屏幕上显示相应的图像。我想知道该怎么做。请帮我。

以下是我的滑块文件的内容：

<!doctype html>
<html>
<head>
<title>mySlider</title> 

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    var index = 1;
    var indexPrevious = 0;
    var borderT = "#thumbnails #mini > img:eq(1)";
    var unborderT = "#thumbnails #mini > img:eq(0)";
    $(document).ready(function(e) {

        $("#slider > div:gt(0)").hide();

        setInterval(function() { 

            $(borderT)
            .css({"border-width":"2px"});

            $(unborderT)
            .css({"border-width":"0px"});


            $('#slider > div:first')
            .fadeOut(1000).next().fadeIn(1000).end().appendTo('#slider');

            if(index >= 4){
                    index = 0;
                    indexPrevious = 4;  
                }
                else{
                    ++index;
                    indexPrevious = index - 1;  
                }

                borderT = "#thumbnails #mini > img:eq("+index+")";

                unborderT = "#thumbnails #mini > img:eq("+indexPrevious+")";

        },3000);

    });
</script>

<style>
#slider {
    background: #000;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    height: 275px; 
    width: 98%;
    overflow: hidden;
    position: absolute;
}

#slider div img {
    height:100%;
    width: 100%;
}

#slider > div {
    height:100%;
    width: 100%;
    position: absolute;
}

#thumbnails {
    width: 98%;
    height: 60px;
    display: block;
    float: left;
    margin-top: 290px;
    text-align: center;
}

#thumbnails #mini {
    display: inline-block;
}

#thumbnails #mini img {
    border-color: #000;
    border-width: 0px;
    border-style: solid;
}

#thumbnails #mini img:first-child {
    border-width: 2px; 
}
</style>
</head>
<body>
<div id="slider">         
    <div><img src="images/slider01.jpg" alt="Image01"/></div>
        <div><img src="images/slider02.jpg" alt="Image02"/></div>
        <div><img src="images/slider03.jpg" alt="Image03"/></div>
        <div><img src="images/slider04.jpg" alt="Image04"/></div>
        <div><img src="images/slider05.jpg" alt="Image05"/></div>          
</div>
<div id="thumbnails">         
    <div id="mini">
        <img src="images/t_01.jpeg" alt="Thumbnail01"/>
        <img src="images/t_02.jpeg" alt="Thumbnail02"/>
        <img src="images/t_03.jpeg" alt="Thumbnail03"/>
        <img src="images/t_04.jpeg" alt="Thumbnail04"/>
        <img src="images/t_05.jpeg" alt="Thumbnail05"/>
        </div>          
</div>  
</body>
</html>

DEMO FIDDLE

创建一个jQuery滑块

0 个答案: