第八章----好的结束，新的开始

时间：2023-02-10 13:27:00

     第一阶段关于HTML的学习结束了，关于第一阶段的项目展示自己也投入了很多的心血，陈老师所说的“练技术论“深得我心，所以我就利用我所学的技术在项目中堆积特效，每次自己有了想法并排除重重困难实现自己想要的效果时，心里真的很满足，最终，我也实现了所有我想实现的效果，在项目展示之前，我会毫不犹豫的给与自己满分。

     然而直到项目展示结束，我才深深的意识到我错了，由于过多的特效堆积，忽略了页面的美化，看过了其他小组华丽的展示效果，听过了老师们对项目的展示评价，我才幡然醒悟：这其实并不是一次简单的技术运用和练习，如果真的用练习的心态去对待，就如同写作文跑了题，变得不伦不类。这样的项目展示实际上是面向用户的一种展示，用户其实并不在乎你运用了那些技术，用户只是注重你的视觉效果和实用功能。

     最终我们小组光荣的垫了底，有点小失望。不过获得了项目展示的经验，并且关于老师说的另外一点，团队合作的问题，这确实是现实存在的问题，作为组长，我确实没有严格的要求自己的组员，看到项目展示截图的对比，确实有点尴尬啊，我们的页面好LOW。不过，说真的，哥不服！下次再一决雌雄吧。

     接下来保存一下自己的作品吧：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>BHGG生态园</title>
        <link rel="stylesheet"  type="text/css" href="css/chanpin.css" />
        
    </head>

    <body>
        <div class="head">

            <div class="logo-text">
                BHGG生态园
            </div>
            <div class="head-nav">首页</div>
            <div class="head-nav">产品展示
                <ul class="nav_1">
                    <li>采摘</li>
                    <li>水果摊</li>
                    <li>畜牧</li>
                    <li>水产</li>
                </ul>
            </div>
            <div class="head-nav">
                生态餐厅
                <ul class="nav_1">
                    <li>肉类</li>
                    <li>海鲜类</li>
                    <li>蔬菜类</li>
                </ul>
            </div>
            <div class="head-nav">
                休闲娱乐
                <ul class="nav_1">
                    <li>cs野战</li>
                    <li>休闲垂钓</li>
                    <li>烧烤野炊</li>
                    <li>休闲客房</li>
                </ul>
            </div>
            <div class="head-nav">关于我们</div>
            <div style="clear: both;"></div>
            <div id="head-img">
                <div class="btn">
                    <a href="#caizhai" onmouseover="color1()" onmouseleave="color()">
                        <img src="img/img2.jpg" class="img-head" />
                    </a>
                </div>
                <div class="btn">
                    <a href="#shuguotan" onmouseover="color2()" onmouseleave="color()">
                        <img src="img/img1.jpg" class="img-head" />
                    </a>
                </div>
                <div class="btn">
                    <a href="#xumu" onmouseover="color3()" onmouseleave="color()">
                        <img src="img/img3.jpg" class="img-head" />
                    </a>
                </div>
            </div>
        </div>

        <div class="body">
            <a name="caizhai"></a>
            <div class="caizhai-head">
                <div class="caizhai-title">
                    <div class="btn1" onclick="click1()">葡萄</div>
                    <div class="btn2" onclick="click2()" style="left: 123px;">桑葚</div>
                    <div class="btn3" onclick="click3()" style="left: 246px;">草莓</div>
                    <div class="btn4" onclick="click4()" style="left: 369px;">油菜</div>
                    <div class="btn5" onclick="click5()" style="left: 492px;">白菜</div>
                    <div style="left: 615px;">地瓜</div>
                    <div style="left: 738px;">西瓜</div>
                    <div style="left: 861px;">芹菜</div>
                </div>
            </div>
            <div style="clear: both;"></div>
            <div id="stage">

                <div id="ad-banner">
                    <div class="ad">
                        <div class="putao-text1">
                            &nbsp;&nbsp;&nbsp;&nbsp;葡萄是一种浆果，是世界上最古老分布最广的一种水果之一，人类在很早以前就开始栽培这种果树，其浆果多为圆形或椭圆，色泽随品种而异。几乎占全世界水果产量的四分之一；其营养价值很高，可制成葡萄汁、葡萄干和葡萄酒。粒大、皮厚、汁少、水多，皮肉易分离,味道酸甜可口，耐贮运的欧亚种葡萄又称为提子，一般成簇生长，有黄绿色、红色、黑蓝色或紫色。果肉外有层薄皮，皮外有薄霜，有些品种无籽。葡萄既可做水果生食，也可酿酒或制作葡萄干。此外，还可用做装饰。葡萄因颜色鲜艳、味道鲜美，而且具有很高的营养价值，被人们称为“水晶明珠”。葡萄富含镁、维生素C和铁，有一定的药用价值，是重要的供能食物和滋补品。
                        </div>
                        <div class="putao-text1">
                            BHGG生态示范葡萄品种介绍:
                        </div>
                        <div class="putao-text1">
                            夏黑: 欧美种、三倍体无核品种。成熟期早、品质优、口感佳、丰产性好、抗病性强、适应性广，耐贮运。平均穗重670克，最大穗重达2000克。果粒近圆形至短椭圆形，平均单粒重10克，大果可达15克以上，上色快，着色一致，果粉厚，果肉硬脆，味浓甜，品质极佳；在我园区于6月初成熟，成熟果实挂树时间长达1个月，不掉粒、不裂果、不变味。是目前比较有发展前景的一个早熟无核优良葡萄品种。
                        </div>
                        <div>
                            <img src="img/img4.jpg" class="putao-img" />
                        </div>
                        <div class="putao-text1">
                            红 提： 又称美国红提、晚红、红地球、大红球。果穗大，长势好，果穗特大，平均穗重800g，最大可达2500g，极易丰产，种植第二年可达2500公斤；该品种果粒圆至近圆锥形，粒重11－13g，最大22g，果皮鲜红色至紫红色，果肉硬脆，用刀切片不淌汁，味甜，具有独特的清香味，不裂果，果柄拉力强，果实成熟后留树可保存1－2个月，我园区于7月底成熟。
                        </div>
                        <div>
                            <img src="img/img5.jpg" class="putao-img" />
                        </div>
                        <div class="putao-text1">
                            金 手 指： 属欧美杂交种,果穗巨大，松紧适度，平均穗重750克，最大穗重1500克。果粒形状奇特美观，果皮中等厚，韧性强，不裂果。果肉硬，可切片，耐贮运，含糖量20%－22%，甘甜爽口，有浓郁的冰糖味和牛奶味。果柄与果粒结合牢固，捏住一粒果可提起整穗果，是唯一的高糖度早熟欧美杂交种。我园区6月初成熟属中早熟品种。
                        </div>
                        <div>
                            <img src="img/img6.jpg" class="putao-img" />
                        </div>
                    </div>
                    <div class="ad">
                        <div class="putao-text1">
                            &nbsp;&nbsp;&nbsp;&nbsp; 桑葚，桑树的成熟果实，桑葚又叫桑果、桑泡儿，农人喜欢其成熟的鲜果食用，味甜汁多，是人们常食的水果之一。成熟的桑葚质油润，酸甜适口，以个大、肉厚、色紫红、糖分足者为佳。每年4～6月果实成熟时采收，去杂质，晒干或略蒸后晒干食用，也可来泡酒。具体成熟时间各地不一样，南方早一点，北方稍迟一点。
                        </div>
                        <div class="putao-text1">
                            多吃桑葚的好处:
                        </div>
                        <div class="putao-text1">
                            （1）补肝益肾 中医认为，肝主藏血、肾主生髓，是人身能量储存基地。桑葚性味甘寒、具有补肝益肾的功效。男性朋友要注意：从中医角度说，对于性机能失调、属寒热混杂体质的人，最好不要随便补肾壮阳，否则会越补越“虚”。夏天可饮用桑葚汁，不仅可补充体力，还可提高性生活质量。 改善生殖亚健康 传承后代是人生一大要务！50%不孕不育归咎于男性精液质量下降。桑葚则可以改善这种“生殖亚健康”，是很多治疗死精症的方剂的重要组成药物。因此，男性朋友可以多吃桑葚。
                        </div>
                        <div>
                            <img src="img/img7.jpg" class="putao-img" />
                        </div>
                        <div class="putao-text1">
                            （2）补血养颜 桑葚为桑科落叶乔木桑树的成熟果实，于果实红熟时采收，晒干或生用、或加蜜熬膏用。桑葚味甘、酸，性寒。能滋补肝肾、补血养颜、生津止渴。可用于肝肾阴亏、腰膝酸软、目暗耳鸣、关节不利、津亏血少、口渴烦热、肠燥便秘等症。现代药理研究证明，桑葚含有多种维生素，尤其是含有丰富的磷和铁，能益肾补血，使人面色红润，头发漆黑亮丽。若与黑豆、枣肉相配，还能提供使头发变黑的黑色素及供头发生长所需的蛋白质。 其他功效 当然，桑葚除了以上两种好处，还有很多功效。生津润肠、清肝明目、安神养颜、补血乌发等，都是桑葚的功效；现代医学还发现桑葚具有调节免疫、促进造血细胞生长、抗诱变、抗衰老、降血脂、护肝等保健作用。适合人群：一般成人适合食用。女性、中老年人及过度用眼者更宜食用。每日20～30颗（30～50克）。
                        </div>
                        <div>
                            <img src="img/img8.jpg" class="putao-img" />
                        </div>

                    </div>
                    <div class="ad">
                        <div class="putao-text1">
                            &nbsp;&nbsp;&nbsp;&nbsp; 草莓（学名：Fragaria × ananassa Duch，英文：Strawberry）。蔷薇科、草莓属多年生草本，一种红色的花果，又名凤梨草莓、红莓、洋莓、地莓等，外观呈心形，鲜美红嫩，果肉多汁，含有特殊的浓郁水果芳香。
                        </div>
                        <div>
                            <img src="img/img9.jpg" class="putao-img" />
                        </div>
                        <div class="putao-text1">
                            草莓富含氨基酸、果糖、蔗糖、葡萄糖、柠檬酸、苹果酸、果胶、胡萝卜素、维生素B1、B2、烟酸及矿物质钙、镁、磷、钾、铁等，这些营养素对生长发育有很好的促进作用，对老人、儿童大有裨益。国外学者研究发现，草莓中的有效成分，可抑制癌肿的生长。每百克草莓含维生素C50-100毫克，比苹果、葡萄高10倍以上。科学研究业已证实，维生素C能消除细胞间的松弛与紧张状态，使脑细胞结构坚固，皮肤细腻有弹性，对脑和智力发育有重要影响。饭后吃一些草莓，可分解食物脂肪，有利消化。

                        </div>
                        <div>
                            <img src="img/mei.jpg" class="putao-img" />
                        </div>
                        <div class="putao-text1">
                            食疗价值 1、治糖尿病：鲜草莓适量。将其洗净，频频食用。 2、治干咳：鲜草莓60克，冰糖30克。将两种原料入锅，一同隔水蒸烂。每日3次分服。 3、治贫血：草莓100克，红枣15颗，荔枝干30克，糯米150克。将这四种食物入锅，加适量水熬粥食用。每日1次。
                        </div>
                        <div>
                            <img src="img/img11.jpg" class="putao-img" />
                        </div>
                    </div>
                    <div class="ad" style="text-align: center;font-size: 10em;">没长出来</div>
                    <div class="ad" style="text-align: center;font-size: 10em;">被偷光了</div>
                </div>

            </div>

            <a name="shuguotan"></a>

            <input type="button" id="shuguo-head" onclick="go()" value="欢迎来到BHGG蔬果摊！新鲜蔬果还有3秒到达现场！">

            <span id="time" style="margin-left: 80px;"></span>
            <div id="shuguo">
                <div class="chanpin">
                    <div class="shuguo-div">
                        <img src="img/cabbage.jpg" class="shuguo-img" />
                    </div>
                    <div class="shuguo-text">
                        抱团的大白菜
                    </div>
                    <div class="buy">

                        <input type="button" id="buy-btn" class="buy-bn" value="购买">
                    </div>
                </div>

                <div class="chanpin">
                    <div class="shuguo-div">
                        <img src="img/cape.jpg" class="shuguo-img" />
                    </div>
                    <div class="shuguo-text">
                        油菜之王
                    </div>
                    <div class="buy">
                        <input type="button" class="buy-bn" value="购买">
                    </div>
                </div>
                <div class="chanpin">
                    <div class="shuguo-div">
                        <img src="img/dragon.jpg" class="shuguo-img" />
                    </div>
                    <div class="shuguo-text">
                        愤怒的火龙果
                    </div>
                    <div class="buy">
                        <input type="button" class="buy-bn" value="购买">
                    </div>
                </div>
                <div class="chanpin">
                    <div class="shuguo-div">
                        <img src="img/watermelon.jpg" class="shuguo-img" />
                    </div>
                    <div class="shuguo-text">
                        现摘现买的沃特卖人
                    </div>
                    <div class="buy">
                        <input type="button" class="buy-bn" value="购买">
                    </div>
                </div>
                <div class="chanpin">
                    <div class="shuguo-div">
                        <img src="img/putao.jpg" class="shuguo-img" />
                    </div>
                    <div class="shuguo-text">
                        葡萄娃
                    </div>
                    <div class="buy">
                        <input type="button" class="buy-bn" value="购买">
                    </div>
                </div>
                <div class="chanpin">
                    <div class="shuguo-div">
                        <img src="img/sanshen.jpg" class="shuguo-img" />
                    </div>
                    <div class="shuguo-text" style="line-height: 25px;">
                        干了这碗桑椹<br />我们还是朋友
                    </div>
                    <div class="buy">
                        <input type="button" class="buy-bn" value="购买">
                    </div>
                </div>
            </div>

            <a name="xumu"></a>
            <div class="xumu-head">
                欢迎参观BHGG养殖场
            </div>
            <div id="wutai">
                <div id="left-btn">
                    <</div>
                        <div id="right-btn">></div>
                        <div id="hengfu">
                            <div class="da">
                                <img src="img/pig3.jpg" class="da-img" />
                            </div>
                            <div class="da">
                                <img src="img/pig2.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src="img/pig1.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src="img/niu.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src="img/yang.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src="img/pig4.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src="img/chick.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src="img/sheep.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src="img/pig5.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src="img/pig6.jpg" class="da-img">
                            </div>
                        </div>
                </div>
            </div>

    </body>

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

