【JS基础】仿慕课网头部布局
来源：互联网 发布：mac mp3编辑软件 编辑：程序博客网 时间：2024/06/11 09:24
实现了分类导航和轮播
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生js实现轮播效果</title><style> *{ padding: 0px; margin:0px; } li{ list-style: none; } .carousel{ position: relative; margin: 0px 40px; } .carousel>img{ position:absolute; top:10px; width:100%; height:425px; } .carousel .prenext{ position: absolute; top:185px; z-index: 11; left:220px; } .carousel .prenext li{ font-size:3em; background-color: rgba(255,255,255,.5); float: left; cursor: pointer; } .carousel .prenext li+li{ position:relative; left:900px; } .carousel .prenext li:hover{ background-color: rgba(255,255,255,.8); } .carousel .point{ position: absolute; z-index: 10; right:60px; top:405px; } .point span{ display: inline-block; width:12px; height: 12px; border-radius: 10px; background-color: #fff; } .point span:hover{ background-color: gray; } .carousel .lside{ position:absolute; left:0px; top:10px; z-index: 10; background-color:rgba(7,17,27,0.3); cursor: pointer; } .lside ul li{ width:200px; height:59.8px; line-height: 59.8px; border-top: 1px solid rgba(255,255,255,.2); text-align: center; box-shadow: } .lside ul li:hover{ background-color:rgba(7,17,27,0.7) ; } .lside ul li a{ text-decoration: none; color:#fff; font-size: 16px; } .carousel .js-nav{ display: none; position: absolute; z-index: 15; top:10px; left:200px; background-color: #fff; width:500px; height:425px; } .carousel .js-nav>dl>dt>a, .carousel .js-nav>dl>dd>a{ text-decoration: none; color:#000; } .carousel .js-nav>dl>dd>a:hover{ color:red; }</style> </head><body> <div class="carousel"> <img src="icon/banner1.jpg" alt="0"> <img src="icon/banner2.jpg" alt="1"> <img src="icon/banner3.jpg" alt="2"> <div class="point"> <span></span> <span></span> <span></span> </div> <ul class="prenext"> <li><</li> <li>></li> </ul> <div class="lside"> <ul> <li> <a href="#">水果类别1</a> </li> <li> <a href="#">水果类别2</a> </li> <li> <a href="#">水果类别3</a> </li> <li> <a href="#">水果类别4</a> </li> <li> <a href="#">水果类别5</a> </li> <li> <a href="#">水果类别6</a> </li> <li> <a href="#">水果类别7</a> </li> </ul> </div> <div class="js-nav"> <dl> <dt> <a href="">11111</a> <span>></span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">11111</a> <span>></span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">11111</a> <span>></span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> </div> <div class="js-nav"> <dl> <dt> <a href="">类别一</a> <span>></span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">类别二</a> <span>></span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">类别三</a> <span>></span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> </div> <div class="js-nav"> <dl> <dt> <a href="">类别四</a> <span>></span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">类别五</a> <span>></span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">类别六</a> <span>></span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> </div> <div class="js-nav"> <dl> <dt> <a href="">11111</a> <span>></span> </dt> <dd> <a href="">11111</a> <a href="">1444</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">11111</a> <span>></span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">11111</a> <span>></span> </dt> <dd> <a href="">7</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> </div> <div class="js-nav"> <dl> <dt> <a href="">11111</a> <span>2222</span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">11111</a> <span>2222</span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">11111</a> <span>2222</span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> </div> <div class="js-nav"> <dl> <dt> <a href="">11111</a> <span>2222</span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">11111</a> <span>2222</span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">11111</a> <span>2222</span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> </div> <div class="js-nav"> <dl> <dt> <a href="">11111</a> <span>2222</span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">11111</a> <span>2222</span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> <dl> <dt> <a href="">11111</a> <span>2222</span> </dt> <dd> <a href="">11111</a> <a href="">11111</a> <a href="">11111</a> </dd> </dl> </div> </div> <script> window.onload=function(){ //轮播切换 var div=document.getElementsByClassName("point")[0]; var points=div.getElementsByTagName("span"); var imges=document.getElementsByTagName("img"); for(var i=0;i<points.length;i++){ points[i].index=i; points[i].onclick=function(){ for(var j=0;j<imges.length;j++){ imges[j].style.zIndex=0; points[j].style.backgroundColor="#fff"; } this.style.backgroundColor="gray"; imges[this.index].style.zIndex=3; } } //左边导航 var lside=document.getElementsByClassName("lside")[0]; var lis=lside.getElementsByTagName("li"); var jsnav=document.getElementsByClassName("js-nav"); for(var i=0;i<lis.length;i++){ lis[i].index=i; } for(var j=0;j<lis.length;j++){ lis[j].onmouseover=function(){ for(var k=0;k<lis.length;k++){ jsnav[k].style.display="none"; } jsnav[this.index].style.display="block"; } jsnav[j].onmouseleave=function(){ this.style.display="none"; } } //左右切换 var prenext=document.getElementsByClassName("prenext")[0]; var changes=prenext.getElementsByTagName("li"); for(var i=0;i<changes.length;i++){ for(var k=0;k<imges.length;k++){ imges[k].style.zIndex=k; console.log(imges[k]); } changes[i].onclick=function(){ var temp=imges[0].style.zIndex; for(var j=0;j<imges.length-1;j++){ imges[j].style.zIndex=imges[j+1].style.zIndex; } imges[imges.length-1].style.zIndex=temp; } }} </script></body></html> 0 0
- 【JS基础】仿慕课网头部布局
- 手机页面布局头部
- 首页头部提示布局
- js网站头部
- js让头部悬浮
- http协议基础头部
- RecyclerView的添加头部布局
- Ionic基础——js指令布局
- Ionic基础——js指令布局
- js引用公用头部底部
- php文件头部空白影响CSS布局
- RecyclerView 添加头部和尾部布局
- Android：ListView 多布局，加头部，尾部
- RecyclerView 添加头部和尾部布局
- RecyclerView 添加头部和尾部布局
- RecyclerView 头部添加布局 简单示例
- 自定义布局实现头部搜索框
- ViewPager+Fragment 滚动系隐藏头部布局
- sql注入
- 3018 问题 C: Elastic Ball in the Frame
- ORB特征点检测
- return ModelAndView 中返回的Model值范围
- 引入头文件
- 【JS基础】仿慕课网头部布局
- Nginx简单实现反向代理和负载均衡
- 170416 汇编-标志寄存器:SF、CF、OF
- Android,6.0权限，简单实现,好用的框架
- HDU
- 华为oj 成绩排序java编码
- JS中的forEach、$.each、map的区别
- 【LeetCode】 109. Convert Sorted List to Binary Search Tree C语言
- 编译完Qt5.8.0没有报错
