轮播图

最新推荐文章于 2024-01-12 09:46:58 发布

ZJQ12334

最新推荐文章于 2024-01-12 09:46:58 发布

阅读量445

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ZJQ12334/article/details/107575571

版权

在这里插入图片描述

细节部分

在这里插入图片描述
细节部分：
1、点击上图的左右箭头，分别跳转到上一张图或者下一张图！
（1）点击上一张图就是让一个变量进行递增，点击下一张就是让一个变量进行递减！
2、点击右小角小圆点也可以进行图片的轮播
（1）通过索引让变量进行随意的修改
3、每间隔2秒时间，进行轮播图自动的切换
（1）涉及到定时器

关于DOM0级事件和DOM2级事件：

1、DOM0级事件：只能给一个元素的某一个行为绑定一次事件，第二次绑定的话会把前面的覆盖掉！
2、DOM2级事件：可以给某一个元素的同一个行为绑定多个，不同的办法！

关于监听的方法：addEventListener() 和 removeEventListener()
1、addEventListener() 可以为元素添加多个事件处理程序，出发时候按照添加的顺序依次机型调用！
2、removeEventListener() 移除事件处理程序（不能移除匿名添加的函数）关于参数名：
1、第一个参数：时间名！
2、第二个参数：事件梳理程序的函数
3、第三个参数：布尔值！ true表示再捕获调用从上往下调用！ false表示再冒泡阶段调用从下往上调用！

DOM0级事件：

在这里插入图片描述

DOM2级事件

在这里插入图片描述

跨浏览器兼容性的DOM2级事件的处理程序

DOM2级事件
持绑定多个函数; 只有三个参数都相同时，才会处理称重复绑定
第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。

<input id='input' type="text" onclick="alert('haha')" />
    <script>
        document.getElementById('input').onclick = function() {
            alert('aaa')
        };
        document.getElementById('input').addEventListener('click', function() {
            alert('bbb')
        }, true)
        document.getElementById('input').addEventListener('click', function() {
            alert('ccc')
        }, true)
        document.getElementById('input').addEventListener('click', function() {
            alert('dddd')
        }, false)

        // 兼容低版本IE的写法
        document.getElementById('input').attachEvent("onclick", function() {
            alert('eeee')
        });
    </script>

关于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">&#xe665;</i>
        </a>        
      </div>
      <div class="menu-item"  >
        <a href="#">
          <span>电脑</span>
          <!-- 小箭头设置 -->
          <i class="icon">&#xe665;</i>
        </a>        
      </div>
      <div class="menu-item"  >
        <a href="#">
          <span>家用电器</span>
          <!-- 小箭头设置 -->
          <i class="icon">&#xe665;</i>
        </a>
      </div>
      <div class="menu-item" >
        <a href="#">
          <span>家具</span>
          <!-- 小箭头设置 -->
          <i class="icon">&#xe665;</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>

关于CSS样式部分：

/*全局定义*/
*{
  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;
}

关于JS部分：

var index= 0,//当前显示图片得索引，默认值为0
  timer = null,//定时器
  main=byId("main"),
  right = byId("right"),
  left = byId("left"),
  //过去id为banner 下的所有标签为div的标签
  pics = byId("banner").getElementsByTagName("div"),
  dots = byId("dots").getElementsByTagName("span"),
  menuContent = byId("menu-content"),
  menuItems = menuContent.getElementsByClassName("menu-item"),
  subMenu = byId("sub-menu"),
  innerBox =subMenu.getElementsByClassName("inner-box"); 
  size = pics.length;//获取图片.getElemenysByClassName(的长度

var body = document.getElementsByTagName("body")[0];


//封装getElementById()
function byId(id){
  return typeof(id)==="string"?document.getElementById(id):id;
}


function addHandler(element,type,handler){
  //非IE浏览器
  if (element.addEventListener){
    element.addEventListener(type,handler,true);
  //IE浏览器支持DOM2级事件
}else if (element.attachEvent){
  element.attachEvent("on"+type,handler);
    //IE浏览器不支持DOM2级事件
  }else{
    element["on"+type]=null;
  }
}

//清楚定时器，停止自动轮播
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,0.1)"
  });
}
addHandler(body,"mouseout",function(){
  subMenu.className="sub-menu hide";
});
addHandler(banner,"mouseout",function(){
  subMenu.className="sub-menu hide";
});
addHandler(menuContent,"mouseover",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);


//自动轮播
function startAutoplay(){
  //setInterval一般情况下是有两个值，第一个写函数
  //第二个值通常是自动轮播的时间，毫秒计算
  timer = setInterval(function(){
    index++;
    if (index>=size) {index=0}
      changeImg();
  },2000)
}

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(right,"click",function(){
  //单机点击下一张图片，索引进行递增
  index++;
  if (index>=size) {index = 0}
    for(var i=0;i<size;i++){
      pics[i].style.display = "none";
      dots[i].className="";
    }
    pics[index].style.display = "block";
    dots[index].className="active";//动态添加active样式
  });
addHandler(left,"click",function(){
  //单机点击上一张图片，索引进行递增
  index--;
  if (index<0) {index=size-1}
    changeImg();
});
//点击圆点，索引切换图片，绑定事件
for(var d=0;d<size;d++){
  //这中写法是默认给每一个span标签添加名为id的属性  赋值d
  // dots[d].id=d;
  //添加自定义属性
  //第一个值指的是自定义属性，第二个值代表赋值给那个标签
  dots[d].setAttribute("data-id",d);
  addHandler(dots[d],"click",function(){
    // alret(d);//只能获取最后一个值
    //this表示每一个当前对象的引用
    index = this.getAttribute("data-id");
    changeImg();
  });
}
//定时器
//1，图片每间隔几秒要切换一次，自动切换，设置定时器
//2，当鼠标滑倒轮播图上的时候，自动切换取消


//自动开启轮播
startAutoplay();