样式表：

.head {
    width: 100%;
    height: 90px;
    /*border: 1px solid green;*/
    background-color: white;
    background: url(../img/daohangtiao.jpg)
}

.logo-text {
    width: 300px;
    height: 90px;
    transform: rotate(2deg);
    font-size: 3em;
    font-family: SimSun;
    font-weight: bold;
    color: white;
    text-align: center;
    line-height: 90px;
    float: left;
    box-shadow: 10px 10px 10px divghtseagreen;
    background-color: greenyellow;
}

.head-nav {
    float: left;
    line-height: 90px;
    width: 150px;
    font-size: 1em;
    text-align: center;
    overflow: hidden;
    max-height: 90px;
    color: white;
}

.head-nav:hover {
    background-color: skyblue;
    cursor: pointer;
    max-height: 500px;
    transition: 0.8s;
}

.nav_1 {
    margin: 0px;
}

.nav_1 li {
    list-style: none;
    text-align: center;
    position: relative;
    margin-left: -50px;
    background-color: skyblue;
    z-index: 100;
}

.nav_1 li:hover {
    background-color: darkturquoise;
    cursor: pointer;
}

.img-head {
    width: 200px;
}

.btn {
    width: 200px;
    height: 170px;
    padding-top: 20px;
    line-height: 170px;
    margin-top: 20px;
    margin-left: 200px;
    background-color: green;
    border-radius: 100%;
    overflow: hidden;
    float: left;
}

