原生JS制作二级菜单+轮播图效果
程序员文章站
2022-06-01 18:14:42
...
效果图:d代码如下:
<style>
*{
margin:0;
padding:0;
}
#box{
width: 1200px;
height: 460px;
margin: 0 auto;
position: relative;
}
.img{
width: 1200px;
height: 460px;
position: absolute;
top:0;
left:0;
}
.img:nth-of-type(1){
background: url("./img/bg1.jpg");
}
.img:nth-of-type(2){
background: url("./img/bg2.jpg");
display: none;
}
.img:nth-of-type(3){
background: url("./img/bg3.jpg");
display: none;
}
.jiantou1{
left: 242px;
}
.jiantou2{
right: 20px;
}
#box .cc{
width: 50px;
height: 200px;
line-height: 200px;
position: absolute;
top:130px;
background: rgba(0,0,0,0.3);
font-size: 50px;
text-align: center;
font-weight: bold;
color:#fff;
}
.div-dian{
width: 156px;
height: 32px;
position: absolute;
right:10px;
bottom: 10px;
}
.div-dian span{
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #000000;
border-radius: 50%;
background: #fff;/*默认颜色*/
}
.div-dian .span-first{
background: springgreen;
}
/*----------------以上是轮播图---------------*/
.fl{
float: left;
}
.fr{
float: right;
}
.ul1{
position: absolute;
width: 200px;
height: 460px;
top:0;
left:0;
padding: 0 20px;
background: rgba(6,6,6,0.3);
opacity: 0.7;
}
.ul1>li{
list-style: none;
width: 200px;
height: 80px;
line-height: 80px;
border-bottom: 1px silver solid;
color:#EFEFEF;
}
.ul1>li{
list-style: none;
width: 200px;
height: 80px;
line-height: 80px;
border-bottom: 1px silver solid;
color:#EFEFEF;
}
.div-center{
width: 500px;
height: 458px;
border: 1px solid #666666;
background: url("./img/img.jpg");
position: absolute;
left: 240px;
top:0;
}
.div-center{
display: none;
}
.div-center .re{
color:red;
margin-left: 50px;
}
.div-center .ul2>li{
list-style: none;
width: 500px;
height: 50px;
line-height: 50px;
color:#000000;
margin-left: 50px;
}
.ul2>li .fl>a{
padding: 0 16px;
color:blue;
text-decoration: none;
}
/*----------以上是二级菜单-----------*/
</style>
</head>
<body>
<div id="box">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="jiantou jiantou1 cc"><</div>
<div class="jiantou jiantou2 cc">></div>
<div class="div-dian">
<span class="span-first"></span>
<span></span>
<span></span>
</div>
<ul class="ul1">
<li class="lis">
<span>手机、配件</span><span class="fr">></span>
<div class="div-center">
<h4 class="re">手机、配件</h4>
<ul class="ul2">
<li>
<h4 class="fl">手机通讯:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
<li>
<h4 class="fl">手机配件:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
<li>
<h4 class="fl">运营商:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
<li>
<h4 class="fl">智能设备:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
</ul>
</div>
</li>
<li class="lis">
<span>电脑</span><span class="fr">></span>
<div class="div-center">
<h4 class="re">电脑</h4>
<ul class="ul2">
<li>
<h4 class="fl">手机通讯:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
<li>
<h4 class="fl">手机配件:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
<li>
<h4 class="fl">运营商:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
<li>
<h4 class="fl">智能设备:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
</ul>
</div>
</li>
<li class="lis">
<span>家用电器</span><span class="fr">></span>
<div class="div-center">
<h4 class="re">家用电器</h4>
<ul class="ul2">
<li>
<h4 class="fl">手机通讯:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
<li>
<h4 class="fl">手机配件:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
<li>
<h4 class="fl">运营商:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
<li>
<h4 class="fl">智能设备:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
</ul>
</div>
</li>
<li class="lis">
<span>家具</span><span class="fr">></span>
<div class="div-center">
<h4 class="re">家具</h4>
<ul class="ul2">
<li>
<h4 class="fl">手机通讯:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
<li>
<h4 class="fl">手机配件:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
<li>
<h4 class="fl">运营商:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
<li>
<h4 class="fl">智能设备:</h4>
<p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
</li>
</ul>
</div>
</li>
</ul>
</div><script src="js/index.js"></script>
<script>
//1.点击箭头切换下一张图片
var jiantou=document.getElementsByClassName("jiantou");
var imgs=document.getElementsByClassName("img");//图片
var box=document.getElementById("box");//大盒子
var spa=document.getElementsByTagName("span");//点
var index =0;//默认第一张
//单击事件-->箭头轮播
jiantou[1].onclick=function() {
lb(true)
};
//单击事件<--箭头轮播
jiantou[0].onclick=function() {
lb(false)
};
//鼠标移入大盒子 停止轮播
box.onmouseover=function() {
clearInterval(timer)
};
//鼠标移出大盒子 继续轮播
box.onmouseout=function() {
timer=setInterval(function() {lb(true)},1000);
};
//间歇调用 (用匿名函数--传参)
var timer=setInterval(function() {lb(true)},1000);
//函数封装
function lb(n) {//n为开关进行判断真true或假false
if(n){//++
index++;//递增(往前)
if(index>2){//当下标大于2时
index=0;//默认图片
}
}else{//--
index--;//递减(倒退)
if(index<0){//当下标小于0时,执行index=2
index=2;//默认最后图片
//console.log(index=2)
}
}
//循环遍历 （以下公共部分--jiantou）
for(var i=0;i<imgs.length;i++){
imgs[i].style.display="none";//全部隐藏
spa[i].className="";//空
}
imgs[index].style.display="block";//默认当前第一张显示
spa[index].className="span-first";//默认选中
}
//点击某一种项进行跳转某图片
for(var i=0;i<spa.length;i++){//点
spa[i].index=i;//获取所有的下标
spa[i].onclick=function() {//单击点
//循环遍历
for(var i=0;i<imgs.length;i++){
imgs[i].style.display="none";//全部隐藏
spa[i].className="";//空
}//this.index:代表点击的某一项下标
imgs[this.index].style.display="block";//默认当前第一张显示
spa[this.index].className="span-first";//默认选中
index=this.index;//下标改成当前的下标 //随机选中的一项
}
}
</script>index.js引入的文件如下：
;
//获取标签
var lis=document.getElementsByClassName("lis");//li
var div_cen=document.getElementsByClassName("div-center");//中间部分
var box=document.getElementById("box");
//循环遍历属性
for(var i=0;i<lis.length;i++){
lis[i].index=i;//得到每个下标
//鼠标移入
lis[i].onmouseover=function() {
for(var j=0;j<div_cen.length;j++){//其它隐藏
div_cen[j].style.display="none";//前面的div隐藏
}
div_cen[this.index].style.display="block";//当前div显示//this.index:代表当前下标
};
}
//鼠标移出
for(var m=0;m<div_cen.length;m++){//设置中间的div宽度和高度控制隐藏
div_cen[m].index=m;
div_cen[m].onmouseleave=function() {
for(var j=0;j<div_cen.length;j++){//其它隐藏
div_cen[j].style.display="none";//前面的div隐藏
}
}
}上一篇： Spark的转换操作基础知识和一些使用技巧！！！（Unit3）
下一篇： 二级菜单--简单