<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘寶商品廣告效果</title>
<script>
window.onload=function () {
var oLi=document.getElementsByTagName('li');
var img = document.getElementsByTagName('img')[0];
var pics = ['8-img/1.png', '8-img/2.png', '8-img/3.png', '8-img/4.png', '8-img/5.png', '8-img/6.png', '8-img/7.png', '8-img/8.png', '8-img/9.png', '8-img/10.png', '8-img/11.png', '8-img/12.png', '8-img/13.png', '8-img/14.png'];
var index=0;
var timer=null;
var init=function () {
for(var i=0;i<oLi.length;i++)
{
oLi[i].style.backgroundColor='#FFFFFF';
oLi[i].getElementsByTagName('a')[0].style.color='#000000';
}
};
for(var i=0;i<oLi.length;i++)
{
oLi[i].index=i;
oLi[i].onmouseover=function () {
clearInterval(timer);
init();
this.style.backgroundColor='#EC4064';
this.getElementsByTagName('a')[0].style.color='#FFFFFF';
img.src=pics[this.index];
};
oLi[i].onmouseout=function () {
this.style.backgroundColor='#FFFFFF';
this.getElementsByTagName('a')[0].style.color='#000000';
timer=setInterval(auto,1000);
}
}
function auto() {
init();
oLi[index].style.backgroundColor='#EC4064';
oLi[index].getElementsByTagName('a')[0].style.color='#FFFFFF';
img.src=pics[index];
if(index<oLi.length/2)
{
index++;
if(index===oLi.length/2)
{
index=oLi.length-1;
}
}
else
{
index--;
if(index===oLi.length/2-1)
{
index=0;
}
}
}
timer=setInterval(auto,1000);
}
</script>
<style>
html, body, ul {
margin: 0;
padding: 0;
}
img {
border: 0;
float: left;
margin: 0 5px;
}
li {
list-style: none;
border: 1px solid #FFADAD;
width: 40px;
padding: 5px;
text-align: center;
font-size: 12px;
}
a {
text-decoration: none;
display: block;
color: #000;
}
#wrap {
border: 1px solid #FF6300;
padding: 5px;
overflow: hidden;
width: 294px;
margin: 50px auto;
}
#left {
float: left;
}
#right {
float: left;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="left">
<li><a href="#">連衣裙</a></li>
<li><a href="#">雪紡</a></li>
<li><a href="#">T恤</a></li>
<li><a href="#">鉛筆褲</a></li>
<li><a href="#">婚紗</a></li>
<li><a href="#">外套</a></li>
<li><a href="#">連體褲</a></li>
</ul>
<img src="8-img/1.png" />
<ul id="right">
<li><a href="#">包包</a></li>
<li><a href="#">涼鞋</a></li>
<li><a href="#">單鞋</a></li>
<li><a href="#">太陽鏡</a></li>
<li><a href="#">絲襪</a></li>
<li><a href="#">帆布鞋</a></li>
<li><a href="#">情侶裝</a></li>
</ul>
</div>
</body>
</html>
JS練習-淘寶商品廣告效果
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
- 正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