.btn:hover {
    background-color: yellow;
    width: 198px;
    height: 168px;
    transform: rotate(1080deg);
    transition: 1.5s;
    box-shadow: 10px 10px 10px lawngreen;
}

#head-img {
        background-image: url(../img/img13.jpg);
        background-repeat: round;
    width: 1335px;
    height: 220px;
    position: absolute;
    z-index: 2;
    top: 90px;
    margin-top: 10px;
}
.body
{
background-color: palegreen;
border: 1px solid black;
}
.caizhai-head {
    width: 1000px;
    height: 40px;
    position: relative;
    margin-top: 230px;
    margin-left: 178px;
}

.caizhai-title div {
    float: left;
    margin-left: 0px;
    width: 123px;
    height: 40px;
    /*border: 1px solid black;*/
    text-align: center;
    background-color: lightgray;
    line-height: 40px;
    list-style: none;
    position: absolute;
    z-index: 2;
}

.caizhai-title div:hover {
    cursor: pointer;
}

.btn1:hover,
.btn2:hover,
.btn3:hover,
.btn4:hover,
.btn5:hover {
    cursor: pointer;
    font-size: 1.5em;
    color: mediumorchid;
    background-color: white;
}

#stage {
    width: 1000px;
    height: 2250px;
    /*    border: 1px solid red;*/
    position: absolute;
    top: 372px;
    left: 178px;
    overflow: hidden;
}

