根据js轮播图原理写出合理的结构与样式、并实现js交互效果
在JS中，能用 . 的地方一般都可以用 [ ] 取代
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main" id="main">
<div class="menu-box"></div>
<!-- 二级菜单 -->
<div class="sub-menu hide" id="sub-menu">
<div class="wrap">
<div class="sub-menu-row">
<div class="sub-menu-item-title">英国短毛猫</div>
<span class="title mr10">英国短毛猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
<div class="sub-menu-row">
<span class="title mr10">英国短毛猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
<div class="sub-menu-row">
<span class="title mr10">英国短毛猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
<div class="sub-menu-row">
<span class="title mr10">英国短毛猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
</div>
<div class="wrap">
<div class="sub-menu-row">
<div class="sub-menu-item-title">暹罗猫</div>
<span class="title mr10">暹罗猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
<div class="sub-menu-row">
<span class="title mr10">暹罗猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
<div class="sub-menu-row">
<span class="title mr10">暹罗猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
<div class="sub-menu-row">
<span class="title mr10">暹罗猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
</div>
<div class="wrap">
<div class="sub-menu-row">
<div class="sub-menu-item-title">布偶猫</div>
<span class="title mr10">布偶猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
<div class="sub-menu-row">
<span class="title mr10">布偶猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
<div class="sub-menu-row">
<span class="title mr10">布偶猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
<div class="sub-menu-row">
<span class="title mr10">布偶猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
</div>
<div class="wrap">
<div class="sub-menu-row">
<div class="sub-menu-item-title">苏格兰折耳猫</div>
<span class="title mr10">苏格兰折耳猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
<div class="sub-menu-row">
<span class="title mr10">苏格兰折耳猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
<div class="sub-menu-row">
<span class="title mr10">苏格兰折耳猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
<div class="sub-menu-row">
<span class="title mr10">苏格兰折耳猫：</span>
<a href="">喵1</a>
<span class="ml10 mr10">/</span>
<a href="">喵2</a>
<span class="ml10 mr10">/</span>
<a href="">喵3</a>
</div>
</div>
</div>
<!-- 一级菜单 -->
<div class="main-menu" id="main-menu">
<div class="menu-item">
<a href="javascript:void(0)">
英国短毛猫<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="javascript:void(0)">
暹罗猫<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="javascript:void(0)">
布偶猫<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="javascript:void(0)">
苏格兰折耳猫<i class="icon"></i>
</a>
</div>
</div>
<!-- 焦点图 -->
<div class="banner" id="banner">
<!-- javascript:void(0) 不添加链接 -->
<a href="javascript:void(0)">
<div class="banner-slide slide1 banner-active"></div>
</a>
<a href="javascript:void(0)">
<div class="banner-slide slide2"></div>
</a>
<a href="javascript:void(0)">
<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>
<script src="script.js"></script>
</body>
</html>
style.css
*{
margin:;
padding:;
}
a{
text-decoration:none;
color:#333;
}
@font-face {font-family: "iconfont";
src:url('source/font/iconfont.eot?t=1581168967831'); /* IE9 */
src:url('source/font/iconfont.eot?t=1581168967831#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('source/font/data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKYAAsAAAAABkgAAAJLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApQYwE2AiQDCAsGAAQgBYRtBzQbjQXIHpIkRSIVUICEKgjCM+Lhaz/25+4uJhLpnkyTSSIUGkQSxEbpTIcvJbx799P7HZPN82U5ILLFS5p+zr+SG4Ea27ElozdhULjJrQCCfeLe6Z9AH2TUA8pxLxpr0qQuoC4OpID2xiiyIom9YeyCF/iYQKNRftrW+OwqVCvsVYF4liIB1YWQorBsvVDbcLCITzXq03t6Az6i78d/0agmqcnsusOnsTQM/lQ6efm12nAREMIEdLwGGctAIU4bU/vKBOPKNKbKTYJjVQc/lVUVOMVR/zxRy65sBsNQ/kwKT/mo2QSPNVI3MDhpMtHt8cuj840OTPsXXxx3iasu7ert/+T1kbf/tOWvL+/ORVv8e/zlpqVV420wCFBNVR4CDcH27dV8rKn3r76pgO/0xwQJVIthHlC/F3fwNxQDu4qhsh2paIrG/qT7LA2NGlHBvk4/U809p86Fej0TPHVGMmT1psnCLqNGkxXUqreKRksmjjfpopSJ0oBFuwCh3ROSVl/I2r2Thf1GjV6/qNUeZWh0Hm0XNpkNWTuiMEGYZskSkynb4q6LauPqZRQ5I6HyqohfR+XJKIsEw+XsBFqoltji5UWUiDOubJONg+fQMGzmKDuLKQpmiJzuUIg3vSmYsk2otUlBCQSlMUkljJRis/BgMKmtfH4ZEnIMCaqjoy67DikeOT4TERQeQE7orUEdj/KKJ0+IIoRjOMVmYsbBPGQw2BineV4WSiFBmQkJR7eQ04sP1Qe3N5p/dwga2ZYUzqSs8cXOZWXCotAGAAAAAA==') format('woff2'),
url('source/font/iconfont.woff?t=1581168967831') format('woff'),
url('source/font/iconfont.ttf?t=1581168967831') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('source/font/iconfont.svg?t=1581168967831#iconfont') format('svg'); /* iOS 4.1- */
}
.main{
width:1200px;
height:460px;
margin:30px auto;
position: relative;
}
/*焦点图*/
.banner{
width:1200px;
height:460px;
overflow:hidden;
}
.banner-slide{
width:1200px;
height:460px;
float:left;
overflow:hidden;
background:center no-repeat;
display: none;
}
.banner-active{
display: block;
}
.slide1{
background-image:url(source/banner1.jpg);
}
.slide2{
background-image:url(source/banner2.jpg);
}
.slide3{
background-image:url(source/banner3.jpg);
}
.button{
width:40px;
height:80px;
position: absolute;
top:50%;
left:244px;
margin-top:-40px;
background:url(source/arrow.png) center center no-repeat;
cursor:pointer;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
.button:hover{
background-color:rgba(100, 100, 100, .7);
}
.button.next{
right:;
left:auto;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
.dots{
position: absolute;
right:24px;
bottom:24px;
}
.dots span{
display: inline-block;
width:12px;
height:12px;
background:rgba(7, 17, 27, .4);
box-shadow:0 0 0 2px rgba(255, 255, 255, .8) inset;
border-radius:50%;
margin-left:12px;
cursor:pointer;
}
.dots span.active{
background:rgba(255, 255, 255, .8);
box-shadow:0 0 0 2px rgba(7, 17, 27, .4) inset;
}
/*菜单*/
.menu-box{
position: absolute;
top:;
left:;
width:244px;
height:460px;
background:rgba(0, 0, 0, .5);
z-index:;
}
.main-menu{
position: absolute;
top:;
left:;
width:244px;
height:460px;
z-index:;
}
.menu-item{
height:64px;
padding:0 20px;
line-height:63px;
}
.menu-item a{
display: block;
height:64px;
border-bottom:1px solid rgba(255, 255, 255, .5);
color:#fff;
padding-left:5px;
font-size:14px;
position: relative;
}
.menu-item a i{
position: absolute;
right:20px;
top:2px;
font-style:normal;
font-weight:normal;
font-family: "iconfont";
color:rgba(255, 255, 255, .8);
}
.sub-menu{
position: absolute;
top:1px;
left:244px;
width:600px;
height:458px;
background:rgba(255, 255, 255, .8);
box-shadow:0 2px 5px 0 #ccc;
z-index:;
overflow:hidden;
}
.sub-menu .wrap{
width:100%;
height:100%;
padding:20px 0 0 20px;
}
.sub-menu-item-title{
color:red;
font-weight:bold;
margin-bottom:25px;
}
.sub-menu-row{
margin-bottom:25px;
}
.sub-menu-row .title{
font-weight:bold;
color:#333;
}
.mr10{
margin-right:10px;
}
.ml10{
margin-left:10px;
}
.hide{
display: none;
}
/*# sourceMappingURL=style.css.map */
script.js
var index = 0, //最初索引
mindex = 0,
timer = null, //定时器
main = byId("main"),
mainMenu = byId("main-menu"),
menuItems = mainMenu.getElementsByClassName("menu-item"),//主菜单项
subMenu = byId("sub-menu"),
wraps = subMenu.getElementsByClassName("wrap"),//子菜单项
wsize = wraps.length,
prev = byId("prev"), //获取上一张按钮
next = byId("next"), //获取下一张按钮
pics = byId("banner").getElementsByTagName("div"), //所有banner图
dots = byId("dots").getElementsByTagName("span"), //所有圆点
size = pics.length; //banner图的个数 //通过id获取元素
function byId(id){
return typeof id === "string" ? document.getElementById(id) : id;
} //事件绑定函数封装
function addHandler(ele, type, handler){
if(ele.addEventListener){
ele.addEventListener(type, handler, false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type, handler);
}else{
ele["on"+type] = handler;
}
} //样式切换
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();
},1000)
} //停止自动轮播
function stopAutoPlay(){
if(timer){
clearInterval(timer);
}
} //点击下一张按钮
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].setAttribute("data-id", d);
addHandler(dots[d], "click", function(){
//此处不能直接获取d的值，由于作用域的原因，d的值是循环结束后的值，此处永远是3
index=this.getAttribute("data-id");
changeImg();
})
} //默认自动轮播
startAutoPlay(); //鼠标移入main停止轮播
addHandler(main, "mouseover", stopAutoPlay); //鼠标移出main继续轮播
addHandler(main, "mouseout", startAutoPlay); // 菜单显示效果
for(var m=0,mlen=menuItems.length;m<mlen;m++){
menuItems[m].setAttribute("data-mid", m);
addHandler(menuItems[m], "mouseover", function(){
subMenu.className="sub-menu";//显示子菜单容器
mindex=this.getAttribute("data-mid");//this指当前触发事件的元素
for(var w=0;w<wsize;w++){
wraps[w].style.display="none";
menuItems[w].style.background="none";
}
wraps[mindex].style.display="block";
menuItems[mindex].style.background="rgba(0, 0, 0, .2)";
});
} //鼠标离开主菜单，隐藏子菜单
addHandler(mainMenu, "mouseout", function(){
subMenu.className="sub-menu hide";
}); //鼠标离开子菜单，隐藏子菜单
addHandler(subMenu, "mouseout", function(){
this.className="sub-menu hide";
}); //鼠标进入子菜单，显示子菜单
addHandler(subMenu, "mouseover", function(){
this.className="sub-menu";
});
效果图
根据js轮播图原理写出合理的结构与样式、并实现js交互效果的更多相关文章
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
- 纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
- JS轮播图（网易云轮播图）
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js实现轮播图原理
轮播图的原理1.图片移动实现原理:利用浮动将所有所有照片依次排成一行,给这一长串图片添加一个父级的遮罩,每次只显示一张图,其余的都隐藏起来.对图片添加绝对定位,通过控制left属性,实现照片的移动. ...
- Web前端JS实现轮播图原理
实现轮播图有很多方式,但是html的结构都是一样的.本文使用了Jquery框架,Dom操作更加方便灵活 html部分: <div class="banner"> < ...
- 手把手原生js轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
随机推荐
- C语言秋季作业4
本周作业头 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 作业连接 我在这个课程的目标是 熟练掌握for循环语句的运用 这个作业在那个具体方面帮助我实现目标 通过作业练习 参考文献 文 ...
- WSL初始配置+图形界面
安装WSL 换源 参考另一篇文章https://www.cnblogs.com/bosslv/p/11006680.html 修改$PATH,默认会把windows的PATH也加入WSL中,不需要的话 ...
- 初探 Node.js 框架：eggjs （环境搭配篇）
eggjs 是一个优秀的 Node.js 框架 概述:为什么标题上说 eggjs 是一个优秀的 Node.js 框架(可跳过)? 换言之,我们为什么选择 eggjs 进行开发而不是之前初学时使用的 E ...
- jmeter处理http请求Content-Type类型和传参方式
引言 我们在做接口测试的时候经常会忽略数据类型content-type的格式,以及参数Parameters和Body Data的区别和用途. 对于初次接触接口的同学来说,自己在发送一个http请求时, ...
- Spring（六）核心容器 - 注册单例 Bean 实例、SingletonBeanRegistry 简介
前言 上篇文章我们对注册 Bean 的核心类 BeanDefinitionRegistry 进行了讨论,这里的注册 Bean 是指保存 Bean 的相关信息,也就是将 Bean 定义成 BeanDef ...
- 超实用的Eclipse快捷键大全（解密为什么他们的代码写的又快又好~）
1.Ctrl+s:快速保存代码 一定要记得随时随地用Ctrl+s来保存我们的代码哦!!!不然等到电脑关机或者是使用的Eclipse突然闪退就欲哭无泪了.此时脑海里就突然出现了哔哔哔的画面~ 2.Alt ...
- Rust语言Actix-web框架连接Redis数据库
Rust语言Actix-web框架连接Redis数据库 actix-web2.0终于发布了,不再是测试版本,基于actor系统再加上异步支持,使得actix-web成为了目前响应速度最快的服务器框架, ...
- latex使用总结
1 输入双引号以及单引号: 双引号:按两下 Tab键上方的键, 再按两下单引号键. 单引号:按一下Tab键上方的键,再按一下单引号键. 原文地址 2 时间复杂度的O写法: $\mathcal{O}$ ...
- WeChall_Training: ASCII (Training, Encoding)
In a computer, you can only work with numbers.In this challenge you have to decode the following mes ...
- 题解【[AHOI2013]作业】
\[ \texttt{Preface} \] 数据貌似很水,据说 \(A_i\leq n\) ,连离散化都不需要. 不知道为啥设块大小为 \(\frac{n}{\sqrt m}\) 会一直 Runti ...