我如何结合 html、css 和 javascript 编码来使我的轮播工作？ [复制]答案

【问题标题】：How do i combine html, css and javascript coding to make my carousel work? [duplicate]我如何结合 html、css 和 javascript 编码来使我的轮播工作？ [复制]
【发布时间】：2013-02-14 21:47:44
【问题描述】：

我将以下代码拆分为 html、css 和 javascript，但我不知道如何在记事本中组合它们，以便将其嵌入到我的网站中。（图片来源和文字只是示例。）

HTML

<div id="wrapper">
<div id="text">
    <h3>Geneva International Motor Show</h3>
    <p>The Geneva International Motor Show will open to the public from 03 to       13 March, presenting more than 260 exhibitors and more than 175 world and European premieres. 02 March 2011.<br />
        <small>Source: <a href="http://gigapica.geenstijl.nl/2011/03/geneva_international_motor_sho.html" target="_blank">gigapica.geenstijl.nl</a></small></p>
</div>
<div id="images">
    <div id="a">
        <img src="img/car1.jpg" alt="car1" width="275" height="200" />
        <span>The new Swiss Sbarro TwoFort100 Concept car is shown during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, on 01 March 2011. </span>
    </div>
    <div>
        <img src="img/car2.jpg" alt="car2" width="275" height="200" />
        <span>The new Toyota FT-86 II Concept car on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. </span>
    </div>
    <div>
        <img src="img/car3.jpg" alt="car5" width="275" height="200" />
        <span>The new Renault Dezir Concept car is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. </span>
    </div>
    <div>
        <img src="img/car4.jpg" alt="car6" width="275" height="200" />
        <span>The new Dodge Challenger SRT8 392 is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011.</span>
    </div>
    <div>
        <img src="img/car5.jpg" alt="car8" width="275" height="200" />
        <span>The new Nissan Esflow Concept car is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. </span>
    </div>
    <div>
        <img src="img/car6.jpg" alt="car9" width="275" height="200" />
        <span>A study of Volkswagen named Bulli is on display at International Geneva Motor Show at the Palexpo fairground in Geneva, Switzerland, 03 March 2011</span>
    </div>
</div>
</div>

CSS

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

    #wrapper {
    width: 825px;
    margin: 0 0 0 -412px;
    position: absolute;
    left: 50%;
    top: 30px;
}
    #text h3 {
    font-size: 26px;
}
    #text small, #text small * {
    font-size: 12px;
    color: #666;
}
    #images {
    width: 900px;
    overflow: hidden;
}
    #images div, #images img {
    display: block;
    float: left;
    width: 275px;
    height: 200px;
}
    #images span {
    background-color: black;
    color: #ccc;
    display: block;
    float: left;
    width: 215px;
    height: 160px;
    padding: 40px 30px 0 30px;
    }

Javascript

$(function() {
    $('#images > div').each(function() {
        var $cfs = $(this);
        $cfs.carouFredSel({
            direction: 'up',
            circular: false,
            infinite: false,
            auto: false,
            scroll: {
                queue: 'last'
            },
            items: {
                visible: 1,
                width: 275,
                height: 200
            }
        });
        $cfs.hover(
            function() {
                $cfs.trigger('next');
            },
            function() {
                $cfs.trigger('prev');
            }
        );
    });
    });

对此的任何帮助将不胜感激！！！

【问题讨论】：

在你的 html 头中引用其他文件
stackoverflow.com/questions/2725523/…

标签： javascript html css carousel

【解决方案1】：

<!DOCTYPE html>
<html lang"en">
  <head>
    <meta charset="utf-8">
    <title>...</title>
    <link rel="stylesheet" type="text/css" href="path/to/your.css" />
    <script src="path/to/your.js"></script>
  </head>
  <body>
   ...your html
  </body>
</html>

我添加了一些通常放在 html 文档头部的东西，比如 charset 和 lang 属性。此外，此文档类型适用于 html5。

【讨论】：

谢谢这真的很有帮助，因为我需要了解标题等，但它仍然没有做它应该做的事情，原始轮播来自“coolcarousels.frebsite.nl/c/7”我的网站是由另一个人运行/创建的公司和我刚刚获得了一个管理区域，你认为这就是 javascript 不起作用的原因吗？
<head> 与页眉不同，页眉通常是您在浏览器中看到的页面顶部，编码为<body>。关于为什么你的 js 不起作用，有很多可能性，除非你有该网站的链接，否则我真的不知道。
是的，对不起，这就是我的意思。使用 JS 文件，我使用记事本创建它并在最后将文件类型更改为 JS，在按原样复制和粘贴 javascript 代码之后，我需要在记事本文档中添加任何内容以指定这是一个 javascript 函数?
不，你所拥有的还可以，但它使用的是 jquery，你还需要从你的 html 链接到它。
很抱歉“头脑简单”，但我该怎么做呢？

【解决方案2】：

您可以引用内联代码，也可以链接到文件。

要内联引用所有内容，请在 HTML 上方将 CSS 置于：

<style>

</style>

然后把你的javascript放在：

<script>

</script>

或

将你的 CSS 保存到一个文档中，比如 slider.css

将你的 javascript 保存到一个名为 slider.js 的文件中

然后链接到他们：

<link href="slider.css" type="text/css" rel="stylesheet" />

和

<script src="slider.js" type="text/javascript></script>

请注意，以上两个代码 sn-ps 必须放在您的<head></head> 标签内

【讨论】：

【解决方案3】：

将此添加到 html 文件的 <head> 部分：

<link rel="stylesheet" href="yourcssfilename.css"/>
<script type="text/javascript" src="yourjsfilename.js"/>

【讨论】：

【解决方案4】：

<head>
<script type="text/javascript" src="<Location and filename of Javascript file including file extension>"></script>
<link rel="stylesheet" type="text/css" href="<Location and filename of CSS file including file extension>">
</head>

用服务器/机器上的实际文件位置替换这些东西。

【讨论】：