#ad-banner {
    width: 5000px;
    height: 500px;
}

.ad {
    width: 1000px;
    height: 500px;
    float: left;
}

.putao-text1 {
    font-family: "楷体";
    font-size: 1.5em;
}

.putao-img {
    width: 600px;
    margin-left: 200px;
}

#shuguo-head {
    margin-top: 2300px;
    font-family: "宋体";
    font-weight: bold;
    font-size: 2em;
    position: relative;
    margin-left: 300px;
}

#time {
    font-size: 2em;
}

#shuguo {
    width: 1000px;
    margin-left: 175px;
    height: 600px;
    /*border: 1px solid black;*/
    display: none;
    position: relative;
}

.chanpin {
    width: 300px;
    height: 260px;
    float: left;
    /*            border: 1px solid blue;*/
    margin-top: 20px;
    margin-left: 20px;
}

#buy-btn {
    width: 60px;
    height: 30px;
}

.buy {
    width: 50px;
    height: 20px;
    margin-top: -20px;
    margin-left: 230px;
    /*    border: 1px solid red;*/
}

.shuguo-div {
    width: 290px;
    height: 200px;
    margin-left: 0px;
}

.shuguo-img {
    width: 290px;
    height: 200px;
}

.shuguo-text {
    /*border: 1px solid black;*/
    width: 200px;
    height: 50px;
    margin-left: 0px;
    text-align: center;
    line-height: 70px;
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 10px;
}

