首页 > 代码库 > 第八章----好的结束,新的开始

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

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

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

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

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

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>BHGG生态园</title>
        <link rel="stylesheet"  type="text/css" href=http://www.mamicode.com/"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=http://www.mamicode.com/"#caizhai" onm ouseover="color1()" onm ouseleave="color()">
                        <img src=http://www.mamicode.com/"img/img2.jpg" class="img-head" />
                    </a>
                </div>
                <div class="btn">
                    <a href=http://www.mamicode.com/"#shuguotan" onm ouseover="color2()" onm ouseleave="color()">
                        <img src=http://www.mamicode.com/"img/img1.jpg" class="img-head" />
                    </a>
                </div>
                <div class="btn">
                    <a href=http://www.mamicode.com/"#xumu" onm ouseover="color3()" onm ouseleave="color()">
                        <img src=http://www.mamicode.com/"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=http://www.mamicode.com/"img/img4.jpg" class="putao-img" />
                        </div>
                        <div class="putao-text1">
                            红 提: 又称美国红提、晚红、红地球、大红球。果穗大,长势好,果穗特大,平均穗重800g,最大可达2500g,极易丰产,种植第二年可达2500公斤;该品种果粒圆至近圆锥形,粒重11-13g,最大22g,果皮鲜红色至紫红色,果肉硬脆,用刀切片不淌汁,味甜,具有独特的清香味,不裂果,果柄拉力强,果实成熟后留树可保存1-2个月,我园区于7月底成熟。
                        </div>
                        <div>
                            <img src=http://www.mamicode.com/"img/img5.jpg" class="putao-img" />
                        </div>
                        <div class="putao-text1">
                            金 手 指: 属欧美杂交种,果穗巨大,松紧适度,平均穗重750克,最大穗重1500克。果粒形状奇特美观,果皮中等厚,韧性强,不裂果。果肉硬,可切片,耐贮运,含糖量20%-22%,甘甜爽口,有浓郁的冰糖味和牛奶味。果柄与果粒结合牢固,捏住一粒果可提起整穗果,是唯一的高糖度早熟欧美杂交种。我园区6月初成熟属中早熟品种。
                        </div>
                        <div>
                            <img src=http://www.mamicode.com/"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=http://www.mamicode.com/"img/img7.jpg" class="putao-img" />
                        </div>
                        <div class="putao-text1">2)补血养颜 桑葚为桑科落叶乔木桑树的成熟果实,于果实红熟时采收,晒干或生用、或加蜜熬膏用。桑葚味甘、酸,性寒。能滋补肝肾、补血养颜、生津止渴。可用于肝肾阴亏、腰膝酸软、目暗耳鸣、关节不利、津亏血少、口渴烦热、肠燥便秘等症。现代药理研究证明,桑葚含有多种维生素,尤其是含有丰富的磷和铁,能益肾补血,使人面色红润,头发漆黑亮丽。若与黑豆、枣肉相配,还能提供使头发变黑的黑色素及供头发生长所需的蛋白质。 其他功效 当然,桑葚除了以上两种好处,还有很多功效。生津润肠、清肝明目、安神养颜、补血乌发等,都是桑葚的功效;现代医学还发现桑葚具有调节免疫、促进造血细胞生长、抗诱变、抗衰老、降血脂、护肝等保健作用。适合人群:一般成人适合食用。女性、中老年人及过度用眼者更宜食用。每日20~30颗(30~50克)。
                        </div>
                        <div>
                            <img src=http://www.mamicode.com/"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=http://www.mamicode.com/"img/img9.jpg" class="putao-img" />
                        </div>
                        <div class="putao-text1">
                            草莓富含氨基酸、果糖、蔗糖、葡萄糖、柠檬酸、苹果酸、果胶、胡萝卜素、维生素B1、B2、烟酸及矿物质钙、镁、磷、钾、铁等,这些营养素对生长发育有很好的促进作用,对老人、儿童大有裨益。国外学者研究发现,草莓中的有效成分,可抑制癌肿的生长。每百克草莓含维生素C50-100毫克,比苹果、葡萄高10倍以上。科学研究业已证实,维生素C能消除细胞间的松弛与紧张状态,使脑细胞结构坚固,皮肤细腻有弹性,对脑和智力发育有重要影响。饭后吃一些草莓,可分解食物脂肪,有利消化。

                        </div>
                        <div>
                            <img src=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"欢迎来到BHGG蔬果摊!新鲜蔬果还有3秒到达现场!">

            <span id="time" style="margin-left: 80px;"></span>
            <div id="shuguo">
                <div class="chanpin">
                    <div class="shuguo-div">
                        <img src=http://www.mamicode.com/"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=http://www.mamicode.com/"购买">
                    </div>
                </div>

                <div class="chanpin">
                    <div class="shuguo-div">
                        <img src=http://www.mamicode.com/"img/cape.jpg" class="shuguo-img" />
                    </div>
                    <div class="shuguo-text">
                        油菜之王
                    </div>
                    <div class="buy">
                        <input type="button" class="buy-bn" value=http://www.mamicode.com/"购买">
                    </div>
                </div>
                <div class="chanpin">
                    <div class="shuguo-div">
                        <img src=http://www.mamicode.com/"img/dragon.jpg" class="shuguo-img" />
                    </div>
                    <div class="shuguo-text">
                        愤怒的火龙果
                    </div>
                    <div class="buy">
                        <input type="button" class="buy-bn" value=http://www.mamicode.com/"购买">
                    </div>
                </div>
                <div class="chanpin">
                    <div class="shuguo-div">
                        <img src=http://www.mamicode.com/"img/watermelon.jpg" class="shuguo-img" />
                    </div>
                    <div class="shuguo-text">
                        现摘现买的沃特卖人
                    </div>
                    <div class="buy">
                        <input type="button" class="buy-bn" value=http://www.mamicode.com/"购买">
                    </div>
                </div>
                <div class="chanpin">
                    <div class="shuguo-div">
                        <img src=http://www.mamicode.com/"img/putao.jpg" class="shuguo-img" />
                    </div>
                    <div class="shuguo-text">
                        葡萄娃
                    </div>
                    <div class="buy">
                        <input type="button" class="buy-bn" value=http://www.mamicode.com/"购买">
                    </div>
                </div>
                <div class="chanpin">
                    <div class="shuguo-div">
                        <img src=http://www.mamicode.com/"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=http://www.mamicode.com/"购买">
                    </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=http://www.mamicode.com/"img/pig3.jpg" class="da-img" />
                            </div>
                            <div class="da">
                                <img src=http://www.mamicode.com/"img/pig2.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src=http://www.mamicode.com/"img/pig1.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src=http://www.mamicode.com/"img/niu.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src=http://www.mamicode.com/"img/yang.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src=http://www.mamicode.com/"img/pig4.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src=http://www.mamicode.com/"img/chick.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src=http://www.mamicode.com/"img/sheep.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src=http://www.mamicode.com/"img/pig5.jpg" class="da-img">
                            </div>
                            <div class="da">
                                <img src=http://www.mamicode.com/"img/pig6.jpg" class="da-img">
                            </div>
                        </div>
                </div>
            </div>

    </body>

