大学人机交互课小组作业（刚入坑菜鸟一枚，求别喷吼吼）
生活随笔
收集整理的這篇文章主要介紹了
大学人机交互课小组作业（刚入坑菜鸟一枚，求别喷吼吼）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
老師讓小組設計一個網站，我想我不如直接先把這個網站寫出來，顯得更用心一點，選的主題是河南美食
代碼如下
HTML部分：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>豫香食苑</title><link rel="stylesheet" href="meishihui.css"> </head> <body > <!--頂部--> <div class="fixed" ><div class="content"><span>豫香食苑</span><ul><li><a href="#">關于</a> </li><li><a href="#">作品</a> </li><li><a href="#">隨手記</a> </li><li><a href="#">聯系</a> </li></ul><a href=""><img src="img/xinlang.ico"></a><a href=""> <img src="img/wechat.png"></a><a href=""><img src="img/qq.png"></a><a href="javascript:void(0)">登錄</a><a href="javascript:void(0)" style="color: black">|</a><a href="javascript:void(0)" style="color: black">注冊</a></div> </div> <!--大標題--> <div class="title"><span>豫香食苑</span><a href="javascript:void(0)" style="color:#b0b0b0">喚醒沉睡的味蕾丨與食物相濡以沫</a> </div> <!--導航欄--> <div class="nav"><div class="nav-title"><a href="#">首頁</a><a href="#">胡辣湯</a><a href="#">開封灌湯包</a><a href="#">涼粉</a><a href="#">燴面</a><a href="#">漿面條</a><a href="#">道口燒雞</a></div> </div> <!--輪播圖--> <div ><div class="adbox" ><div class="ad" id="ad"><div class="pics" id="pics"><img src="img/胡辣湯.jpg"> <img src="img/小籠包.jpg"><img src="img/漿面條.jpg"><img src="img/涼粉.jpg"><div class="dots" id="dots"><span class="current"></span><span ></span><span ></span><span ></span></div><div class="menu" id="menu"><span>胡辣湯</span><span>開封灌湯包</span><span>涼粉</span><span>燴面</span><span>漿面條</span><span>道口燒雞</span></div></div><!--上下頁按鈕--><div><a href="javascript:void(0)" class="button prev" id="prev"></a><a href="javascript:void(0)" class="button next" id="next"></a></div></div><!--hotfood--><div class="midad"><div class="adtitle"><span>HOT FOOD</span><div class="but"><div class="zuo" id="left"><</div><div class="you" id="right">></div></div></div><div class="hotfood" ><div class="hotinner" id="hotinner"><div class="food food1"><img src="img/胡辣湯.jpg"><div class="foodtitle"><span style="display: inline-block">胡辣湯</span><br/><span style="display: block;font-size: 15px;color: #999">Pork with salted vegetable</span><br/><span style="font-size: 13px;color: #666">胡辣湯是逍遙鎮的最為有名，是河南人最喜歡吃的早餐之一,胡辣湯加了胡椒所以叫胡辣湯,胡辣湯的湯汁濃郁，顏色好看,湯汁粘稠、</span></div></div><div class="food food2"><img src="img/小籠包.jpg"><div class="foodtitle"><span style="display: inline-block">開封灌湯包</span><br/><span style="display: block;font-size: 15px;color: #999">Sichuan style stew pork</span><br/><span style="font-size: 13px;color: #666">灌湯包顧名思義就是餡兒里有湯的包子,在北宋時它是皇家食品，慢慢的才上了平常百姓家的餐桌，灌湯包的個頭很均勻看著美觀,里面的內容更是很別致，面皮薄薄的,肉餡兒里還有湯</span></div></div><div class="food food3"><img src="img/涼粉.jpg"><div class="foodtitle"><span style="display: inline-block">涼粉</span><br/><span style="display: block;font-size: 15px;color: #999">Stir-fry</span><br/><span style="font-size: 13px;color: #666">涼粉是一道傳統特色小吃，色澤潔白，晶瑩剔透，嫩滑爽口。如豌豆粉、綠豆粉、山芋粉等, 爽口清香味濃</span></div></div><div class="food food4"><img src="img/food4.png"><div class="foodtitle"><span style="display: inline-block">營養品盤</span><br/><span style="display: block;font-size: 15px;color: #999">Make dish</span><br/><span style="font-size: 13px;color: #666">做法：1.把豬肉的肉皮刮洗干凈，放入冷水鍋中，大火煮至八成熟。2.撈出擦去水分，趁熱抹上醬油。3.炒鍋倒油...</span></div></div><div class="food food2"><img src="img/food5.png"><div class="foodtitle"><span style="display: inline-block">金陵丸子</span><br/><span style="display: block;font-size: 15px;color: #999">Jinling balls</span><br/><span style="font-size: 13px;color: #666">做法：1、帶皮五花肉冷水下鍋加入蔥段、姜片，花椒7、8粒，黃酒適量煮開。2、撇凈浮沫，煮至八成熟，取出...</span></div></div><div class="food food3"><img src="img/food6.png"><div class="foodtitle"><span style="display: inline-block">可樂雞翅</span><br/><span style="display: block;font-size: 15px;color: #999">Cola chicken wings</span><br/><span style="font-size: 13px;color: #666">做法：11.白菜洗凈，瀝干水。用手撕成你喜歡的大小。2.鹽，生抽，醋，糖，清水（有高湯更好），水淀粉，將...</span></div></div></div></div></div><!--達人點評--> <div id="evaluate" ><span>胡辣湯印象</span> </div > <div class="evaluate" ><div class="inner"><div class="leftbox"><img src="img/胡辣湯.jpg"></div><div class="rightbox"><div class="top" ><img src="img/user.png"><p>精選評價</p><span>胡辣湯絕對是讓所有在外打拼的河南老鄉魂牽夢縈的美食了。回想起在外求學的時光，思鄉的日日夜夜每每想起胡辣湯，那枕巾都濕透了——口水眼淚齊飛</span></div><div class="botto"><img src="img/user.png"><p>精選評價</p><span>最愛逍遙鎮胡辣湯，你們要是把胡辣湯玩漲價了，我饒不了你們</span></div><div class="hr"></div></div><div class="bottobox"><div class="text"><p style="font-size: 25px;margin-top: 35px">胡辣湯</p><p style="color: #b0b0b0">Sir loin</p><span >胡辣湯是逍遙鎮的最為有名，是河南人最喜歡吃的早餐之一,胡辣湯加了胡椒所以叫胡辣湯,胡辣湯的湯汁濃郁，顏色好看,湯汁粘稠、香辣可口,胡辣湯有養心，益腎、 健脾，止渴的功效,而胡辣湯搭配油條是更好吃的。</span></div><div class="book"><a href="#">我要搶購</a> </div></div><div class="login"><div id="login">賬號登陸</div><div id="recommend">登陸賬號快速查詢您的物流</div><div class="name site"><div class="phone"><img src="img/phone_02.png"></div><input type="text" placeholder=" 請輸入手機號"></div><div class="password site"><div class="phone"><img src="img/LC_icon_menu_line_1.png"></div><input type="text" placeholder=" 驗證碼"><div class="verify" ><a href="#">發送驗證碼</a> </div></div><div class="butt site"><a href="#">登陸</a> </div></div></div></div> <!--經典美食--> <div id="classic"><p>營養菜單</p> </div> <div class="classic"><div class="slide slide1"><img src="img/food6.png"><p class="ftitle">可樂雞翅</p><p class="ftitle2">Cola chicken wings</p><span> 步驟：1.將五花肉切成正方塊，梅菜干用溫水泡10-15分鐘。2.鍋里沸水中放入五花肉、加蔥白、料酒、姜片焯煮幾分鐘。3.將五花肉撈出，然后在五花肉幾面都均勻抹上生抽，使肉上色。4.另起鍋再次放油，五花肉放入鍋中中高火小炸后，將五花肉取出稍放涼。5.梅菜干加調料炒勻備用。同時將調料一起調勻備用。[...]6.五花肉稍放涼后切薄片每片約長8厘米、寬4厘米、厚0.5厘米。7.取一個圓碗，在圓碗上均勻涂上一層調料（c），以使鋪上的肉塊更上色。8在圓碗里，將1/3的梅干菜盛在碗中墊底，將切好的五花肉塊整齊鋪在梅干菜上，每鋪一層肉塊，就涂一層調料（b），一定要均勻涂上，最后再在碗周邊再鋪上一圈梅干菜，再將余下的調料（b）倒在最外層肉塊和梅菜干上。9.鍋內放水，將鋪好肉的碗放放，大火轉中火，蒸50-60分鐘，直至肉軟爛又不爛，即可。或隔水蒸熟，時間要稍久一點。蒸好然后取汁出來，直接往碗里再澆上，這樣做一次更入味。10.取汁后，將肉復扣在大盤子中，將梅菜干在肉周圍擺上一圈。</span></div><div class="slide slide2"><img src="img/food5.png"><p class="ftitle">金陵丸子</p><p class="ftitle2">Jinling balls</p><span> 步驟：1.將五花肉切成正方塊，梅菜干用溫水泡10-15分鐘。2.鍋里沸水中放入五花肉、加蔥白、料酒、姜片焯煮幾分鐘。3.將五花肉撈出，然后在五花肉幾面都均勻抹上生抽，使肉上色。4.另起鍋再次放油，五花肉放入鍋中中高火小炸后，將五花肉取出稍放涼。5.梅菜干加調料炒勻備用。同時將調料一起調勻備用。[...]6.五花肉稍放涼后切薄片每片約長8厘米、寬4厘米、厚0.5厘米。7.取一個圓碗，在圓碗上均勻涂上一層調料（c），以使鋪上的肉塊更上色。8在圓碗里，將1/3的梅干菜盛在碗中墊底，將切好的五花肉塊整齊鋪在梅干菜上，每鋪一層肉塊，就涂一層調料（b），一定要均勻涂上，最后再在碗周邊再鋪上一圈梅干菜，再將余下的調料（b）倒在最外層肉塊和梅菜干上。9.鍋內放水，將鋪好肉的碗放放，大火轉中火，蒸50-60分鐘，直至肉軟爛又不爛，即可。或隔水蒸熟，時間要稍久一點。 蒸好然后取汁出來，直接往碗里再澆上，這樣做一次更入味。10.取汁后，將肉復扣在大盤子中，將梅菜干在肉周圍擺上一圈。</span></div><div class="slide slide3"><img src="img/food4.png"><p class="ftitle">營養拼盤</p><p class="ftitle2">Made dish</p><span> 步驟：1.將五花肉切成正方塊，梅菜干用溫水泡10-15分鐘。2.鍋里沸水中放入五花肉、加蔥白、料酒、姜片焯煮幾分鐘。3.將五花肉撈出，然后在五花肉幾面都均勻抹上生抽，使肉上色。4.另起鍋再次放油，五花肉放入鍋中中高火小炸后，將五花肉取出稍放涼。5.梅菜干加調料炒勻備用。同時將調料一起調勻備用。[...]6.五花肉稍放涼后切薄片每片約長8厘米、寬4厘米、厚0.5厘米。7.取一個圓碗，在圓碗上均勻涂上一層調料（c），以使鋪上的肉塊更上色。8在圓碗里，將1/3的梅干菜盛在碗中墊底，將切好的五花肉塊整齊鋪在梅干菜上，每鋪一層肉塊，就涂一層調料（b），一定要均勻涂上，最后再在碗周邊再鋪上一圈梅干菜，再將余下的調料（b）倒在最外層肉塊和梅菜干上。9.鍋內放水，將鋪好肉的碗放放，大火轉中火，蒸50-60分鐘，直至肉軟爛又不爛，即可。或隔水蒸熟，時間要稍久一點。蒸好然后取汁出來，直接往碗里再澆上，這樣做一次更入味。10.取汁后，將肉復扣在大盤子中，將梅菜干在肉周圍擺上一圈。</span></div><div class="slide slide4"><img src="img/food3.png"><p class="ftitle">熗炒白菜</p><p class="ftitle2">Stir-fry</p><span> 步驟：1.將五花肉切成正方塊，梅菜干用溫水泡10-15分鐘。2.鍋里沸水中放入五花肉、加蔥白、料酒、姜片焯煮幾分鐘。3.將五花肉撈出，然后在五花肉幾面都均勻抹上生抽，使肉上色。4.另起鍋再次放油，五花肉放入鍋中中高火小炸后，將五花肉取出稍放涼。5.梅菜干加調料炒勻備用。同時將調料一起調勻備用。[...]6.五花肉稍放涼后切薄片每片約長8厘米、寬4厘米、厚0.5厘米。7.取一個圓碗，在圓碗上均勻涂上一層調料（c），以使鋪上的肉塊更上色。8在圓碗里，將1/3的梅干菜盛在碗中墊底，將切好的五花肉塊整齊鋪在梅干菜上，每鋪一層肉塊，就涂一層調料（b），一定要均勻涂上，最后再在碗周邊再鋪上一圈梅干菜，再將余下的調料（b）倒在最外層肉塊和梅菜干上。9.鍋內放水，將鋪好肉的碗放放，大火轉中火，蒸50-60分鐘，直至肉軟爛又不爛，即可。或隔水蒸熟，時間要稍久一點。 蒸好然后取汁出來，直接往碗里再澆上，這樣做一次更入味。10.取汁后，將肉復扣在大盤子中，將梅菜干在肉周圍擺上一圈。</span></div><div class="slide slide5"><img src="img/food2.png"><p class="ftitle">回鍋肉</p><p class="ftitle2">Sichuan style stew pork</p><span> 步驟：1.將五花肉切成正方塊，梅菜干用溫水泡10-15分鐘。2.鍋里沸水中放入五花肉、加蔥白、料酒、姜片焯煮幾分鐘。3.將五花肉撈出，然后在五花肉幾面都均勻抹上生抽，使肉上色。4.另起鍋再次放油，五花肉放入鍋中中高火小炸后，將五花肉取出稍放涼。5.梅菜干加調料炒勻備用。同時將調料一起調勻備用。[...]6.五花肉稍放涼后切薄片每片約長8厘米、寬4厘米、厚0.5厘米。7.取一個圓碗，在圓碗上均勻涂上一層調料（c），以使鋪上的肉塊更上色。8在圓碗里，將1/3的梅干菜盛在碗中墊底，將切好的五花肉塊整齊鋪在梅干菜上，每鋪一層肉塊，就涂一層調料（b），一定要均勻涂上，最后再在碗周邊再鋪上一圈梅干菜，再將余下的調料（b）倒在最外層肉塊和梅菜干上。9.鍋內放水，將鋪好肉的碗放放，大火轉中火，蒸50-60分鐘，直至肉軟爛又不爛，即可。或隔水蒸熟，時間要稍久一點。 蒸好然后取汁出來，直接往碗里再澆上，這樣做一次更入味。10.取汁后，將肉復扣在大盤子中，將梅菜干在肉周圍擺上一圈。</span></div><div class="slide slide6"><img src="img/food1.png"><p class="ftitle">梅菜扣肉</p><p class="ftitle2">Pork with salted vegetable</p><span> 步驟：1.將五花肉切成正方塊，梅菜干用溫水泡10-15分鐘。2.鍋里沸水中放入五花肉、加蔥白、料酒、姜片焯煮幾分鐘。3.將五花肉撈出，然后在五花肉幾面都均勻抹上生抽，使肉上色。4.另起鍋再次放油，五花肉放入鍋中中高火小炸后，將五花肉取出稍放涼。5.梅菜干加調料炒勻備用。同時將調料一起調勻備用。[...]6.五花肉稍放涼后切薄片每片約長8厘米、寬4厘米、厚0.5厘米。7.取一個圓碗，在圓碗上均勻涂上一層調料（c），以使鋪上的肉塊更上色。8在圓碗里，將1/3的梅干菜盛在碗中墊底，將切好的五花肉塊整齊鋪在梅干菜上，每鋪一層肉塊，就涂一層調料（b），一定要均勻涂上，最后再在碗周邊再鋪上一圈梅干菜，再將余下的調料（b）倒在最外層肉塊和梅菜干上。9.鍋內放水，將鋪好肉的碗放放，大火轉中火，蒸50-60分鐘，直至肉軟爛又不爛，即可。或隔水蒸熟，時間要稍久一點。 蒸好然后取汁出來，直接往碗里再澆上，這樣做一次更入味。10.取汁后，將肉復扣在大盤子中，將梅菜干在肉周圍擺上一圈。</span></div> </div><!--返回頂部--><div class="backTop" id="backTop">返回頂部</div><div class="bottom-nav"><span>|</span><span>首頁</span><span>|</span><span>關于</span><span>|</span><span>隨手記</span><span>|</span><span>物流</span><span>|</span> </div><div class="footer"><div class="footertext">滬ICP備654342號-4 | 美食燴版權所有 2016</div> </div> <script src="meishihui.js"></script> </body> </html>css部分
*{margin: 0;padding: 0; } @font-face {font-family: "lixuke";src: url(fonts/LiXuKe.ttf); } .fixed{width: 100%;height: 45px;background-color: #f5f5f5; } .content{width: 1200px;height: 45px;margin: 0 auto; } .content span{display: inline-block;font-family: "lixuke";font-size: 28px;line-height: 45px;float: left; } .content ul{float: left;line-height: 45px;list-style: none; } .content li{float: left;margin-left: 40px; } .content ul a{color: black;font-size: 16px; } .content a{text-decoration: none;color: red;font-size: 18px;float: right;margin-left: 20px;line-height: 45px; } .content a:hover{color: red; } .content img{width: 25px;height: 25px;border-radius: 25px;float: right;margin-top: 10px;} .fixed a{margin-left: 20px; } .title{margin-top: 20px;width: 100%;height: 150px;text-align: center;/*border: 1px solid black;*/ } .title span{text-align: center;font-family: lixuke;font-size:100px;display: block;margin-bottom: 10px } .title a{text-decoration: none;text-align: center; } .nav{margin-top: 15px;width: 100%;height: 55px;/*border-top: 1px solid #b0b0b0;*//*border-bottom: 1px solid #b0b0b0;*/line-height: 55px;font-size: 20px;background-color: rgb(0,0,0,0.1); } .nav-title{width: 930px;margin: 0 auto;/*border: 1px solid black;*/ } .nav-title a{text-decoration: none;color: black;margin-left: 50px; } .nav-title a:hover{color: #ff6700; } .menu{position: absolute;left: 0;top: 0;width: 220px;height: 360px;background-color: rgba(0,0,0,0.1); } .adbox{width: 100%;height: 360px; } .ad{width: 990px;height: 360px;margin: 20px auto;position: relative; } .pics{width: 990px;height: 360px;overflow: hidden;position: relative;cursor: pointer; } .pics span{display: block;height: 60px;width: 220px;color: white;font-size: 18px;line-height: 60px;text-align: center;background: url("img/iconfont-arrow(1).png") no-repeat right center / 10% 20%;cursor: pointer; } .dots{position: absolute;right: 20px;bottom: 10px; } .dots span{display: inline-block;width: 10px;height: 10px;border-radius: 10px;margin-left: 6px;box-shadow: 0 0 4px 1px rgba(0,0,0,0.2) inset; }.dots .current{background-color: white; } .button{position: absolute;width: 40px;height: 70px;right: 0;top:50%;margin-top: -35px;background: url("img/iconfont-arrow(1).png") no-repeat center center;opacity: 0.4;filter: opacity(40);z-index: 999; } .prev{left: 220px;transform: rotate(180deg); /*圖標逆轉*/ } .button:hover{background-color: #717377;opacity: 0.8;filter: opacity(80); /*兼容瀏覽器*/ } .midad{width: 100%;height: 410px;margin-top: 20px; } .adtitle{width: 990px;height: 40px;margin: 0 auto;position: relative; } .adtitle span{font-size: 20px;line-height: 50px;text-align: center;display: block;color: red;position: absolute;left: 0; }*{.but{width: 71px;height: 25px;position: absolute;right: 0;border: 1px solid #b0b0b0;bottom: 2px; } .zuo{width: 35px;height: 25px;border-right: 1px solid #b0b0b0;float: left;text-align: center;line-height: 25px;cursor: pointer; } .you{width: 35px;height: 25px;float: left;text-align: center;line-height: 25px;cursor: pointer; } .hotfood{width: 990px;height: 370px;margin: 20px auto;position: relative;overflow: hidden; } .hotinner{width: 205%;position: absolute;left: 0; } .food{width: 310px;height: 370px;float: left; } .food img{width: 310px;height: 209px;} .food2,.food3, .food4{margin-left: 30px; } .foodtitle{width: 310px;height:160px;text-align: center; } #evaluate{margin: 0 auto;width: 990px;height: 40px;color: red;font-size: 25px;} .evaluate{width: 100%;height: 750px;margin-top: 20px;background-color: #f6f6f6;} .inner{width: 990px;height:750px;margin: 0 auto;position: relative; } .leftbox{width: 670px;height: 380px;position: absolute; } .leftbox img{width: 670px;height: 380px; } .bottobox{width: 670px;height: 260px;position: absolute;left: 0;top: 380px; } .text span{display: inline-block;margin-top: 20px;text-align: left;font-size: 18px } .rightbox{width:310px;height: 380px;position: absolute;right: 0;font-size: 15px;font-family: 微軟雅黑; } p{text-align: center; } .hr{width: 120px;height: 0;border: 1px solid #eee;margin: 390px auto; } .rightbox span{display: block;margin-top: 20px;color: #666; } .rightbox img{margin-top: 10px;margin-left: 120px; } .top{height: 190px;width: 100%;position: absolute;top: 0; } .botto{height: 190px;width: 100%;position: absolute;top: 190px; } .text{text-align: center; } .login{width: 310px;height:300px;position: absolute;right: 0;top:420px;background-color: rgb(230,245,249); } .book{width: 100px;height: 40px;background-color: red;position: absolute;top: 95%;left: 43%;text-align: center; } .book a{text-decoration: none;color: white;font-size: 20px;line-height: 40px; } .site{width: 285px;height: 40px;margin: 22px auto;background-color: white; } .phone{margin-top: 5px;width: 30px;height: 30px;float: left; } .phone img{width: 30px;height: 30px; } .login input{display: block;width:230px;float: left;height: 40px;font-size: 18px;border: none;outline: none; } .butt{background-color: red;font-size: 20px;line-height: 45px;text-align: center; } .butt a{text-decoration: none;color: white; } #login{text-align: center;font-size: 22px;height: 30px;width: 100%;line-height: 30px;margin-top: 30px; } #recommend{text-align: center;font-size: 15px;height: 20px;line-height: 20px;margin-top: 10px;margin-bottom:20px;color: #bcc0c3; } .password{position: relative; } .verify{width: 90px;height:25px;position: absolute;border: 1px solid #e0e0e0;right: 10px;top: 10px; } .verify a{color:#bcc0c3;text-align: center;text-decoration: none;display: block"; } #classic{width: 990px;height: 20px;color: #ff6700;font-size: 25px;margin: 20px auto;line-height: 40px; } .classic{width: 990px;margin: 0 auto;height: 800px; } .slide{width: 310px;height: 360px;margin-left: 20px;float: left;overflow: hidden;text-overflow: ellipsis;margin-top: 20px; } .ftitle{margin-top: 20px;margin-bottom: 5px;} .ftitle2{color: #666;margin-bottom: 5px; } .slide span{font-size: 12px;color: #666;line-height: 25px; } .box{width: 100%;height: 70px;border: 1px solid black; } .backTop{width: 135px;height: 70px;font-size: 20px;color: #dfdfdf;text-align: center;line-height: 70px;margin: 0 auto;cursor: pointer;border: 1px solid #dfdfdf; } .bottom-nav{width: 100%;height: 40px;text-align: center;line-height: 40px;margin-top: 20px;font-size: 18px;color: #605751; } .bottom-nav span{display: inline-block;margin-left: 30px; } .footer{width: 100%;height: 50px;font-size: 20px; } .footertext{line-height: 50px;text-align: center; }js部分
function byId(id) {return typeof(id) ==="string" ? document.getElementById(id) : id; } var index=0; var timer=null; var pics=byId("pics"); var picArr=pics.getElementsByTagName("img"); var dots=byId("dots"); var spanArr=dots.getElementsByTagName("span"); var ad=byId("ad"); var menu=byId("menu"); var menus=menu.getElementsByTagName("span");var timer2=null; var leader=0; var target=0; var backTop=byId("backTop");window.onscroll=function(ev) {leader=scroll().top; }; backTop.onclick=function() {clearInterval(timer2);timer2=setInterval(function(){var step=(target-leader)/10;step=step>0 ? Math.ceil(step):Math.floor(step);leader=step+leader;if(leader===0){clearInterval(timer2);}window.scrollTo(0,leader);},20) }; var left=byId("left"); var right=byId("right"); var hot=byId("hotinner"); right.onmouseover=left.onmouseover=function() {this.style.color='red'; }; right.onmouseout=left.onmouseout=function() {this.style.color=''; }; var timer3=null; right.onclick=function() {clearInterval(timer3);timer3=setInterval(function(){var vall=-1020-hot.offsetLeft;hot.style.left=hot.offsetLeft-10 +"px";if(Math.abs(vall)< 10){hot.style.left=-1020 + "px";clearInterval(timer3);}},5) }; left.onclick=function() {clearInterval(timer3);timer3=setInterval(function(){var vall=0-hot.offsetLeft;hot.style.left=hot.offsetLeft+10 +"px";if(Math.abs(vall)< 10){hot.style.left=0 + "px";clearInterval(timer3);}},5) }; for(var p=0;p<6;p++) {menus[p].onmouseover=function(){this.style.backgroundColor="rgba(0,0,0,0.1)";};menus[p].onmouseout=function(){this.style.backgroundColor="";} } for(var w=0;w<picArr.length;w++) {spanArr[w].data=w;spanArr[w].onmouseover=function(ev){index=this.data;imgChange();} } var prev=byId("prev"),next=byId("next"); next.onclick=function() {index++;index=index>=picArr.length ? 0 : index;imgChange(); }; prev.onclick=function() {index--;index=index<0 ? (picArr.length-1) : index;imgChange(); }; slideImg(); function slideImg() {ad.onmouseover=function(){if(timer){clearInterval(timer);}};ad.onmouseout=function (){timer=setInterval(function (){imgChange();index++;index=index >= picArr.length ? 0 : index;},2000)};ad.onmouseout(); } function imgChange() {for(var i=0;i<picArr.length;i++){picArr[i].style.display='none';spanArr[i].className="";}picArr[index].style.display='block';spanArr[index].className="current"; }function scroll() {if(window.pageYOffset !==undefined){return{"top":window.pageYOffset,"left":window.pageXOffset}}else if(document.compatMode==="BackCompat"){ return{"top":document.body.scrollTop,"left":document.body.scrollLeft}}return{"top":document.documentElement.scrollTop,"left":document.documentElement.scrollLeft} }總結
以上是生活随笔為你收集整理的大学人机交互课小组作业（刚入坑菜鸟一枚，求别喷吼吼）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 弗里德里克·弗朗索瓦·肖邦
- 下一篇： h3c查在线计算机,H3C 交换机查看所