效果图

实现轮播图特效 -- 笔记 - 图1
实现轮播图特效 -- 笔记 - 图2

HTML部分代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>项目：实现轮播图特效</title>
  6.     <link rel="stylesheet" type="text/css" href="RotationChart.css">
  7. </head>
  8. <body>
  9.     <div class="container" id="container">
  10.         <!-- 左侧主菜单盒子 -->
  11.         <div class="menu-box"></div>
  12.         <!-- 子菜单 -->
  13.         <div class="sub-menu hide" id="sub-menu">
  14.             <div class="inner-box">
  15.                 <!-- sub的div框 -->
  16.                 <div class="sub-inner-box">
  17.                     <!-- sub的标题 -->
  18.                     <div class="title">手机、配件</div>
  19.                     <!-- sub的具体内容 -->
  20.                     <div class="sub-row">
  21.                         <span class="bold mr10">手机通讯：</span>
  22.                         <a href="#">手机</a>
  23.                         <span class="ml10 mr10">/</span>
  24.                         <a href="#">手机维修</a>
  25.                         <span class="ml10 mr10">/</span>
  26.                         <a href="#">以旧换新</a>
  27.                     </div>
  28.                     <div class="sub-row">
  29.                         <span class="bold mr10">手机配件：</span>
  30.                         <a href="#">手机壳</a>
  31.                         <span class="ml10 mr10">/</span>
  32.                         <a href="#">手机存储卡</a>
  33.                         <span class="ml10 mr10">/</span>
  34.                         <a href="#">数据线</a>
  35.                         <span class="ml10 mr10">/</span>
  36.                         <a href="#">充电器</a>
  37.                         <span class="ml10 mr10">/</span>
  38.                         <a href="#">电池</a>
  39.                     </div>
  40.                     <div class="sub-row">
  41.                         <span class="bold mr10">运营商：</span>
  42.                         <a href="#">中国联通</a>
  43.                         <span class="ml10 mr10">/</span>
  44.                         <a href="#">中国移动</a>
  45.                         <span class="ml10 mr10">/</span>
  46.                         <a href="#">中国电信</a>
  47.                     </div>
  48.                     <div class="sub-row">
  49.                         <span class="bold mr10">智能设备：</span>
  50.                         <a href="#">智能手环</a>
  51.                         <span class="ml10 mr10">/</span>
  52.                         <a href="#">智能家居</a>
  53.                         <span class="ml10 mr10">/</span>
  54.                         <a href="#">智能手表</a>
  55.                         <span class="ml10 mr10">/</span>
  56.                         <a href="#">其他配件</a>
  57.                     </div>
  58.                     <div class="sub-row">
  59.                         <span class="bold mr10">娱乐：</span>
  60.                         <a href="#">耳机</a>
  61.                         <span class="ml10 mr10">/</span>
  62.                         <a href="#">音响</a>
  63.                         <span class="ml10 mr10">/</span>
  64.                         <a href="#">收音机</a>
  65.                         <span class="ml10 mr10">/</span>
  66.                         <a href="#">麦克风</a>
  67.                     </div>
  68.                 </div>
  69.             </div>
  70.             <div class="inner-box">
  71.                 <!-- sub的div框 -->
  72.                 <div class="sub-inner-box">
  73.                     <!-- sub的标题 -->
  74.                     <div class="title">电脑</div>
  75.                     <!-- sub的具体内容 -->
  76.                     <div class="sub-row">
  77.                         <span class="bold mr10">电脑：</span>
  78.                         <a href="#">笔记本</a>
  79.                         <span class="ml10 mr10">/</span>
  80.                         <a href="#">平板</a>
  81.                         <span class="ml10 mr10">/</span>
  82.                         <a href="#">一体机</a>
  83.                     </div>
  84.                     <div class="sub-row">
  85.                         <span class="bold mr10">电脑配件：</span>
  86.                         <a href="#">显示器</a>
  87.                         <span class="ml10 mr10">/</span>
  88.                         <a href="#">CPU</a>
  89.                         <span class="ml10 mr10">/</span>
  90.                         <a href="#">主板</a>
  91.                         <span class="ml10 mr10">/</span>
  92.                         <a href="#">硬盘</a>
  93.                         <span class="ml10 mr10">/</span>
  94.                         <a href="#">电源</a>
  95.                         <span class="ml10 mr10">/</span>
  96.                         <a href="#">显卡</a>
  97.                         <span class="ml10 mr10">/</span>
  98.                         <a href="#">其他配件</a>
  99.                     </div>
  100.                     <div class="sub-row">
  101.                         <span class="bold mr10">游戏设备：</span>
  102.                         <a href="#">游戏机</a>
  103.                         <span class="ml10 mr10">/</span>
  104.                         <a href="#">耳机</a>
  105.                         <span class="ml10 mr10">/</span>
  106.                         <a href="#">游戏软件</a>
  107.                     </div>
  108.                     <div class="sub-row">
  109.                         <span class="bold mr10">网络产品：</span>
  110.                         <a href="#">路由器</a>
  111.                         <span class="ml10 mr10">/</span>
  112.                         <a href="#">网络机顶盒</a>
  113.                         <span class="ml10 mr10">/</span>
  114.                         <a href="#">交换机</a>
  115.                         <span class="ml10 mr10">/</span>
  116.                         <a href="#">存储卡</a>
  117.                         <span class="ml10 mr10">/</span>
  118.                         <a href="#">网卡</a>
  119.                     </div>
  120.                     <div class="sub-row">
  121.                         <span class="bold mr10">外部设备：</span>
  122.                         <a href="#">鼠标</a>
  123.                         <span class="ml10 mr10">/</span>
  124.                         <a href="#">键盘</a>
  125.                         <span class="ml10 mr10">/</span>
  126.                         <a href="#">U盘</a>
  127.                         <span class="ml10 mr10">/</span>
  128.                         <a href="#">移动硬盘</a>
  129.                         <span class="ml10 mr10">/</span>
  130.                         <a href="#">鼠标垫</a>
  131.                         <span class="ml10 mr10">/</span>
  132.                         <a href="#">电脑清洁</a>
  133.                     </div>
  134.                 </div>
  135.             </div>
  136.             <div class="inner-box">
  137.                 <!-- sub的div框 -->
  138.                 <div class="sub-inner-box">
  139.                     <!-- sub的标题 -->
  140.                     <div class="title">家用电器</div>
  141.                     <!-- sub的具体内容 -->
  142.                     <div class="sub-row">
  143.                         <span class="bold mr10">电视：</span>
  144.                         <a href="#">国产品牌</a>
  145.                         <span class="ml10 mr10">/</span>
  146.                         <a href="#">韩国品牌</a>
  147.                         <span class="ml10 mr10">/</span>
  148.                         <a href="#">欧美品牌</a>
  149.                     </div>
  150.                     <div class="sub-row">
  151.                         <span class="bold mr10">空调：</span>
  152.                         <a href="#">显示器</a>
  153.                         <span class="ml10 mr10">/</span>
  154.                         <a href="#">柜式</a>
  155.                         <span class="ml10 mr10">/</span>
  156.                         <a href="#">中央</a>
  157.                         <span class="ml10 mr10">/</span>
  158.                         <a href="#">壁挂式</a>
  159.                     </div>
  160.                     <div class="sub-row">
  161.                         <span class="bold mr10">冰箱：</span>
  162.                         <a href="#">多门</a>
  163.                         <span class="ml10 mr10">/</span>
  164.                         <a href="#">对开门</a>
  165.                         <span class="ml10 mr10">/</span>
  166.                         <a href="#">三门</a>
  167.                         <span class="ml10 mr10">/</span>
  168.                         <a href="#">双门</a>
  169.                     </div>
  170.                     <div class="sub-row">
  171.                         <span class="bold mr10">洗衣机：</span>
  172.                         <a href="#">滚筒式洗衣机</a>
  173.                         <span class="ml10 mr10">/</span>
  174.                         <a href="#">迷你洗衣机</a>
  175.                         <span class="ml10 mr10">/</span>
  176.                         <a href="#">洗烘一体机</a>
  177.                     </div>
  178.                     <div class="sub-row">
  179.                         <span class="bold mr10">厨房电器：</span>
  180.                         <a href="#">油烟机</a>
  181.                         <span class="ml10 mr10">/</span>
  182.                         <a href="#">洗碗机</a>
  183.                         <span class="ml10 mr10">/</span>
  184.                         <a href="#">燃气灶</a>
  185.                     </div>
  186.                 </div>
  187.             </div>
  188.             <div class="inner-box">
  189.                 <!-- sub的div框 -->
  190.                 <div class="sub-inner-box">
  191.                     <!-- sub的标题 -->
  192.                     <div class="title">家具</div>
  193.                     <!-- sub的具体内容 -->
  194.                     <div class="sub-row">
  195.                         <span class="bold mr10">家纺：</span>
  196.                         <a href="#">被子</a>
  197.                         <span class="ml10 mr10">/</span>
  198.                         <a href="#">枕头</a>
  199.                         <span class="ml10 mr10">/</span>
  200.                         <a href="#">四件套</a>
  201.                         <span class="ml10 mr10">/</span>
  202.                         <a href="#">床垫</a>
  203.                     </div>
  204.                     <div class="sub-row">
  205.                         <span class="bold mr10">灯具：</span>
  206.                         <a href="#">台灯</a>
  207.                         <span class="ml10 mr10">/</span>
  208.                         <a href="#">顶灯</a>
  209.                         <span class="ml10 mr10">/</span>
  210.                         <a href="#">节能灯</a>
  211.                         <span class="ml10 mr10">/</span>
  212.                         <a href="#">应急灯</a>
  213.                     </div>
  214.                     <div class="sub-row">
  215.                         <span class="bold mr10">厨具：</span>
  216.                         <a href="#">烹饪锅具</a>
  217.                         <span class="ml10 mr10">/</span>
  218.                         <a href="#">餐具</a>
  219.                         <span class="ml10 mr10">/</span>
  220.                         <a href="#">菜板刀具</a>
  221.                     </div>
  222.                     <div class="sub-row">
  223.                         <span class="bold mr10">家装：</span>
  224.                         <a href="#">地毯</a>
  225.                         <span class="ml10 mr10">/</span>
  226.                         <a href="#">沙发垫套</a>
  227.                         <span class="ml10 mr10">/</span>
  228.                         <a href="#">装饰字画</a>
  229.                         <span class="ml10 mr10">/</span>
  230.                         <a href="#">照片墙</a>
  231.                         <span class="ml10 mr10">/</span>
  232.                         <a href="#">窗帘</a>
  233.                     </div>
  234.                     <div class="sub-row">
  235.                         <span class="bold mr10">生活日用：</span>
  236.                         <a href="#">收纳用品</a>
  237.                         <span class="ml10 mr10">/</span>
  238.                         <a href="#">浴室用品</a>
  239.                         <span class="ml10 mr10">/</span>
  240.                         <a href="#">雨伞雨衣</a>
  241.                     </div>
  242.                 </div>
  243.             </div>
  244.         </div>
  245.         <!-- 主菜单 -->
  246.         <div class="menu-content" id="menu-content">
  247.             <div class="menu-item" id="item1">
  248.                 <a href="#">
  249.                     <span>手机、配件</span>
  250.                     <i class="icon">&#xe665;</i>
  251.                 </a>
  252.             </div>
  253.             <div class="menu-item" id="item2">
  254.                 <a href="#">
  255.                     <span>电脑</span>
  256.                     <i class="icon">&#xe665;</i>
  257.                 </a>
  258.             </div>
  259.             <div class="menu-item" id="item3">
  260.                 <a href="#">
  261.                     <span>家用电器</span>
  262.                     <i class="icon">&#xe665;</i>
  263.                 </a>
  264.             </div>
  265.             <div class="menu-item" id="item4">
  266.                 <a href="#">
  267.                     <span>家具</span>
  268.                     <i class="icon">&#xe665;</i>
  269.                 </a>
  270.             </div>
  271.         </div>
  273.         <!-- 轮播区域 -->
  274.         <div class="banner" id="banner">
  275.             <a href="#">
  276.                 <div class="banner-slide slide1 slide-active"></div>
  277.             </a>
  278.             <a href="#">
  279.                 <div class="banner-slide slide2"></div>
  280.             </a>
  281.             <a href="#">
  282.                 <div class="banner-slide slide3"></div>
  283.             </a>
  284.         </div>
  285.         <a href="#" class="button prev" id="prev"></a>
  286.         <a href="#" class="button next" id="next"></a>
  287.         <div class="dots" id="dots">
  288.             <span class="active"></span>
  289.             <span ></span>
  290.             <span ></span>
  291.         </div>
  292.     </div>
  293. </body>
  294. <script type="text/javascript" src="RotationChart.js"></script>
  295. </html>

