目录
下面是一些习题说明
子元素（块元素）添加margin-top,会在父元素上起作用，整体向下移动，
jQuery样式操作
- attr();
添加id或class属性，对应选择器，为元素添加样式 - addClass('className')
将className作为值添加到元素的class属性上，是可以连缀使用的
$('h1').addClass('c1').addClass('c2')... - removaClass('className');
移除className
参数可以省略，表示清空类选择器 - toggleClass('className')
切换样式：
元素如果具备className - css()
获取元素样式属性的值
et：
$('div').css('width'); - css(",")
设置元素的样式
et：
$('div').css('width','200px'); - css(JSON对象)
设置元素样式，参数为一组CSS属性
JSON对象：是一种约束了格式的对象表现形式
JSON：JavaScript Object Notation
JSON对象的表示方式- JSON对象必须使用{} 括起来
- 使用键值对来声明数据（属性与值）
- 所有的属性在声明时必须使用字符串形式" "，
属性值如果也是字符串，也必须使用" " - 属性与值之间使用：连接
- 多对属性和值之间使用，隔开(最后一个逗号可以省略)
et：
$('div').css({
'width:'200px',
'height':'200px',
...
});<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery-1.11.3.js"></script> </head> <body> <div></div> <h1></h1> <p>JSON对象的格式添加样式</p> </body> <script> //获取jQuery对象，添加样式 $('div').css('width','200px'); $('div').css('height','200px'); $('div').css('border','1px solid red'); //链式调用，为h1添加样式 $('h1').css('width','300px').css('height','200px').css('background','green'); //为p元素设置样式 $('p').css({ 'width':'200px', 'height':'200px', 'font-size':'32px', 'background-color':'orange' }); </script> </html>
jQuery操作节点
- children() / children('selector')
获取某个jQuery对象下所有的子元素，或者获取带有指定选择器的子元素
注意：只考虑直接子元素，不考虑间接后代元素 - next() / next('selector')
获取某jQuery 对象的下一个兄弟元素 / 满足selector的下一个兄弟元素 - prev() / prev('selector')
获取某jQuery对象的上一个兄弟元素 / 满足selector 的上一个兄弟元素 - siblings() / siblings('selector')
获取某jQuery对象的所有兄弟元素 / 满足selector 的兄弟元素 - find('selector')
获取满足selector 的所有后代元素 - parent()
获取jQuery对象的父元素<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery-1.11.3.js"></script> </head> <body> <h1>静夜思</h1> <ul> <li class="c1">窗前明月光</li> <li>疑是地上霜</li> <li>窗前明月光</li> <li>疑是地上霜</li> </ul> <h1 id="h1">李白</h1> <ol> <li>窗前明月光</li> <li>疑是地上霜</li> <li>窗前明月光</li> <li>疑是地上霜</li> </ol> </body> <script> //1.获取子节点 console.log($('body').children()); console.log($('body').children('h1')); //2.获取兄弟元素 console.log($('ul').next()); //If a selector is provide,it retrieves the next sibling only if it matches the selector console.log($('ul').next('#h1')); console.log($('ul').prev()); //3. 获取所有的兄弟元素 console.log($('.c1').siblings()); console.log($('#h1').siblings()); console.log($('#h1').siblings('ol')); //4. 获取所有的后代元素,包含直接和间接子元素 console.log($('ul').find('.c1')); console.log($('body').find('li')); //5. 获取父元素 console.log($('.c1').parent());
jQuery创建对象
- $('标签')
et：
var $div = $('<div></div>');
$div.html('动态创建的div');
$div.attr('id','box');
$div.css('color','red');
et2：
var $div2 = $("<div id='box' style = 'color:red;'>动态创建的div</div>");
jQuery 插入元素
- 内部插入
将创建好的元素作为子元素插入到网页中
$obj.append($new)
将新创建的元素作为最后一个子元素添加
$obj.prepend($new)
将创建好的元素作为第一个子元素添加 - 作为兄弟元素插入
$obj.after($new)
将新元素作为$obj 的下一个兄弟元素添加进来
$obj.before($new)
将新元素作为$obj 的上一个兄弟元素添加进来<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery-1.11.3.js"></script> </head> <body> <script> var $div = $('<div></div>'); $div.attr('id','box'); $div.html('动态创建的div'); $div.css('color','red'); var $h1 = $("<h1 id='container' style='color:green;'>动态创建的h1</h1>"); console.log($div,$h1); //将元素添加到网页中 $('body').append($div); $('body').prepend($h1); //添加兄弟元素 var $p = $("<p style='color:blue;'>动态创建段落标签</p>"); $div.before($p); //创建span标签，添加在h1的后面 var $span = $("<span>span普通文本</span>"); $h1.after($span); //删除元素 remove() $span.remove(); </script> </body> </html>
jQuery 删除元素
- 语法：$obj.remove()
- 作用：将$obj移除掉
jQuery 事件处理
- 页面加载完成之后再执行
语法：- $(document).ready(function(){
//加载完成之后执行的操作
}); - $().ready(function(){
//加载完成之后执行的操作
}); - $(function(){
//加载完成之后执行的操作
});
与原生onload事件的区别：- 原生onload事件不能多次使用，后面的会把前面的覆盖掉，只执行最后书写的onload
jQuery中的ready方法，也表示文档加载完毕，可以使用多次，所有的相关函数都会被执行，不会被覆盖 - 原生onload事件，等待页面中DOM节点及所有页面资源全部加载完成才执行
jQuery中的ready方法，只等待DOM数加载完成就执行相关函数
- 原生onload事件不能多次使用，后面的会把前面的覆盖掉，只执行最后书写的onload
- $(document).ready(function(){
- jQuery事件绑定
- 方式1
$obj.bind('事件名称',function(){
//事件处理函数
});
注意：
事件名称省略 on前缀 - 方式2
$obj.事件名称(function(){
//事件处理
});
注意：
事件名称省略 on前缀
- 方式1
- jQuery 事件对象
在绑定事件时，允许传递参数表示事件对象
$obj.bind('click',function(event){
console.log(event);
});
事件对象的使用方法，与原生的一致
event.target
event.offsetX<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery-1.11.3.js"></script> <script> $(document).ready(function (){ var $div = $('div'); console.log($div); }); $().ready(function (){ console.log($('div')); }); $(function (){ console.log($('div')); //事件绑定 $('div').bind('click',function (evt) { alert("div被点击"); }); $('h1').click(function (evt){ alert("h1被点击"); console.log(this); console.log(evt); console.log(evt.offsetX); }); }); /* window.onload = function(){ console.log("window.onload1"); }; window.onload = function(){ console.log("window.onload2"); }; window.onload = function(){ console.log("window.onload3"); }; */ </script> </head> <body> <div style="width:200px;height:200px;background:red;"></div> <h1 style="width:200px;height:200px;background:green;"></h1> </body> </html>
块元素，行内元素，行内块元素一些应用说明
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<!-- 块元素 行内元素 行内块元素-->
<!-- 1. 块元素中可以嵌套任何元素-->
<div>
<h1>Title</h1>
<a href="">Anchor</a>
<input type="text">
</div>
<!-- 2. 行内元素中可以嵌套行内元素或者行内块元素 -->
<span>
<strong>strong</strong>
<a href="">span-a</a>
<input type="text">
</span>
<!-- 不要在行内元素中嵌套块元素 -->
<span>
<div></div>
</span>
<div>span-div</div>
<!--3. 特殊块元素 p 元素中不能嵌套块元素，只能嵌套行内和行内块元素 -->
<p>
<h1>p-h1</h1>
</p>
<h1>
<p>h1-p</p>
</h1>
<p>
<div>p-div</div>
</p>
<p>
<input type="text">
</p>
<!-- 边距设置尽量使用像素值 -->
</body>
</html>
子元素（块元素）添加margin-top,会在父元素上起作用，整体向下移动，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
#d1{
width:300px;
height:300px;
background:red;
/*border-top:1px solid blue;*/
/*padding:0.1px;*/
}
.c1{
width:200px;
height:200px;
background:green;
margin-top:100px;
}
</style>
</head>
<body>
<!--
问题 ：给第一个子元素（块元素）添加margin-top,会在父元素上起作用，整体向下移动
解决 ：
1. 给父元素添加边框（border-top）
2. 给父元素添加内边距 （padding-top:0.1px;）
-->
<div id="d1">
<span>span</span>
<div class="c1"></div>
</div>
</body>
</html>写百度首页
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
#nav{
position:relative;
height:50px;
}
.head{
position:absolute;
width:600px;
right:0;
}
.head>a{
position:relative;
margin-left:19px;
color:black;
font-weight:bold;
}
.head>.span-login{
font-weight:normal;
}
#nav .baidu-more{
background:#3385ff;
color:white;
display:inline-block;
width:80px;
text-decoration:none;
height:24px;
text-align:center;
line-height:24px;
}
#main{
margin-top:100px;
}
.wrapper{
width:640px;
margin: 0 auto;
text-align:center;
}
.wrapper img{
width: 270px;
height:129px;
}
.wrapper form{
height:40px;
}
.span-search{
border:1px solid gray;
border-right:none;
float:left;
height:38px;
}
/*
浏览器兼容
.span-search:focus{
outline:-webkit-focus-ring-color auto 5px;;
}
*/
[type="text"]{
width:500px;
height:38px;
border: none;
padding: 0px 0px 0px 7px;
/* padding-left:7px; */
font-size:16px;
outline:none;
}
[type="submit"]{
width:100px;
height:40px;
background:#3385ff;
color:white;
border:none;
padding:0px;
font-size:16px;
vertical-align:bottom;
float:left;
}
.soutu-btn{
float:right;
width: 18px;
height:16px;
background: white url(camera.png) no-repeat;
margin: 12px 6px;
}
.soutu-btn:hover{
background: white url(camera.png) no-repeat 0px -20px;
}
</style>
</head>
<body>
<div id="nav">
<div class="head">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">新闻</a>
<a href="#">新闻</a>
<a href="#">新闻</a>
<a href="#">学术</a>
<a href="#" class="span-login">
<span>登录</span>
</a>
<a href="#" class="span-login">
<span>设置</span>
</a>
<a href="" class="baidu-more">更多产品</a>
</div>
</div>
<!--
问题 ：给第一个子元素（块元素）添加margin-top,会在父元素上起作用，整体向下移动
解决 ：
1. 给父元素添加边框（border-top）
2. 给父元素添加内边距 （padding-top:0.1px;）
-->
<div id="main">
<div class="wrapper">
<img src="logo.png">
<form action="" method="">
<span class="span-search">
<span class="soutu-btn"></span>
<!-- 表单自动补全autocomplete 默认为on -->
<input type="text" name="useach" autocomplete="off">
</span>
<input type="submit" value="百度一下">
</form>
</div>
</div>
</body>
</html>
<!--
精灵图 ：
多张小图标拼在一张图片上，背景为透明
作用 ：网页中所有的图片都是通过网络请求得到的，大量的小图标会造成频繁的请求，因此可以使用精灵图，减少请求次数
使用 ：结合CSS background-position 属性调整背景图片的坐标，选择不同的图片展示
background-position : x y;
x y表示背景图片的位移/坐标
默认从背景图片左上角显示，正值表示图片向左/向下移动
-->写pythonweb day12作业
- 上方包含三个输入框，一个添加按钮
- 下方为商品信息展示区域，点击添加之后
将商品信息显示在当前区域，同时显示操作按钮 - JS动态创建节点并显示（商品信息展示）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> table{ width: 600px; border: 1px solid black; border-collapse: collapse; } th,td{ border: 1px solid black; text-align:center; } </style> <script src="jquery-1.11.3.js"></script> </head> <body> <p> <input type="text" name="gname" placeholder="商品名称"> <input type="text" name="gprice" placeholder="商品价格"> <input type="text" name="gcount" placeholder="商品数量"> <button onclick="addGoods()">添加</button> </p> <table> <thead> <tr> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> </body> <script> function addGoods(){ //1. 获取元素节点 var gname = $("[name=gname]").val(); var gprice = $("[name=gprice]").val(); var gcount = $("[name=gcount]").val(); var tbody = $('tbody'); //2. 创建行 var tr = $("<tr></tr>"); //3. 创建四个单元格并且赋值 var tdName = $("<td>"+gname+"</td>"); var tdPrice = $("<td></td>"); tdPrice.html(gprice); var tdCount = $("<td>"+gcount+"</td>"); var tdOper = $("<td></td>"); //操作按钮 var btnUpdate = $("<button>修改</button>"); var btnDelete = $("<button>删除</button>"); //单元格中添加按钮 tdOper.append(btnUpdate); tdOper.append(btnDelete); //4. 向网页中添加元素 tr.append(tdName); tr.append(tdPrice); tr.append(tdCount); tr.append(tdOper); tbody.append(tr); } </script> </html>
写一个果篮首页
以下是代码：
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<!-- 页面结构划分-->
<div id="container">
<!-- 1. 导航-->
<div id="nav">
<!-- 1.1 右侧导航-->
<ul class="rightNav">
<li>
<a href="#">[登录]</a>
，
<a href="#">[注册，有惊喜]</a>
</li>
<li>
<b></b>
<a href="#">果园公告</a>
</li>
<li>
<b></b>
<a href="#">券卡兑换</a>
</li>
<li>
<b></b>
<a href="#">手机果园</a>
</li>
</ul>
<!-- 1.2 左侧导航-->
<ol class="leftNav">
<li class="address">
<span class="currentAddress">上海</span>
<!-- 三角标-->
<u></u>
<ul class="select">
<li>北京</li>
<li>广州</li>
<li>深圳</li>
</ul>
</li>
<li>满百包邮（含郊区）</li>
<li>星夜达</li>
</ol>
</div>
<!-- 2. 横幅-->
<div id="banner">
<!-- 图片轮播-->
<div class="wrapper">
<img src="images/banner1.jpg">
<img src="images/banner2.jpg">
<img src="images/banner3.jpg">
</div>
<ul class="imgNav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<!-- 3. 今日推荐-->
<div id="adv">
<a href="#">
<img src="images/2ba20598135dbba5e97d241ebfa167d9.jpg">
</a>
<a href="#">
<img src="images/2ba20598135dbba5e97d241ebfa167d9.jpg">
</a>
<a href="#">
<img src="images/2ba20598135dbba5e97d241ebfa167d9.jpg">
</a>
<a href="#">
<img src="images/2ba20598135dbba5e97d241ebfa167d9.jpg" class="lastImg">
</a>
</div>
<!-- 4. 主体信息-->
<div id="main">
<!-- 生活卡券 -->
<div class="item">
<!-- 上方 礼品卡券部分 -->
<p class="goodsClass">
<img src="images/t4.png">
<a href="#">更多</a>
</p>
<!-- 下方 商品信息展示 -->
<ul>
<li>
<p>
<img src="images/1-270x270-430-9RBRWTU9.jpg">
</p>
<div class="content">
<a href="#">
<img src="images/cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p>
<img src="images/1-270x270-430-9RBRWTU9.jpg">
</p>
<div class="content">
<a href="#">
<img src="images/cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p>
<img src="images/1-270x270-430-9RBRWTU9.jpg">
</p>
<div class="content">
<a href="#">
<img src="images/cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p>
<img src="images/1-270x270-430-9RBRWTU9.jpg">
</p>
<div class="content">
<a href="#">
<img src="images/cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li class="no-margin">
<p>
<img src="images/1-270x270-430-9RBRWTU9.jpg">
</p>
<div class="content">
<a href="#">
<img src="images/cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p>
<img src="images/1-270x270-430-9RBRWTU9.jpg">
</p>
<div class="content">
<a href="#">
<img src="images/cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p>
<img src="images/1-270x270-430-9RBRWTU9.jpg">
</p>
<div class="content">
<a href="#">
<img src="images/cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p>
<img src="images/1-270x270-430-9RBRWTU9.jpg">
</p>
<div class="content">
<a href="#">
<img src="images/cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p>
<img src="images/1-270x270-430-9RBRWTU9.jpg">
</p>
<div class="content">
<a href="#">
<img src="images/cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li class="no-margin">
<p>
<img src="images/1-270x270-430-9RBRWTU9.jpg">
</p>
<div class="content">
<a href="#">
<img src="images/cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
</ul>
</div>
<!--<div style="clear:both;"></div>-->
</div>
<!-- 5. 底部信息
主体信息模块高度为零（子元素全部浮动），影响底部模块布局，需要清除浮动
1. 由于主体信息可以动态加载，不能固定高度
2. 可以给父元素设置overflow :hidden;
3. 也可以设置清除浮动：为父元素末尾添加空的块级标签，设置clear:both;
-->
<div id="footer"></div>
</div>
</body>
</html>index.css
/* 统一设置页面样式 */
body{
/*字体样式*/
font : 12px "Microsoft Yahei","黑体",sans-serif;
color : #9a9a9a;
}
/*清除默认样式*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0;
padding:0;
list-style:none;
}
a{
color: #9a9a9a;
text-decoration:none;
}
a:hover{
color:#64A131;
}
img{
vertical-align:bottom;
}
/*页面整体宽度设置及居中效果*/
#container{
width: 990px;
margin: 0 auto;
}
/*1. 导航*/
#nav{
height: 30px;
background: #eee;
line-height : 30px;
}
/*右侧导航*/
#nav .rightNav{
float:right;
}
#nav .rightNav>li{
float:left;
padding: 0 5px;
}
#nav .rightNav>li>b{
border-left: 1px solid #9a9a9a;
margin-right: 10px;
}
/*左侧导航*/
#nav .leftNav>li{
float:left;
padding-left:10px;
}
#nav .leftNav>li>u{
display:inline-block;
width:0px;
height:0px;
border:6px solid transparent;
border-top: 6px solid black;
position: relative;
top: 4px;
}
#nav .address{
position:relative;
}
#nav .select{
display:none;
position:absolute;
/*调整元素堆叠次序*/
z-index: 100;
color:black;
}
#nav .address:hover .select{
display:block;
background: rgba(255,0,0,0.5);
}
#nav .select>li:hover{
font-weight:bold;
}
/*2.横幅*/
#banner{
margin: 15px 0;
position:relative;
}
#banner img{
width: 100%;
height: 207px;
}
/* 除第一张图片外，其他图片都隐藏 */
#banner img:not(:first-child){
display:none;
}
/* 图片索引 */
#banner .imgNav{
position: absolute;
right: 20px;
bottom: 10px;
}
#banner .imgNav>li{
float :left;
width : 20px;
height: 20px;
margin: 0 10px;
background: gray;
text-align: center;
line-height: 20px;
border-radius: 50%;
}
/*匹配作为第一个子元素的li*/
#banner .imgNav>li:first-child{
background:red;
}
#banner .imgNav>li>a{
color:#fff;
}
/*3. 推荐*/
#adv{
height: 112px;
}
#adv img{
float:left;
width: 240px;
margin-right:10px;
}
#adv .lastImg{
margin-right:0;
}
/*4. 主体信息*/
#main{
margin-top: 25px;
overflow:hidden;
}
#main .goodsClass{
border-top: 1px solid #ccc;
padding-top: 15px;
margin-bottom: 10px;
}
#main .goodsClass>a{
float:right;
color:#333;
}
/*商品信息部分*/
#main .item>ul>li{
float:left;
width: 190px;
margin-right: 10px;
}
#main .item>ul>li.no-margin{
margin-right:0;
}
/*图片缩放效果*/
#main .item>ul>li>p{
width:190px;
height:190px;
overflow:hidden;
}
#main .item>ul>li>p>img{
width: 190px;
transition: all .3s;
}
#main .item>ul>li>p>img:hover{
transform: scale(1.1);
}
#main .content>a{
float:right;
}
#main .content{
margin-top: 5px;
}
#main .content>p{
color: #555;
margin-bottom:3px;
margin-left:3px;
}
#main .content>span{
margin-left:5px;
}
#footer{
height:100px;
background: red;
}index.js
window.onload = function (){
/*-----------下拉菜单---------*/
//1. 获取元素节点
var currentAddr = document.getElementsByClassName('currentAddress')[0];
var select = document.getElementsByClassName('select')[0];
//获取内层列表中地址项
var address = select.children;
//为每一项添加点击事件
for(var i = 0; i < address.length; i ++){
address[i].onclick = function(){
//传值
currentAddr.innerHTML = this.innerHTML;
};
}
/*-----------图片轮播-----------*/
//1. 获取图片数组
//2. 定时器实现图片切换
//3. 图片切换主要切换数组下标，防止数组越界
var banner = document.getElementsByClassName('wrapper')[0];
var imgs = banner.children; //图片数组
var imgNav = document.getElementsByClassName('imgNav')[0];
var indInfo = imgNav.children; //索引数组
var imgIndex = 0; //初始下标
var timer;
timer = setInterval(autoPlay,1000); //定时器
function autoPlay(){
//设置元素隐藏与显示
imgs[imgIndex].style.display = "none";
/*
++ imgIndex;
if(imgIndex == imgs.length){
imgIndex = 0;
}
*/
imgIndex = ++ imgIndex == imgs.length ? 0 : imgIndex;
imgs[imgIndex].style.display = "block";
for(var i = 0; i < indInfo.length; i ++){
indInfo[i].style.background = "gray";
}
//切换索引 切换背景色
indInfo[imgIndex].style.background = "red";
}
banner.onmouseover = function (){
//停止定时器
clearInterval(timer);
};
banner.onmouseout = function (){
timer = setInterval(autoPlay,1000);
};
};
扫一扫
4191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