.shuguo-text:hover {
    cursor: pointer;
    color: greenyellow;
}

.xumu-head {
    font-weight: bold;
    font-size: 1.5em;
    width: 400px;
    height: 50px;
    /*border: 1px solid red;*/
    margin-left: 450px;
    line-height: 50px;
    text-align: center;
    /*background-color: ;*/
}

#wutai {
    width: 990px;
    height: 500px;
    /*    border: 10px solid black;*/
    position: absolute;
    left: 177px;
    top: 2800px;
    overflow: hidden;
}

#left-btn,
#right-btn {
    position: absolute;
    top: 0px;
    height: 500px;
    width: 30px;
    background-color: blueviolet;
    color: white;
    opacity: 0.5;
    line-height: 500px;
    text-align: center;
    font-size: 30px;
    z-index: 998;
}

#left-btn {
    left: 0px;
}

#right-btn {
    right: 0px;
}

#left-btn:hover {
    cursor: pointer;
    opacity: 0.7;
}

#right-btn:hover {
    cursor: pointer;
    opacity: 0.7;
}

#hengfu {
    width: 10000px;
    height: 500px;
    position: relative;
    background-color: blue;
}

.da {
    width: 1000px;
    height: 500px;
    float: left;
    text-align: center;
    line-height: 250px;
    font-size: 100px;
}