CSS部分代码

*{
    margin: 0;
    padding: 0;
}

@font-face{
    font-family: 'iconfont';
    src: url('img/font/iconfont.eot');
    src: url('img/font/iconfont.eot') 
    format('embedded-opentype'),
    url('img/font/iconfont.woff') 
    format('woff'),
    url('img/font/iconfont.ttf') 
    format('truetype'),
    url('img/font/iconfont.svg#iconfont') 
    format('svg');
}

body{
    color: #14191e;
    font-family: '微软雅黑';
}

a{
    text-decoration: none;
}
a:link,a:visited{
    color: #5e5e5e;
}

.container{
    width: 1200px;
    height: 460px;
    margin: 30px auto;
    overflow: hidden;
    position: relative;
}

/*焦点图*/
.banner{
    width: 1200px;
    height: 460px;
    overflow: hidden;
}

.banner-slide{
    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;
    background: url(img/arrow.png) center center no-repeat;
    top: 50%;
    margin-top: -40px;
    transform: rotate(180deg);
}
.button:hover{
    background-color: #333;
    opacity: .8;
    /*IE浏览器*/
    filter: alpha(opacity=80);
}
.next{
    left: auto;
    right: 0;
    transform: rotate(0deg);
}

/*小圆点*/
.dots{
    position: absolute;
    right: 24px;
    bottom: 24px;
    line-height: 12px;
}
.dots 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);
    z-index: 1;
}
.menu-content{
    position: absolute;
    left: 0;
    top: 0;
    width: 244px;
    height: 460px;
    z-index: 2;
}
.menu-item{
    height: 64px;
    line-height: 66px;
    cursor: pointer;
    padding: 0 24px;
}
.menu-item a{
    display: block;
    color: #fff;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,.2);
    height: 63px;
    padding: 0 8px;
    position: relative;
}
.menu-item:last-child a{
    border-bottom: none;
}
.menu-item i{
    position: absolute;
    right: 32px;
    top: 2px;
    color: rgba(255,255,255,.5);
    font-style: normal;
    font-weight: normal;
    font-family: 'iconfont';
    font-size: 24px;
}

