根据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. ...
随机推荐
- 《即时消息技术剖析与实战》学习笔记10——IM系统如何应对高并发
一.IM 系统的高并发场景 IM 系统中,高并发多见于直播互动场景.比如直播间,在直播过程中,观众会给主播打赏.送礼.发送弹幕等,尤其是明星直播间,几十万.上百万人的规模一点也不稀奇.近期随着武汉新型 ...
- Mesh R-CNN 论文翻译（原理部分）
毕设做Mesh R-CNN的实现,在此翻译一下原论文.原论文https://arxiv.org/pdf/1906.02739.pdf. 摘要 二维感知的快速发展使得系统能够准确地检测真实世界图像中的物 ...
- 导出表格数据到excel并下载(HSSFWorkbook版)
这里主要前面是通过一个全局变量,在layui的done回调里拿到数据,然后将该数据导出到excel,这里要注意一点,下载excel不能用ajax方式,如果采用ajax下载默认会读取response返回 ...
- Linux下启动/关闭Oracle
一.Linux下启动Oracle Linux下启动Oracle分为两步: 1)启动监听: 2)启动数据库实例: 1.登录服务器,切换到oracle用户,或者以oracle用户登录 [admin@dat ...
- Django部署--uwsgi配置--nginx服务器配置
uwsgi.ini文件 [uwsgi] #使用nginx连接时使用,Django程序所在服务器地址 socket=127.0.0.1:8000 #直接做web服务器使用,Django程序所在服务器地址 ...
- 暑假第二周总结（在centos系统中安装eclipse出错，改为安装ubantu）
本周试着在centos6.4系统上安装eclipse,在林子雨老师的教程所给的链接无法下载,后来找了许多的教程,即便是从官网下载之后,即便是安装好之后eclipse都无法正常启动,后来翻阅借阅的图书后 ...
- SSH(一)
系统程序架构: 整合思路 1.逆依赖方向而行,由Spring提供对象管理和服务 2.依次实现Spring与Hibernate.Spring与Struts2的集成 配置 ...
- 实验5: IOS的升级与恢复
实验5: IOS的升级与恢复 实验目的 通过本实验可以掌握 1) 掌握IOS 正常的情况下升级IOS2) IOS 丢失的情况下使用TFTP恢复IOS3) IOS 丢失的情况下使用X ...
- Angular 从入坑到挖坑 - Angular 使用入门
一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...
- Django模型中的admin后台管理无法显示字段
在执行django后台管理时,登陆到http://127.0.0.1:8000/admin/,进入页面后没有对应的字段显示.请解决? 代码: models.py from django.db impo ...