本文介绍了如何使用HTML、CSS3和JavaScript实现一个商城轮播图效果。从项目需求分析开始，详细讲解了HTML结构布局、CSS3样式设置以及JavaScript事件处理和自动轮播功能的实现。内容包括HTML事件、DOM0级和DOM2级事件绑定，并提供了相应的代码示例。
这周要求做个商城的轮播图，老师说在拿到项目的时候不要急急忙忙写代码，先要想好要具体做那些内容，项目的整体页面是这样的
从这个页面上来看，主要分为下面几点：
- 左侧为主菜单
- 中间为焦点图
- 左右箭头
- 右下角小圆点
- 二级菜单
从JavaScript角度来讲：
-
点击上图得左右箭头，分别跳转上一图和下一图
点击上一张图其实就是让一个变量进行递增，点击下一张图就是让变量递减 -
点击右下角小圆点也可以进行图片得轮播
通过索引让变量进行随意得修改 -
每间隔2s进行轮播图得自动切换
定时器； -
Typeof id 或者 typeof(id)
补充知识点：
html事件：在标签里面写 绑定在页面里面的
DOM0级事件：只能给一个元素的某一个行为绑定一次方法 第二次绑定的话会将前面的覆盖
DOM2级事件：可以给某一个元素的同一个行为绑定多个不同的方法
DOM2级事件里有监听方法：
addEventListener()和removeEventListener() ——非ie浏览器(chrome firefox opera safari ie9+)
addEventListener()可以为元素添加多个事件处理程序，触发的时候按照添加顺序依次进行调用；
removeEventListener()移除事件处理程序，不能移除匿名添加的函数
参数：第一个参数是事件名 第二个参数是事件处理程序函数 第三个参数是布尔值(true表示在捕获阶段调用 从上往下 false表示在冒泡阶段调用 从下往上 )
ie6~8版本 监听方法：
attachEvent()和detachEvent()
attachEvent()可以为元素添加多个事件处理程序，触发的时候按照添加顺序依次执行
detachEvent()移除事件处理程序 不能移除匿名添加的函数
参数：第一个参数是事件名 第二个参数是事件处理程序函数
那么对于现在仅学的内容来说，要通过HTML,CSS3,JavaScript，来分别设置各自的内容。
HTML设置
- 用一个大的div去包裹菜单栏和轮播图片设置class属性和id属性均为main；
- 在这个大的div内插入一个菜单盒子div class属性为menu-box；
- 再插入一个二级菜单div与菜单盒子div同级（原因：为之后如果对其中一个进行修改不会改变另外一个），并定义class属性和id属性为sub-menu，再class属性中添加一个hide属性
为了先将它设置隐藏，之后在js中通过自定义函数来显示每个对应的二级菜单； - 在子菜单div内插入四个class属性为inner-box的div，在每个新插入的div内分别添加三类div：第一类div定义框架（用于css3设置整体框架样式），第二类div定义每个大标题（用于css3设置标题加粗红色样式），第三类定义大标题下的每个内容，有多少行设置多少个div（用于css3设置每行的样式）；
- 再插入一个一级菜单div，在div内添加超链接标签a（用于以后可以跳转对应商品的页面），添加span标签输入菜单栏的名字，再添加一个小箭头；
- 再插入一个div放置焦点图
class属性和id属性均为banner，在这个div内插入一个超链接标签a（用于以后可以跳转对应商品的页面），在每个a标签内再插入一个div用于等会儿css内设置插入不同图片； - 再插入两个超链接标签a（设置左右箭头）和一个div包裹三个span标签（设置小圆点）。
整个整个HTML里包含的内容已经笼统的都完成了。
附上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商城轮播图</title>
<link rel="stylesheet" type="text/css" href="css/demo1.css">
</head>
<body>
<!-- 用一个大的div包裹菜单栏和轮播图片 -->
<div class="main" id="main">
<!-- 整体菜单盒子 -->
<div class="menu-box"></div>
<!-- 子菜单 -->
<div class="sub-menu hide" id="sub-menu">
<div class="inner-box">
<!-- 定义一个sub的div框 -->
<div class="sub-inner-box">
<!-- 定义每个大标题 -->
<div class="title">手机、配件</div>
<!-- 定义大标题下每个内容 -->
<div class="sub-row">
<span class="jc mr">手机通讯：</span>
<a href="#">手机</a>
<span class="ml mr">/</span>
<a href="#">手机维修</a>
<span class="ml mr">/</span>
<a href="#">以旧换新</a>
</div>
<div class="sub-row">
<span class="jc mr">手机配件：</span>
<a href="#">手机壳</a>
<span class="ml mr">/</span>
<a href="#">手机存储卡</a>
<span class="ml mr">/</span>
<a href="#">数据线</a>
<span class="ml mr">/</span>
<a href="#">充电器</a>
<span class="ml mr">/</span>
<a href="#">电池</a>
</div>
<div class="sub-row">
<span class="jc mr">运营商：</span>
<a href="#">中国联通</a>
<span class="ml mr">/</span>
<a href="#">中国移动</a>
<span class="ml mr">/</span>
<a href="#">中国电信</a>
</div>
<div class="sub-row">
<span class="jc mr">智能设备：</span>
<a href="#">智能手环</a>
<span class="ml mr">/</span>
<a href="#">智能家居</a>
<span class="ml mr">/</span>
<a href="#">智能手表</a>
<span class="ml mr">/</span>
<a href="#">其他配件</a>
</div>
<div class="sub-row">
<span class="jc mr">娱乐：</span>
<a href="#">耳机</a>
<span class="ml mr">/</span>
<a href="#">音响</a>
<span class="ml mr">/</span>
<a href="#">收音机</a>
<span class="ml mr">/</span>
<a href="#">麦克风</a>
</div>
</div>
</div>
<div class="inner-box">
<!-- 定义一个sub的div框 -->
<div class="sub-inner-box" id="sub2">
<!-- 定义每个大标题 -->
<div class="title">电脑</div>
<!-- 定义大标题下每个内容 -->
<div class="sub-row">
<span class="jc mr">电脑：</span>
<a href="#">笔记本</a>
<span class="ml mr">/</span>
<a href="#">平板</a>
<span class="ml mr">/</span>
<a href="#">一体机</a>
</div>
<div class="sub-row">
<span class="jc mr">电脑配件：</span>
<a href="#">显示器</a>
<span class="ml mr">/</span>
<a href="#">CPU</a>
<span class="ml mr">/</span>
<a href="#">主板</a>
<span class="ml mr">/</span>
<a href="#">硬盘</a>
<span class="ml mr">/</span>
<a href="#">电源</a>
<span class="ml mr">/</span>
<a href="#">显卡</a>
<span class="ml mr">/</span>
<a href="#">其他配件</a>
</div>
<div class="sub-row">
<span class="jc mr">游戏设备：</span>
<a href="#">游戏机</a>
<span class="ml mr">/</span>
<a href="#">耳机</a>
<span class="ml mr">/</span>
<a href="#">游戏软件</a>
</div>
<div class="sub-row">
<span class="jc mr">网络产品：</span>
<a href="#">路由器</a>
<span class="ml mr">/</span>
<a href="#">网络机顶盒</a>
<span class="ml mr">/</span>
<a href="#">交换机</a>
<span class="ml mr">/</span>
<a href="#">存储卡</a>
<span class="ml mr">/</span>
<a href="#">网卡</a>
</div>
<div class="sub-row">
<span class="jc mr">外部产品：</span>
<a href="#">鼠标</a>
<span class="ml mr">/</span>
<a href="#">键盘</a>
<span class="ml mr">/</span>
<a href="#">U盘</a>
<span class="ml mr">/</span>
<a href="#">移动硬盘</a>
<span class="ml mr">/</span>
<a href="#">鼠标垫</a>
<span class="ml mr">/</span>
<a href="#">电脑清洗</a>
</div>
</div>
</div>
<div class="inner-box">
<!-- 定义一个sub的div框 -->
<div class="sub-inner-box" id="sub3">
<!-- 定义每个大标题 -->
<div class="title">家用电器</div>
<!-- 定义大标题下每个内容 -->
<div class="sub-row">
<span class="jc mr">电视：</span>
<a href="#">国产品牌</a>
<span class="ml mr">/</span>
<a href="#">韩国品牌</a>
<span class="ml mr">/</span>
<a href="#">欧美品牌</a>
</div>
<div class="sub-row">
<span class="jc mr">空调：</span>
<a href="#">显示器</a>
<span class="ml mr">/</span>
<a href="#">柜式</a>
<span class="ml mr">/</span>
<a href="#">中央</a>
<span class="ml mr">/</span>
<a href="#">壁挂式</a>
</div>
<div class="sub-row">
<span class="jc mr">冰箱：</span>
<a href="#">多开门</a>
<span class="ml mr">/</span>
<a href="#">对开门</a>
<span class="ml mr">/</span>
<a href="#">三门</a>
<span class="ml mr">/</span>
<a href="#">双门</a>
</div>
<div class="sub-row">
<span class="jc mr">洗衣机：</span>
<a href="#">滚筒式洗衣机</a>
<span class="ml mr">/</span>
<a href="#">迷你洗衣机</a>
<span class="ml mr">/</span>
<a href="#">洗烘一体机</a>
</div>
<div class="sub-row">
<span class="jc mr">厨房电器：</span>
<a href="#">油烟机</a>
<span class="ml mr">/</span>
<a href="#">洗碗机</a>
<span class="ml mr">/</span>
<a href="#">燃气灶</a>
</div>
</div>
</div>
<div class="inner-box">
<!-- 定义一个sub的div框 -->
<div class="sub-inner-box">
<!-- 定义每个大标题 -->
<div class="title">家具</div>
<!-- 定义大标题下每个内容 -->
<div class="sub-row">
<span class="jc mr">家纺：</span>
<a href="#">被子</a>
<span class="ml mr">/</span>
<a href="#">枕头</a>
<span class="ml mr">/</span>
<a href="#">四件套</a>
<span class="ml mr">/</span>
<a href="#">床垫</a>
</div>
<div class="sub-row">
<span class="jc mr">灯具：</span>
<a href="#">台灯</a>
<span class="ml mr">/</span>
<a href="#">顶灯</a>
<span class="ml mr">/</span>
<a href="#">节能灯</a>
<span class="ml mr">/</span>
<a href="#">应急灯</a>
</div>
<div class="sub-row">
<span class="jc mr">厨具：</span>
<a href="#">烹饪锅具</a>
<span class="ml mr">/</span>
<a href="#">餐具</a>
<span class="ml mr">/</span>
<a href="#">菜板刀具</a>
</div>
<div class="sub-row">
<span class="jc mr">家装：</span>
<a href="#">地毯</a>
<span class="ml mr">/</span>
<a href="#">沙发垫套</a>
<span class="ml mr">/</span>
<a href="#">装饰字画</a>
<span class="ml mr">/</span>
<a href="#">照片墙</a>
<span class="ml mr">/</span>
<a href="#">窗帘</a>
</div>
<div class="sub-row">
<span class="jc mr">生活用品：</span>
<a href="#">收纳用品</a>
<span class="ml mr">/</span>
<a href="#">浴室用品</a>
<span class="ml mr">/</span>
<a href="#">雨伞雨衣</a>
</div>
</div>
</div>
</div>
<!-- 主要内容 -->
<div class="menu-content" id="menu-content">
<div class="menu-item" >
<a href="#">
<span>手机、配件</span>
<!-- 小箭头设置 -->
<i class="icon"></i>
</a>
</div>
<div class="menu-item" >
<a href="#">
<span>电脑</span>
<!-- 小箭头设置 -->
<i class="icon"></i>
</a>
</div>
<div class="menu-item" >
<a href="#">
<span>家用电器</span>
<!-- 小箭头设置 -->
<i class="icon"></i>
</a>
</div>
<div class="menu-item" >
<a href="#">
<span>家具</span>
<!-- 小箭头设置 -->
<i class="icon"></i>
</a>
</div>
</div>
<!-- 焦点图 -->
<div class="banner" id="banner">
<a href="#">
<!-- 可以设置多个class属性 -->
<div class="banner1 slide1 slide-active"></div>
</a>
<a href="#">
<div class="banner1 slide2"></div>
</a>
<a href="#">
<div class="banner1 slide3"></div>
</a>
</div>
<!-- 箭头设置 箭头有超链接功能 -->
<!-- 除了#还可以写javascript:void(0)也代表当前页面跳转空链接 -->
<a href="#" class="button fris" id="fris"></a>
<a href="#" class="button next" id="next"></a>
<!-- 小圆点设置 -->
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script type="text/javascript" src="js/demo1.js"></script>
</html>
CSS3的设置
在CSS3设置的时候要注意不要出现单词拼错、漏写或者标点符号中英文问题导致代码不能运行/报错！
首先我们要进行全局定义，用通配符*去设置margin和padding均为0，再对boby设置字体和颜色
接下来我们要设置我们整个项目的样式：
- 大的div设置宽高，相对定位（遵循父相子绝原理），并且对于溢出部分进行隐藏；
- 轮播图设置宽高，背景图片不重复，设置隐藏（为js设置做准备），再分别插入图片，对第一张图片单独进行显示操作；
- 箭头设置绝对定位，添加图片箭头，再单独设置另个箭头 使其一个向左一个向右（用到旋转）设置悬停时有背景颜色；
- 小圆点设置绝对定位，设置display:inline-block可以使三个小圆点span处于同一水平线，设置border-radius:50%才能让它成为一个圆，再单独对第一个小圆点设置高亮；
- 主菜单设置绝对定位，在设置z-index:2让它在轮播图上方，由于我们的主菜单是放在超链接a标签内，所以会自带下划线，我们需要设置text-decoration:none来去掉下划线；
- 主菜单下的每一项设置属性，设置cursor:pointer是使鼠标成为小手标志，设置border-bottom:1px solid rgba(255,255,255,.2)是为了让下划线不填充整个框，看起来更美观一些，由于我们“家具”下面没有其他内容，所以我们要将家具下面的下划线去掉则要设置一个border-bottom:none；
- 对于主菜单旁边的小箭头进行设置绝对定位（i标签是行内元素 设置position是为了成块状元素），这里我们运用的是代码，一开始会显示一个小方块，进行设置后则会显示为箭头；
- 字体设置的整体代码要记得！
- 子菜单设置绝对定位，这里也要设置一个z-index:10使其在上方，子菜单也设置一个display:none，为后期js设置做准备
- 整个大框设置，同样也是设置一个overflow:hidden超出部分隐藏；
- 对每个标题设置属性 再对每行进行样式设置；
- 最后对整个子菜单进行一个隐藏；
以上是所有CSS3设置
代码：
/*全局定义*/
*{
margin:0;
padding:0;
}
body{
font-family:"微软雅黑";
color:#14191e;
}
/*大的div设置*/
.main{
width:1200px;
height:460px;
margin:30px auto;
/*溢出部分进行隐藏*/
overflow:hidden;
/*父相*/
position:relative;
}
/*轮播图设置*/
.banner {
width:1200px;
height:460px;
}
.banner1{
width:1200px;
height:460px;
/*处于水平线*/
float:left;
background-repeat: no-repeat;
/*先将图片隐藏*/
display:none;
}
/*单独对第一张图片先操作*/
.slide-active{
display:block;
}
/*分别插入图片*/
.slide1{
background-image: url(../img/bg1.jpg);
}
.slide2{
background-image: url(../img/bg2.jpg);
}
.slide3{
background-image: url(../img/bg3.jpg);
}
/*设置绝对定位*/
/*箭头设置*/
.button{
/*子绝*/
position: absolute;
width:40px;
height:80px;
left:244px;
top:50%;
background:url(../img/arrow.png) center center no-repeat;
margin-top:-40px;
transform:rotate(180deg);
}
/*箭头划过时有背景*/
.button:hover{
background-color:#333;
/*设置透明度*/
opacity:.8;
/*兼容其他浏览器设置透明度*/
filter:alpha(opacity=80);
}
/*单独操作右边的箭头*/
.next{
left:auto;
right:0;
transform:rotate(0deg);
}
/*小圆点设置*/
.dots{
position: absolute;
right:24px;
/*底部设置*/
bottom:24px;
line-height:12px;
}
.dots span{
/*使三个小圆点span完全处于同一个水平线*/
display:inline-block;
width:12px;
height:12px;
/*圆形设置*/
border-radius:50%;
background-color:rgba(7,17,27,.4);
margin-left:8px;
box-shadow: 0 0 0 2px rgba(255,255,255,.8) inset;
cursor:pointer;
}
/*第一个小白圆点高亮*/
.dots span.active{
background-color:#fff;
box-shadow: 0 0 0 2px rgba(7,17,27,.4) inset;
}
/*主菜单样式设置*/
.menu-box{
position:absolute;
left:0;
top:0;
width:244px;
height:460px;
background:rgba(7,17,27,.3);
}
/*主菜单内容设置*/
.menu-content{
position:absolute;
left:0;
top:0;
width:244px;
height:460px;
z-index:2;
}
a{
/*去掉下划线*/
text-decoration:none;
}
/*未访问和已访问*/
a:link,a:visited{
color:#5e5e5e;
}
/*主菜单下每项设置*/
.menu-item{
height:64px;
line-height:66px;
cursor:pointer;
padding:0 24px;
}
.menu-item a{
display:block;
color:#fff;
font-size:16px;
height:60px;
/*这样设置可以让下划线不填充整个框*/
border-bottom:1px solid rgba(255,255,255,.2);
padding:0 10px;
position:relative;
}
/*最后一个家具下面的线去掉*/
.menu-item:last-child>a{
border-bottom:none;
}
.menu-item i{
/*i标签是行内元素 设置position是为了成块状元素*/
position:absolute;
right:32px;
top:2px;
color:rgba(255,255,255,.5);
font-style:normal;
font-weight:normal;
font-family:"iconfont";
font-size:24px;
}
/*字体设置*/
@font-face{
font-family:'iconfont';
src:url('../img/font/iconfont.eot');
src:url('../img/font/iconfont.eot') format('embedded-opentype'),
url('../img/font/iconfont.svg#iconfont') format('svg'),
url('../img/font/iconfont.ttf') format('truetype'),
url('../img/font/iconfont.woff') format('woff');
}
/*子菜单设置*/
.sub-menu{
width:730px;
height:458px;
position:absolute;
left:244px;
top:0;
background:#fff;
z-index:10;
border:1px solid #d9dde1;
/*水平 垂直 模糊距离 尺寸 颜色*/
box-shadow:0 4px 8px 0px rgba(0,0,0,.1);
}
/*设置子菜单*/
.inner-box{
width:100%;
height:100%;
background:url("../img/fe.png") no-repeat;
/*先设置隐藏 为后期js设置做准备*/
display:none;
}
/*整个大框设置*/
.sub-inner-box{
width:650px;
margin-left:40px;
/*超出部分隐藏*/
overflow:hidden;
}
/*标题设置*/
.title{
font-size:16px;
color:#f01414;
line-height:16px;
font-weight:bold;
/*上右下左*/
margin:28px 0 30px 0;
}
/*每行的样式设置*/
.sub-row{
margin-bottom: 25px;
}
.jc{
font-weight:bold;
}
.mr{
margin-right:10px;
}
.ml{
margin-left:10px;
}
.hide{
display:none;
}
JavaScript设置
JS部分对于我个人来说比较薄弱，总是分不清什么时候该用循环，什么时候该遍历，一些函数公式格式记不住，之后要多去看资料和上课笔记。
对于JS部分来说，主要是使整个页面“动”起来，那么设置的时候也不用着急 一步步来，有些冗余的东西要想办法把它合并，一些类似操作比如获取id或者标签名之类的 可以归类在一块儿，看了老师发的讲解视频后，学到了新的东西，在之前学习的时候 总要写一堆比如xxx=xxxx.getElementById("")，看起来代码很长，码起来也很麻烦，所以有个新学到的知识是封装getElementById()属性，同样的还学到了封装通用事件的绑定方法（DOM2级事件）；
这个项目中运用到js部分的主要分为：
- 左右箭头分别跳转上一张图和下一张图
- 点击右下角的小圆点也可以进行图片的轮播
- 图片自动轮播 外加鼠标滑动时图片停止轮播 鼠标移除时图片继续轮播
- 鼠标滑动到一级菜单时会展现对应的二级菜单
代码：
//声明全局变量
var index = 0,//当前显示图片索引 默认值为0
timer=null,//定时器
main=byId("main"),
fris=byId("fris"),//上一张
next=byId("next"),//下一张
// 获得banner下所有的div 根据标签名字
pics=byId("banner").getElementsByTagName("div");//重点
dots=byId("dots").getElementsByTagName("span");
banner=byId("banner");
menuContent=byId("menu-content");
menuItems=menuContent.getElementsByClassName("menu-item");
subMenu=byId("sub-menu");
innerBox=subMenu.getElementsByClassName("inner-box");
size=pics.length;
//封装getElementById()
function byId(id){
// 判断类型typeof id 或者typeof(id)
//两个== 用于一般比较 在比较的时候可以转换数据类型
//三个=== 用于严格比较 只要类型不匹配则返回false
return typeof(id)==="string"?document.getElementById(id):id;//上面的id是形参 这里的id是实参
}
// 封装通用事件绑定方法
// handler处理 element绑定事件的DOM元素 type事件名字 handler事件处理程序
function addHandler(element,type,handler){
//非ie浏览器
if(element.addEventListener){
element.addEventListener(type,handler,true);//事件，处理程序 冒泡或捕获
//ie浏览器支持DOM2级事件
//next.οnclick=function(){}和next["onclick"]=function(){}效果相同
} else if(element.attachEvent){
element.attachEvent("on"+type,handler);
//ie浏览器不支持DOM2级事件
} else{
element["on"+type]=null;
}
}
//绑定事件
//DOM2级事件要把on去掉
// fris.addEventListener("click",function(){});
//切换图片的函数
function changeImg(){
//遍历所有图片，将图片都隐藏起来，将圆点上的类清除
for(var i=0;i<size;i++){
pics[i].style.display="none";
dots[i].className="";//为空则什么都不显示
}
//图片设置
pics[index].style.display="block";
//圆点设置 圆点进行高亮显示
dots[index].className="active";
}
//点击下一张按钮显示下一张图片
addHandler(next,"click",function(){
// 点击下一张按钮 索引递增
index++;//索引递增
if (index>=size) {
index=0;
}
changeImg();
});
//点击上一张按钮显示上一张图片
addHandler(fris,"click",function(){
// 点击上一张按钮 索引递增
index--;//索引递减
if (index<0) {
index=size-1;
}
changeImg();
});
// 给所有圆点绑定事件 点击圆点索引切换图片
for (var d=0;d<size;d++){
//添加自定义属性
dots[d].setAttribute("data-id",d);//前一个参数：自定义属性名 后一个参数：赋予何值
addHandler(dots[d],"click",function(){
index = this.getAttribute("data-id");
changeImg();
});
}
//自动轮播
function startAutoplay(){
//setInterval第一个参数为函数 第二个参数为每间隔多少时间操作一次 以毫秒为单位
timer = setInterval(function(){
index++;
if(index>=size){
index=0;}
changeImg();
},3000)
}
//清除定时器 停止自动轮播
function stopAutoplay(){
if(timer){
clearInterval(timer);
}
}
//鼠标滑过主菜单
for(var m =0,idx,mlen=menuItems.length;m<mlen;m++){
//给所有主菜单定义属性 表明它的索引
menuItems[m].setAttribute("data-index",m);
addHandler(menuItems[m],"mouseover",function(){
// 显示子菜单所在的背景
subMenu.className="sub-menu";//隐形的将hide属性移除
//获取当前主菜单的索引
idx=this.getAttribute("data-index");
//遍历所有的子菜单innerBox 然后将它们先隐藏
for (var j =0,jlen=innerBox.length;j<jlen;j++){
//隐藏所有子菜单
innerBox[j].style.display="none";
menuItems[j].style.background="none";//不需要背景颜色
}
//显示对应子菜单
innerBox[idx].style.display="block";
//让主菜单根据索引 背景颜色显示出来
menuItems[idx].style.background="rgba(0,0,0,.1)";
})
}
//鼠标离开banner,隐藏子菜单
addHandler(banner,"mouseout",function(){
subMenu.className="sub-menu hide";
});
//鼠标离开主菜单，隐藏子菜单
addHandler(menuContent,"mouseout",function(){
subMenu.className="sub-menu hide";
});
//鼠标划入子菜单，显示子菜单
addHandler(subMenu,"mouseover",function(){
subMenu.className="sub-menu";
});
//鼠标划出子菜单，隐藏子菜单
addHandler(subMenu,"mouseout",function(){
subMenu.className="sub-menu hide";
});
//鼠标划入main 停止轮播
addHandler(main,"mouseover",stopAutoplay);
//鼠标划出main 开启轮播
addHandler(main,"mouseout",startAutoplay);
//自动开启轮播
startAutoplay();
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