/*子菜单*/
.sub-menu{
    width: 730px;
    height: 458px;
    position: absolute;
    left: 244px;
    top: 0;
    background: #fff;
    z-index: 500;
    border: 1px solid #d9dde1;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,.1)
}
.inner-box{
    width: 100%;
    height: 100%;
    background: url('img/fe.png') no-repeat;
    display: none;
}
.sub-inner-box{
    width: 652px;
    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;
}
.bold{
    font-weight: 700;
}
.mr10{
    margin-right: 10px;
}
.ml10{
    margin-left: 10px;
}
.hide{
    display: none;
}

JavaScript部分代码

//此处声明全局变量
var index = 0,//当前显示图片的索引 默认0
    timer = null,//定时器
    container = byId('container'),
    prev = byId('prev'),
    next = byId('next'),
    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){
    return typeof(id) === 'string' ? document.getElementById(id) : id;
}
//封装 DOM二级事件监听 一般用于非IE浏览器
function addHandler(element,type,handler){
    if (element.addEventListener) {
        element.addEventListener(type,handler,true);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type,handler);
    } else {
        element['on' + type] = null;
    }
}
//封装 切换图片的函数
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';
}
//封装 开启自动轮播
function startAutoplay(){
    timer = setInterval(function(){
        index++;
        if (index>=size) {
            index = 0
        }
        changeImg();
    },2000)
}
//封装 清除定时器 停止定时器
function stopAutoplay(){
    //timer有值才需要清除
    if (timer) { 
        clearInterval(timer);
    }
}