.da-img {
    width: 1000px;
    height: 500px;
}

#mask {
    width: 100%;
    /*height: 700px;*/
    background-color: darkorchid;
    opacity: 0.3;
    position: fixed;
    top: 0px;
    left: 0px;
}

.pop-login {
    width: 800px;
    height: 550px;
    position: fixed;
    /*top:200px;
                left: 400px;*/
    background-color: white;
    z-index: 999;
}

#close-pop {
    position: absolute;
    top: 5px;
    right: 5px;
}

#close-pop:hover {
    cursor: pointer;
}

JS特效：

function color1() {
    document.getElementById('head-img').style.backgroundImage = "url(img/img12.jpg)";
    document.getElementById('head-img').style.backgroundRepeat = "round";
}

function color2() {
    document.getElementById('head-img').style.backgroundImage = "url(img/img13.jpg)"
}

function color3() {
    document.getElementById('head-img').style.backgroundImage = "url(img/img14.jpg)"
}

function color() {
    document.getElementById('head-img').style.backgroundImage = "url(img/img13.jpg)"
}
var banner = document.getElementById('ad-banner');

function click1() {
    banner.style.marginLeft = "0" + "px";
    document.getElementById('stage').style.height = "2250" + "px";
    document.getElementById('shuguo-head').style.marginTop = "2300" + "px";
    document.getElementById('wutai').style.top = "2800" + "px";
    document.getElementById('shuguo').style.display = "none";
}

function click2() {
    banner.style.marginLeft = "-1000" + "px";
    document.getElementById('stage').style.height = "1250" + "px";
    document.getElementById('shuguo-head').style.marginTop = "1300" + "px";
    document.getElementById('shuguo').style.display = "none";
    document.getElementById('wutai').style.top = "1800" + "px";
}

function click3() {
    banner.style.marginLeft = "-2000" + "px";
    document.getElementById('stage').style.height = "1600" + "px";
    document.getElementById('shuguo-head').style.marginTop = "1650" + "px";
    document.getElementById('shuguo').style.display = "none";
    document.getElementById('wutai').style.top = "2150" + "px";
}

function click4() {
    banner.style.marginLeft = "-3000" + "px";
    document.getElementById('stage').style.height = "390" + "px";
    document.getElementById('shuguo-head').style.marginTop = "400" + "px";
    document.getElementById('shuguo').style.display = "none";
    document.getElementById('wutai').style.top = "900" + "px";
}

function click5() {
    banner.style.marginLeft = "-4000" + "px";
    document.getElementById('stage').style.height = "390" + "px";
    document.getElementById('shuguo-head').style.marginTop = "400" + "px";
    document.getElementById('shuguo').style.display = "none";
    document.getElementById('wutai').style.top = "900" + "px";
}
var t = 4;
var arr = Array();

function go() {
    t = 4;
    arr.push(window.setInterval("time()", 1000));

}

function time() {
    document.getElementById('time').innerText = --t;
    if(t == 0) {
        for(var i in arr) {
            window.clearInterval(arr[i]);
        }
        document.getElementById('time').innerText = '';
        document.getElementById('shuguo').style.display = "block";
        var tops = document.getElementById('wutai').offsetTop + 600;
        document.getElementById('wutai').style.top = tops + "px";
    }
}

var speed = 10;
var count = 1;
var banners = document.getElementById('hengfu');
var arr2 = Array();
var arr1 = Array();
var arr3 = Array();

function moveRight() {

    var banner_left = banners.offsetLeft;
    if(count > 1) {
        for(var k in arr3) {
            window.clearInterval(arr3[k]);
        }
         if(banner_left < ((count - 2) * (-1000))) {
            banners.style.marginLeft = banner_left + speed + 'px';
        } else {
            for(var j in arr1) {
                window.clearInterval(arr1[j]);
            }
        
            if(count > 1) {
                count--;
            }
            if(banner_left % 1000 == 0) {
                arr3.push(window.setInterval('move()', 25));
            }
        }
    } else {
        for(var j in arr1) {
            window.clearInterval(arr1[j]);
            banners.style.marginLeft = banner_left - 9000 + "px";
            count = 10;
        }
    }

}

