根据js轮播图原理写出合理的结构与样式并实现js交互效果
Posted chenyingying0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了根据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:0; padding:0; } 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:0; 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:0; left:0; width:244px; height:460px; background:rgba(0, 0, 0, .5); z-index:1; } .main-menu{ position: absolute; top:0; left:0; width:244px; height:460px; z-index:2; } .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:500; 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交互效果的主要内容，如果未能解决你的问题，请参考以下文章