0

我喜欢这个图像滑块的外观：

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 文件，我确信这是代码中缺少的东西，以使一切正常运行。我是新手，我只是不知道在哪里适合那个部分。在脚本中？在另一个参考文件中？（试过这些）。

提前致谢。克莱尔

4

2 回答 2

4

您也可以尝试包含 jQuery 库：

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

在滑块脚本之前包含，您可以在您的情况下添加标题

于 2013-04-26T15:48:27.107 回答
2

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

于 2013-04-26T15:49:00.683 回答