function moveLeft() {

    var banner_left = banners.offsetLeft;

    if(count < 10) {
        for(var k in arr3) {
            window.clearInterval(arr3[k]);
        }

        if(banner_left > (count * (-1000))) {
            banners.style.marginLeft = banner_left - speed + 'px';
        } else {
            for(var i in arr2) {
                window.clearInterval(arr2[i]);
            }
            if(count < 10) {
                count++;
            }

        }
        if(banner_left % 1000 == 0) {
            arr3.push(window.setInterval('move()', 25));
        }

    } else {
        for(var i in arr2) {
            window.clearInterval(arr2[i]);
            banners.style.marginLeft = banner_left + 9000 + "px";
            count = 0;
        }

    }

}

document.getElementById('right-btn').onclick = function() {
    arr2.push(window.setInterval('moveLeft()', 10));
}
document.getElementById('left-btn').onclick = function() {
    arr1.push(window.setInterval('moveRight()', 10));
}
//    大图轮播自动轮播

arr3.push(window.setInterval('move()', 25));

function move() {
    var banner_le = banners.offsetLeft;
    banners.style.marginLeft = banner_le - speed + 'px';
    if(banner_le == 0) {
        count = 1;
        for(var k in arr3) {
            clearInterval(arr3[k]);

        }
        window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000);

    }
    if(banner_le == (-1000)) {
        count = 2;
        for(var k in arr3) {
            clearInterval(arr3[k]);

        }
        window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000);

    }
    if(banner_le == (-2000)) {
        count = 3;
        for(var k in arr3) {
            clearInterval(arr3[k]);

        }
        window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000);

    }
    if(banner_le == (-3000)) {
        count = 4;
        for(var k in arr3) {
            clearInterval(arr3[k]);

        }
        window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000);

    }
    if(banner_le == (-4000)) {
        count = 5;
        for(var k in arr3) {
            clearInterval(arr3[k]);

        }
        window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000);

    }
    if(banner_le == (-5000)) {
        count = 6;
        for(var k in arr3) {
            clearInterval(arr3[k]);

        }
        window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000);

    }
    if(banner_le == (-6000)) {
        count = 7;
        for(var k in arr3) {
            clearInterval(arr3[k]);

        }
        window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000);

    }
    if(banner_le == (-7000)) {
        count = 8;
        for(var k in arr3) {
            clearInterval(arr3[k]);

        }
        window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000);

    }
    if(banner_le == (-8000)) {
        count = 9;
        for(var k in arr3) {
            clearInterval(arr3[k]);

        }
        window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000);

    }
    if(banner_le == (-9000)) {
        count = 10;
        for(var k in arr3) {
            clearInterval(arr3[k]);

        }
        window.setTimeout("arr3.push(window.setInterval('move()',25));", 2000);
        banners.style.marginLeft = banner_le + 9000 + "px";
        count = 0;
    }
}
//    
document.getElementById('buy-btn').onclick = function() {

    var b_width = document.body.clientWidth;
    var b_height = document.documentElement.clientHeight;
    var left = b_width / 2 - 400 + 'px';
    var top = b_height / 2 - 250 + 'px';
    var mask = document.createElement('div');
    mask.style.height = b_height + 'px';
    mask.id = 'mask';

    document.body.appendChild(mask);

    var pop_login = document.createElement('div');
    pop_login.style.left = left;
    pop_login.style.top = top;
    pop_login.className = "pop-login";
    pop_login.innerHTML = '<form action="#" method="post" style="margin-top:10px;">' +

        '<table border="1" width="400" bgcolor="sandybrown" align="center">' +
        '<tr>' + '<td align="right" width="30%">' + '请填写你的姓名：' + '</td>' +

        '<td>' + '<input type="text" name="ID">' + '</td>' + '</tr>' +
        '<tr>' +
        '<td align="right" width="30%">' + '性别' + '</td>' +
        '<td>' + '<input type="radio" name="sex" id="sex1" value="0">' +
        '<label for="sex1">' + '男' + '</label>' +
        '<input type="radio" name="sex" id="sex2" value="1">' +
        '<label for="sex2">' + '女' + '</label>' + '</td>' +
        '</tr>' +
        '<tr>' + '<td width="30%" align="right">' + '请填写你的收货地址：' + '</td>' +
        '<td>' + '<input type="text" name="name" placeholder="乡镇具体到街道">' + '</td>' + '</tr>' +
        '<tr>' + '<td align="right" width="30%">' + '请填写你的联系电话：' + '</td>' +
        '<td>' + '<input type="text" name="ID">' + '</td>' + '</tr>' +
        '<tr>' + '<td align="right" width="30%">' + '请选择购买的规格：' + '</td>' +
        '<td>' + '<select name="time1">' +
        '<option value="小白菜">' + '小白菜' + '</option>' +
        '<option value="大白菜">' + '大白菜' + '</option>' +
        '<option value="巨型白菜">' + '巨型白菜' + '</option>' +
        '</select>' + '</td>' + '</tr>' +
        '<tr>' +
        '<td align="right" width="30%">' + 'BHGG大白菜<br />具有的优势' + '</td>' +
        '<td>' + '<select name="time2" size="5">' +
        '<option value="白色大白菜甘甜">' + '白色大白菜甘甜' + '</option>' +
        '<option value="个头大养分多">' + '个头大养分多' + '</option>' +
        '<option value="根小叶密">' + '根小叶密' + '</option>' +
        '<option value="结实有分量">' + '结实有分量' + '</option>' +
        '<option value="新鲜有活力">' + '新鲜有活力' + '</option>' +

        '</select>' + '</td>' + '</tr>' +

        '<tr>' +
        '<td align="right" width="30%">' + '您购买的白菜用途' + '</td>' +
        '<td>' +
        '<input type="checkbox" name="ys" id="ys1">' +
        '<label for="ys1">' + '酒店' + '</label>' +
        '<input type="checkbox" name="ys" id="ys2">' +
        '<label for="ys2">' + '家庭' + '</label>' +
        '<input type="checkbox" name="ys" id="ys3">' +
        '<label for="ys3">' + '养殖' + '</label>' +
        '<input type="checkbox" name="ys" id="ys4">' +
        '<label for="ys4">' + '其他用途' + '</label>' +

        '</td>' +
        '</tr>' +
        '<tr>' +
        '<td align="right" width="30%">' + '请填写一下您的购买要求' + '</td>' +
        '<td>' + '<textarea>' + '</textarea>' + '</td>' +
        '</tr>' +
        '<tr>' +
        '<td align="right" width="30%">' + '购买的数量' + '</td>' +
        '<td>' +
        '<input type="button" id="jian" onclick="shao()" value="-"/>' +
        '<span id="coun">' + '1' + '</span>' +
        '<input type="button" id="jia" onclick="duo()" value="+"/>' + '<span>' + '斤' + '</span>' +
        '</td>' +
        '</tr>' +
        '<tr>' +
        '<td colspan="2">' +
        '<img src="img/anniu.jpg" style="width: 150px;height: 50px;margin-left: 120px;"/>' +
        '</td>' +
        '</tr>' +

        '</table>' +
        '</form>' +
        '<div id="close-pop">' +
        '<img src="img/guanbi.png" style="width: 60px;height: 60px;"/>' +
        '</div>';
    document.body.appendChild(pop_login);
    document.getElementById('close-pop').onclick = function() {
        document.body.removeChild(mask);
        document.body.removeChild(pop_login);
    }
    mask.onclick = function() {
        document.body.removeChild(mask);
        document.body.removeChild(pop_login);
    }
}

function shao() {

    document.getElementById('coun').innerText -= 1;
}

function duo() {

    var o = document.getElementById('coun');
    o.innerText = parseInt(o.innerText) + 1;
}

 

标签：

相关文章