根据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. ...
随机推荐
- itext5和itext7操作pdf平铺和图层叠加(tiling, and N-upping)
区别 itext5 生成pdf版本:1.4(Acrobat5.x) itext7 生成pdf版本:1.7(Acrobat8.x) iText7生成的pdf文件大, itext7 Java库更加系统和完 ...
- python之路：day3
内容 变量的创建过程 身份运算和None 数据类型 一. 变量创建过程 首先,当我们定义了一个变量name = ‘oldboy’的时候,在内存中其实是做了这样一件事: 程序开辟了一块内存空间,将‘ol ...
- SpringCloud与微服务Ⅸ --- Zuul路由网关
一.Zool是什么 Zuul包含了对请求路由和过滤两个最主要的功能: 其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础而过滤器功能则负责对请求的处理过程进行干预,是实现 ...
- Web 开发工具类(4): IDUtils
package com.easybuy.utils; import java.util.Random; /** * * <p>Title: IDUtils</p> * < ...
- 集合详解之 Collection
集合详解之 Collection 先来看看集合的继承关系图,如下图所示: 其中: 外框为虚线的表示接口,边框为实线的表示类: 箭头为虚线的表示实现了接口,箭头为实线的表示继承了类. 为了方便理解,我隐 ...
- 类加载之 <clinit>() 和 <init>()
前序文章:深入理解Java类加载 <clinit>() 与 <init>() 区别 一.<clinit>() Java 类加载的初始化过程中,编译器按语句在源文件中 ...
- Shell case语法结构解析
case ... esac 与其他语言中的 switch ... case 语句类似,是一种多分枝选择结构,每个 case 分支用右圆括号开始,用两个分号 ;; 表示 break,即执行结束,跳出整个 ...
- IntelliJ IDEA 2020 的Debug功能也太好用了，真香！
写在前边 作为一个有点强迫症的程序员来说,所有的应用软件.开发工具都必须要升级到最高版本,否则就会很难受到坐立不安.日思夜想.茶饭不思.至于什么时候得的这种病我也记不清了,哈哈哈 IntelliJ I ...
- Java12可用新特性一览，了解一下没有错
你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it well enough ...
- lua学习之类型与值篇
类型与值 lua 是动态类型的语言 在语言中没有类型定义的语法 每个值都携带有它的类型信息 8种基础类型 用 type 可以返回这个值的类型的名称 将一个变量用于不同类型,通常会导致混乱的代码 但合理 ...