我如何结合使用html,css和javascript编码来使我的轮播工作？

Question

我如何结合使用html,css和javascript编码来使我的轮播工作？

Jam*_*wen 1 html javascript css carousel

我有以下代码分为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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

使用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');
            }
        );
    });
    });

Run Code Online (Sandbox Code Playgroud)

任何有关这方面的帮助将非常感谢大家!

Answer 1

dez*_*man 8

<!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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	12 年，9 月前
查看次数：	32586 次
最近记录：	6 年，6 月前