运行效果如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝商品广告效果</title>
<style type="text/css">
li {
list-style:none;
}
#box {
width:448px;
height: 294px;
border:1px #ff8c12 solid;
margin:0 auto;
padding:10px;
}
ul {
margin:0;
padding: 0;
width: 76px;
height: 100%;
float:left;
}
li {
width: 76px;
height: 40px;
background: #ffb864;
margin-bottom:2px;
text-align: center;
font: 16px/40px "微软雅黑";
color: #fff;
cursor:pointer;
}
img {
width: 292px;
height: 292px;
margin:0 2px;
float: left;
}
.active {
background: #ff8c12;
color:#333333;
}
</style>
<script type="text/javascript" src="miaov.js"></script>
<script type="text/javascript">
window.onload = function(){
var afltex=['连衣裙','雪纺','T恤','铅笔裤','婚纱','外套','连体裤'];
var afrtex=['包包','凉鞋','单鞋','太阳镜','丝袜','帆布鞋','情侣装'];
ini('fl',afltex);
ini('fr',afrtex);
//初始化
function ini(id,arrTex){
var aLi = $(id).getElementsByTagName('li');
for(var i = 0;i < arrTex.length;i++){
$(id).innerHTML += '<li>' + arrTex[i] + '</li>';
}
}
///
var aLi = document.getElementsByTagName('li');
var oImg = document.getElementsByTagName('img')[0];
var arrUrl=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/z_1.jpg','img/z_6.jpg','img/z_4.jpg',
'img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/z_2.jpg','img/z_3.jpg','img/z_5.jpg'];
var num = 0;
var timer = null;
var onOff = true; //设置一个开关
tab();
setTimeout(autoPlay,1000); //调用定时器
for(var i =0;i < aLi.length;i++){
aLi[i].index = i;
aLi[i].onmouseover = function(){
clearInterval(timer);
num = this.index;
tab();
}
aLi[i].onmouseout = autoPlay;
}
//初始化
function tab(){
//先把所有的li的样式清楚掉
for(var i = 0;i < arrUrl.length;i++){
aLi[i].className = '';
}
//根据num是多少来判断给第几个li加样式
aLi[num].className = 'active';
oImg.src = arrUrl[num];
}
function autoPlay(){
timer = setInterval(function(){
if(onOff){
num++;
tab();
if(num == 13){
onOff = false;
}
}else {
num--;
tab();
if(num == 0){
onOff = true;
}
}
},1000);
}
}
</script>
</head>
<body>
<div id="box">
<ul id="fl"></ul>
<img />
<ul id="fr"></ul>
</div>
</body>
</html>
943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
