文档章节

码畜写淘宝商品广告效果

o
 osc_1ee7cxmx
发布于 2018/08/06 20:56
字数 386
阅读 0
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

运行效果如下:

 

 

 

<!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>
    o
    粉丝 0
    博文 500
    码字总数 0
    作品 0
    私信 提问
    加载中
    请先登录后再评论。

    暂无文章

    漫画 | 韭菜的自我修养!

    osc_0vfknl5u
    3分钟前
    0
    0
    [Java] 使用ZipInputStream解析zip类文件(jar、docx)的范例

    作者: zyl910 一、缘由 现在zip类的文件越来越多了,例如jar、docx。 有时我们需批量处理这些文件中的数据,若都是手工操作的话就太麻烦了。于是考虑编程自动处理。 Java提供了ZipInputStr...

    osc_7dn4hojn
    4分钟前
    0
    0
    Java常用类-String类

    字符串相关的类:String String类:代表字符串,Java 程序中的所有字符串字面值(如 "abc" )都作 为此类的实例实现。 String是一个final类,代表不可变的字符序列 当字符串重新赋值时,需要...

    osc_mgvk29y5
    6分钟前
    0
    0
    Python处理json模块的详细介绍

    前言 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。 首先,了解下什么是JSON? JSON:JavaScript Object Notatio...

    osc_7bkuddw5
    7分钟前
    0
    0
    Go的100天之旅-04基础数据类型

    基础数据类型 在变量的定义中,我们讲了每个变量是有类型的,类型在计算机中是用来约束数据的解释。Go语言和其它计算机语言一样,提供丰富了丰富的数据类型,我们就来看看到底有哪些类型,同...

    osc_aazzok95
    9分钟前
    0
    0

    没有更多内容

    加载失败,请刷新页面

    加载更多

    返回顶部
    顶部