//DOM二级事件
// next.addEventListener('click',function(){
//     alert('1');
// });

//调用自动轮播
startAutoplay();
//鼠标划入container 停止轮播
addHandler(container,'mouseover',stopAutoplay);
//鼠标划出container 开启轮播
addHandler(container,'mouseout',startAutoplay);

//点击下一张按钮显示下一张图片
addHandler(next,'click',function(){
    //点击下一张按钮的时候，使得索引递增
    index++;
    if (index>=size) {
        index = 0;
    }
    changeImg();
});
//点击上一张按钮显示上一张图片
addHandler(prev,'click',function(){
    //单击上一张按钮，使得索引递减
    index--;
    if (index<0) {
        index = size - 1;
    }
    changeImg();
});

//点击小圆点索引切换图片
for (var d=0;d<size;d++){
    //dots[d].id = d;//默认给每一个span添加id的属性
    dots[d].setAttribute('data-id',d);//自定义属性
    addHandler(dots[d],'click',function(){
        //只能获取最后一个值 作用域问题
        index = this.getAttribute('data-id');
        changeImg();
    });
}

//主菜单部分
//鼠标划过主菜单
for (var m=0,idx,mlen=menuItems.length;m<mlen;m++){
    //给所有的主菜单定义属性，表明它的索引
    menuItems[m].setAttribute('data-index',m);
    addHandler(menuItems[m],'mouseover',function(){
        //只能获取最后一个值 作用域问题
        //显示子菜单所在的背景
        //直接重置className 隐形移除hide
        subMenu.className = 'sub-menu';
        //获取当前主菜单的索引
        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';
    for (var j=0,jlen=innerBox.length;j<jlen;j++){
            menuItems[j].style.background = 'none';
        }
});
//鼠标划入子菜单 显示子菜单
addHandler(subMenu,'mouseover',function(){
    subMenu.className = 'sub-menu';
});
//鼠标划出子菜单 隐藏子菜单
addHandler(subMenu,'mouseout',function(){
    subMenu.className = 'sub-menu hide';
});