Question

我喜欢这张图片滑块的外观：

http://coolcarousels.frebsite.nl/c/58/coolcarousel.html

并希望实现它。我复制并粘贴了javascript，css和html。

以下是网站：http://violetoeuvre.com/slider.html

html：

    <script> 

$(function() {

    $('#carousel').carouFredSel({
        width: 800,
        items: 3,
        scroll: 1,
        auto: {
            duration: 1250,
            timeoutDuration: 2500
        },
        prev: '#prev',
        next: '#next',
        pagination: '#pager'
    });

});

</script>
</div>
<div>

<div id="wrapper">
    <div id="carousel">
        <img src="img_slider/1.jpg" />
        <img src="img_slider/2.jpg" />
        <img src="img_slider/3.jpg" />
        <img src="img_slider/4.jpg" />
        <img src="img_slider/5.jpg" />
        <img src="img_slider/6.jpg" />
    </div>
    <a id="prev" href="#"></a>
    <a id="next" href="#"></a>
    <div id="pager"></div>
</div>
</div>

CSS：

    html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    background-color: #ff00ff;
    min-height: 700px;
}
body * {
    font-family: Arial, Geneva, SunSans-Regular, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 22px;
}

#wrapper {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 100px;
    width: 800px;
    height: 127px;
    padding: 10px;
    margin: -75px 0 0 -410px;
    position: absolute;
    left: 50%;
    top: 50%;
}
.caroufredsel_wrapper {
    border-radius: 90px;
}
#carousel img {
    width: 201px;
    height: 127px;
    margin: 0 5px;
    float: left;
}
#prev, #next {
    background: transparent url( img/carousel_control.png ) no-repeat 0 0;
    text-indent: -999px;
    display: block;
    overflow: hidden;
    width: 15px;
    height: 21px;
    position: absolute;
    top: 65px;
}
#prev {
    background-position: 0 0;
    left: 30px;
}
#prev:hover {
    left: 29px;
}           
#next {
    background-position: -18px 0;
    right: 30px;
}
#next:hover {
    right: 29px;
}               
#pager {
    text-align: center;
    margin: 0 auto;
    padding-top: 20px;
}
#pager a {
    background: transparent url(img/arrow1.png) no-repeat -2px -32px;
    text-decoration: none;
    text-indent: -999px;
    display: inline-block;
    overflow: hidden;
    width: 8px;
    height: 8px;
    margin: 0 5px 0 0;
}
#pager a.selected {
    background: transparent url(img/arrow2.png) no-repeat -12px -32px;
    text-decoration: underline;             
}

我下载了javascript zip文件，我确信代码中缺少的是使一切行为正常。我是新手，我只是不知道在哪里适合这部分。在剧本中？在另一个参考文件？（试过这些）。

提前致谢。克莱尔

Answer 1

您也可以尝试包含jQuery Library：

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>

在滑块脚本之前包含，您可以在案例中添加标题

Answer 2

如果我错了，请打我，但我在你的页面上看不到任何jQuery：3

Jquery Image Slider表现不佳

2 个答案: