javascript实现点击按钮切换轮播图功能

本文实例为大家分享了js实现点击按钮切换轮播图的具体代码,供大家参考,具体内容如下

菜单区域实现

划过主菜单显示子菜单

轮播区域实现

1、点击图片中左右箭头,分别跳转上一张与下一张

(1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增;(控制索引最大最小值)
2、点击右下角小圆也可以进行图片的跳转

(1)通过索引让变量进行随意的修改
3、每间隔3s进行轮播图的自动切换,鼠标放在图片上清除自动切换

(1)定时器

4、鼠标放在主菜单上显示子菜单,离开子菜单消失。

放在子菜单上显示子菜单,离开消失。

源代码:

html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>轮播图</title>
 <link rel="stylesheet" type="text/css" href="http://www.cppcns.com/wangluo/javascript/css/style.css" />
 <script type="text/javascript" src="http://www.cppcns.com/wangluo/javascript/js/script.js"></script>
</head>
<body>
 <div class="main" id="main">
 <!-- 主菜单背景 -->
 <div class="menu-box"></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="sub-menu hide" id="sub-menu">
 <!-- 子菜单背景 -->
 <div class="inner-box">
 <!-- 子菜单内容 -->
 <div class="sub-inner-box">
  <div class="title">手机、配件</div>
  <div class="sub-row">
  <span class="bold mr10">手机通讯:</span>
  <a href="">手机</a>
  <span class="ml10 mr10">/</span>
  <a href="">手机维修</a>
  <span class="ml10 mr10">/</span>
  <a href="">以旧换新</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">手机配件:</span>
  <a href="">手机壳</a>
  <span class="ml10 mr10">/</span>
  <a href="">手机储蓄卡</a>
  <span class="ml10 mr10">/</span>
  <a href="">数据线</a>
  <span class="ml10 mr10">/</span>
  <a href="">充电器</a>
  <span class="ml10 mr10">/</span>
  <a href="">电池</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">运营商:</span>
  <a href="">中国联通</a>
  <span class="ml10 mr10">/</span>
  <a href="">中国移动</a>
  <span class="ml10 mr10">/</span>
  <a href="">中国电信</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">智能设备:</span>
  <a href="">智能手环</a>
  <span class="ml10 mr10">/</span>
  <a href="">智能家居</a>
  <span class="ml10 mr10">/</span>
  <a href="">智能手表</a>
  <span class="ml10 mr10">/</span>
  <a href="">其他配件</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">娱乐:</span>
  <a href="">耳机</a>
  <span class="ml10 mr10">/</span>
  <a href="">音响</a>
  <span class="ml10 mr10">/</span>
  <a href="">收音机</a>
  <span class="ml10 mr10">/</span>
  <a href="">麦克风</a>
  </div>
 </div>
 </div>
 <div class="inner-box">
 <div class="sub-inner-box">
  <div class="title">电脑</div>
  <div class="sub-row">
  <span class="bold mr10">电脑:</span>
  <a href="">笔记本</a>
  <span class="ml10 mr10">/</span>
  <a href="">平板</a>
  <span class="ml10 mr10">/</span>
  <a href="">一体机</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">电脑配件:</span>
  <a href="">显示器</a>
  <span class="ml10 mr10">/</span>
  <a href="">CPU</a>
  <span class="ml10 mr10">/</span>
  <a href="">主板</a>
  <span class="ml10 mr10">/</span>
  <a href="">硬盘</a>
  <span class="ml10 mr10">/</span>
  <a href="">电源</a>
  <span class="ml10 mr10">/</span>
  <a href="">显卡</a>
  <span class="ml10 mr10">/</span>
  <a href="">其他配件</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">游戏设备:</span>
  <a href="">游戏机</a>
  <span class="ml10 mr10">/</span>
  <a href="">耳机</a>
  <span class="ml10 mr10">/</span>
  <a href="">游戏软件</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">网络产品:</span>
  <a href="">路由器</a>
  <span class="ml10 mr10">/</span>
  <a href="">网络机顶盒</a>
  <span class="ml10 mr10">/</span>
  <a href="">交换机</a>
  <span class="ml10 mr10">/</span>
  <a href="">存储卡</a>
  <span class="ml10 mr10">/</span>
  <a href="">网卡</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">外部产品:</span>
  <a href="">鼠标</a>
  <span class="ml10 mr10">/</span>
  <a href="">键盘</a>
  <span class="ml10 mr10">/</span>
  <a href="">U盘</a>
  <span class="ml10 mr10">/</span>
  <a href="">移动硬盘</a>
  <span class="ml10 mr10">/</span>
  <a href="">鼠标垫</a>
  <span class="ml10 mr10">/</span>
  <a href="">电脑清洁</a>
  </div>
 </div>
 </div>
 <div class="inner-box">
 <div class="sub-inner-box">
  <div class="title">家用电器</div>
  <div class="sub-row">
  <span class="bold mr10">电视:</span>
  <a href="">国产品牌</a>
  <span class="ml10 mr10">/</span>
  <a href="">韩国品牌</a>
  <span class="ml10 mr10">/</span>
  <a href="">欧美品牌</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">空调:</span>
  <a href="">显示器</a>
  <span class="ml10 mr10">/</span>
  <a href="">柜式</a>
  <span class="ml10 mr10">/</span>
  <a href="">中央</a>
  <span class="ml10 mr10">/</span>
  <a href="">壁挂式</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">冰箱:</span>
  <a href="">多门</a>
  <span class="ml10 mr10">/</span>
  <a href="">对开门</a>
  <span class="ml10 mr10">/</span>
  <a href="">三门</a>
  <span class="ml10 mr10">/</span>
  <a href="">双门</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">洗衣机:</span>
  <a href="">滚筒式洗衣机</a>
  <span class="ml10 mr10">/</span>
  <a href="">迷你洗衣机</a>
  <span class="ml10 mr10">/</span>
  <a href="">洗烘一体机</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">厨房电器:</span>
  <a href="">抽烟机</a>
  <span class="ml10 mr10">/</span>
  <a href="">洗碗机</a>
  <span class="ml10 mr10">/</span>
  <a href="">燃气灶</a>
  </div>
 </div>
 </div>
 <div class="inner-box">
 <div class="sub-inner-box">
  <div class="title">家具</div>
  <div class="sub-row">
  <span class="bold mr10">家纺:</span>
  <a href="">被子</a>
  <span class="ml10 mr10">/</span>
  <a href="">枕头</a>
  <span class="ml10 mr10">/</span>
  <a href="">四件套</a>
  <span class="ml10 mr10">/</span>
  <a href="">床垫</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">灯具:</span>
  <a href="">台灯</a>
  <span class="ml10 mr10">/</span>
  <a href="">顶灯</a>
  <span class="ml10 mr10">/</span>
  <a href="">节能灯</a>
  <span class="ml10 mr10">/</span>
  <a href="">应急灯</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">厨具:</span>
  <a href="">烹饪锅具</a>
  <span class="ml10 mr10">/</span>
  <a href="">餐具</a>
  <span class="ml10 mr10">/</span>
  <a href="">菜板刀具</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">家装:</span>
  <a href="">地毯</a>
  <span class="ml10 mr10">/</span>
  <a href="">沙发垫套</a>
  <span class="ml10 mr10">/</span>
  <a href="">装饰字画</a>
  <span class="ml10 mr10">/</span>
  <a href="">照片墙</a>
  <span class="ml10 mr10">/</span>
  <a href="">窗帘</a>
  </div>
  <div class="sub-row">
  <span class="bold mr10">生活日用:</span>
  <a href="">收纳用品</a>
  <span class="ml10 mr10">/</span>
  <a href="">浴室用品</a>
  <span class="ml10 mr10">/</span>
  <a href="">雨伞雨衣</a>
  </div>
 </div>
 </div>
 </div>
 <!-- 焦点图 -->
 <div class="banner" id="banner">
 <!-- 鼠标悬停停止自动轮播的区域 -->
 <section class="cease" id="cease"></section>
 <a href="">
 <div class="banner-slide slide1"></div>
 </a>
 <a href="">
 <div class="banner-slide slide2"></div>
 </a>
 <a href="">
 <div class="banner-slide slide3"></div>
 </a>
 </div>
 <!-- 按钮 -->
 <a href="javascript:void(0)" class="button prev" id="prev"></a>
 <a href="javascript:void(0)" class="button next" id="next"></a>
 <div class="dots" id="dots">
 <span class="active"></span>
 <span></span>
 <span></span>
 </div>
 </div>
</body>
</html>

javascript实现点击按钮切换轮播图功能

扫一扫手机访问