</html>
<script type="text/javascript" src=http://www.mamicode.com/"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="http://www.mamicode.com/0"> +
        <label for="sex1"> +  + </label> +
        <input type="radio" name="sex" id="sex2" value="http://www.mamicode.com/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="http://www.mamicode.com/小白菜"> + 小白菜 + </option> +
        <option value="http://www.mamicode.com/大白菜"> + 大白菜 + </option> +
        <option value="http://www.mamicode.com/巨型白菜"> + 巨型白菜 + </option> +
        </select> + </td> + </tr> +
        <tr> +
        <td align="right" width="30%"> + BHGG大白菜<br />具有的优势 + </td> +
        <td> + <select name="time2" size="5"> +
        <option value="http://www.mamicode.com/白色大白菜甘甜"> + 白色大白菜甘甜 + </option> +
        <option value="http://www.mamicode.com/个头大养分多"> + 个头大养分多 + </option> +
        <option value="http://www.mamicode.com/根小叶密"> + 根小叶密 + </option> +
        <option value="http://www.mamicode.com/结实有分量"> + 结实有分量 + </option> +
        <option value="http://www.mamicode.com/新鲜有活力"> + 新鲜有活力 + </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="http://www.mamicode.com/-"/> +
        <span id="coun"> + 1 + </span> +
        <input type="button" id="jia" onclick="duo()" value="http://www.mamicode.com/+"/> + <span> +  + </span> +
        </td> +
        </tr> +
        <tr> +
        <td colspan="2"> +
        <img src="http://www.mamicode.com/img/anniu.jpg" style="width: 150px;height: 50px;margin-left: 120px;"/> +
        </td> +
        </tr> +

        </table> +
        </form> +
        <div id="close-pop"> +
        <img src="http://www.mamicode.com/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;
}

 

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