【JS基础】仿慕课网头部布局
2017-04-17 11:43
405 查看
实现了分类导航和轮播
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 2016/10/4（慕课网JS基础学习）
- 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计
- week9---11月3日 div 布局综合练习、JS基础
- js基础03特效简单响应式页面布局client()函数封装
- Ionic基础——js指令布局
- React.js 慕课网基础教程笔记摘录
- 2016/10/5（慕课网JS基础学习）
- 【慕课网】网页布局基础学习笔记
- 【慕课网】NODE.JS基础（一）学习笔记
- Ionic基础——js指令布局
- 【JS基础】JS实现瀑布流布局
- vue.js入门基础--慕课网笔记
- 使用js实现基于可视布局信息的网页噪音去除的测试方法
- 基础的prototype.js常用函数及其用法
- JS基础知识总结
- 用js取得服务器响应的头部信息
- 网页布局基础-XHTML与CSS基础
- 基础框架平台——基础管理框架——GUI抽象设计（布局管理器）
- js基础到精通全面教程
- 保存的js无法执行的解决办法[原创]_基础知识_脚本之家