原生 js+css+html实现轮播图效果及左侧菜单栏效果
2018-05-10 15:28
866 查看
<!--
仅作为 个人笔记 有幸被搜到 希望对大家有帮助 欢迎大家来此探讨一起学习技术 。
-->
//轮播图 效果和上一篇 中的轮播图代码 一致 此篇是在轮播基础上新增的 左侧菜单栏效果
/*css代码 部分*/
<style>
*{
margin: 0px;
padding: 0px;
}
body{
color: #FF4500;
font-family: "微软雅黑";
}
.main{
width: 1200px;
height: 460px;
margin: 30px auto;/*控制距离上边30像素 居中显示*/
overflow: hidden;/*超出截取*/
position: relative;
border: 1px solid #000;
}
.banner{
width: 1200px;
height: 460px;
overflow: hidden;/*超出截取*/
position: relative;
border: 1px solid #ffo;
}
.banner-list{
width: 1200px;
height: 460px;
position: absolute;
background-repeat:no-repeat;
display: none;
border: 1px solid #0f0;
}
.slide1{
background-image:url(img/bg.jpg) ;/*这个属性必须写全 不然上个属性no-repeat无效*/
}
.slide2{
background-image:url(img/bg2.jpg) ;
}
.slide3{
background-image: url(img/bg3.jpg);
}
.show{
display: block;
}
.button{
position: absolute;
width: 40px;
height: 80px;
top:50%;
margin-top:-40px;
background:url(img/left.png)no-repeat center center;/*后面两个center设置水平、垂直都居中*/
left: 244px;
}
.button:hover{/*鼠标触碰箭头滑动效果*/
background-color: #e5e5e5;
opacity: 0.8;
filter:alpha(opactiy=80);/*为兼容各浏览器*/
}
.up{
left: auto;
right: 0;
}
.up{
transform: rotate(180deg);/*css3中转换图片方向代码*/
}
.point{
position: absolute;
right: 50px;
bottom: 24px;
text-align: right;
}
.point span{
display: inline-block;
width:12px;
height: 12px;
line-height: 12px;
border-radius: 50%;
background-color: rgba(7,17,27,0.4);
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
margin-left: 8px;
cursor: pointer;
}
.point span.action{
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
background: #fff;
}
/*左侧菜单 二级菜单*/
.menu-box{
width:244px;
height: 460px;
position: absolute;
left: 0;
top: 0;
background: rgb(253,245,230,0.5);
opacity: 0.5;
z-index: 1;
}
.menu-content{
width:244px;
height: 454px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
padding-top: 6px;
}
.menu-item{
height: 64px;
line-height: 66px;
font-size: 18px;
padding: 0 24px ;
position:relative;
}
.menu-item a:link,.menu-item a:visited{/*定义menu-item a下的link*/
color: #FFFFFF;
}
.menu-item a{
display: block;
border-bottom:1px solid rgb(255,255,255,0.2) ;
padding: 0 8px;
height: 63px;
text-decoration: none;/*去掉a标签下的横线*/
}
.menu-item i{
position: absolute;
right: 32px;
top: 8px;
/*font-style: normal;
font-weight: normal;*/
}
.menu-item i img{
width: 10px;
height: 20px;
}
.sub-menu{
width: 730px;
height: 458px;
background: #fff;
border: 1px solid #d9dde1;
position: absolute;
left: 244px;
top: 0px;
z-index: 999;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);/*设置阴影效果代码 分别代表：水平、垂直、阴影距离、抛光度、颜色*/
}
.inner-box{
width: 100%;
height: 100%;
background:url(img/fe.png)no-repeat center;
display: none;
}
.sub-inner-box{
width: 652px;
margin-left: 40px;
overflow: hidden;
}
.title{
color:#FF4500;
font-size: 16px;
line-height: 16px;
margin: 28px 0 30px 0;
font-weight: bold;
}
.bold {
font-weight: bold;
color: #000;
}
.mr10{
margin-right: 10px;
}
.mll10{
margin-left: 10px;
}
.sub-row a{
text-decoration: none;
color: #333;
}
.sub-row{
margin-bottom: 20px;
}
.hide{
display: none;
}
</style>/*html部分*/<!-- 首先设定整个轮播图的 大框main --> <div class="main" id="main"> <!-- 二级菜单 --> <div class="menu-box"></div> <!-- 子菜单 --> <div class="sub-menu hide" id="sub-menu"> <div class="inner-box"> <div class="sub-inner-box"> <div class="title"> 手机、配件 </div> <div class="sub-row"> <span class="bold mr10">手机通讯:</span> <a href="#">手机</a> <span class="mr10 mll10">/</span> <a href="#">手机维修</a> <span class="mr10 mll10">/</span> <a href="#">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件:</span> <a href="#">手机壳</a> <span class="mr10 mll10">/</span> <a href="#">手机储存卡</a> <span class="mr10 mll10">/</span> <a href="#">数据线</a> <span class="mr10 mll10">/</span> <a href="#">充电器</a> <span class="mr10 mll10">/</span> <a href="#">电池</a> </div> <div class="sub-row"> <span class="bold mr10">运营商:</span> <a href="#">中国联通</a> <span class="mr10 mll10">/</span> <a href="#">中国移动</a> <span class="mr10 mll10">/</span> <a href="#">中国电信</a> </div> <div class="sub-row"> <span class="bold mr10">智能设备:</span> <a href="#">智能手环</a> <span class="mr10 mll10">/</span> <a href="#">智能家居</a> <span class="mr10 mll10">/</span> <a href="#">智能手表</a> <span class="mr10 mll10">/</span> <a href="#">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娱乐:</span> <a href="#">耳机</a> <span class="mr10 mll10">/</span> <a href="#">音响</a> <span class="mr10 mll10">/</span> <a href="#">收音机</a> <span class="mr10 mll10">/</span> <a href="#">麦克风</a> </div> </div> </div> <!-- 电脑 --> <div class="inner-box"> <div class="sub-inner-box"> <div class="title"> 电脑 </div> <div class="sub-row"> <span class="bold mr10">手机通讯:</span> <a href="#">手机</a> <span class="mr10 mll10">/</span> <a href="#">手机维修</a> <span class="mr10 mll10">/</span> <a href="#">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件:</span> <a href="#">手机壳</a> <span class="mr10 mll10">/</span> <a href="#">手机储存卡</a> <span class="mr10 mll10">/</span> <a href="#">数据线</a> <span class="mr10 mll10">/</span> <a href="#">充电器</a> <span class="mr10 mll10">/</span> <a href="#">电池</a> </div> <div class="sub-row"> <span class="bold mr10">运营商:</span> <a href="#">中国联通</a> <span class="mr10 mll10">/</span> <a href="#">中国移动</a> <span class="mr10 mll10">/</span> <a href="#">中国电信</a> </div> <div class="sub-row"> <span class="bold mr10">智能设备:</span> <a href="#">智能手环</a> <span class="mr10 mll10">/</span> <a href="#">智能家居</a> <span class="mr10 mll10">/</span> <a href="#">智能手表</a> <span class="mr10 mll10">/</span> <a href="#">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娱乐:</span> <a href="#">耳机</a> <span class="mr10 mll10">/</span> <a href="#">音响</a> <span class="mr10 mll10">/</span> <a href="#">收音机</a> <span class="mr10 mll10">/</span> <a href="#">麦克风</a> </div> </div> </div> <!--家用电器--> <div class="inner-box"> <div class="sub-inner-box"> <div class="title"> 家用电器 </div> <div class="sub-row"> <span class="bold mr10">手机通讯:</span> <a href="#">手机</a> <span class="mr10 mll10">/</span> <a href="#">手机维修</a> <span class="mr10 mll10">/</span> <a href="#">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件:</span> <a href="#">手机壳</a> <span class="mr10 mll10">/</span> <a href="#">手机储存卡</a> <span class="mr10 mll10">/</span> <a href="#">数据线</a> <span class="mr10 mll10">/</span> <a href="#">充电器</a> <span class="mr10 mll10">/</span> <a href="#">电池</a> </div> <div class="sub-row"> <span class="bold mr10">运营商:</span> <a href="#">中国联通</a> <span class="mr10 mll10">/</span> <a href="#">中国移动</a> <span class="mr10 mll10">/</span> <a href="#">中国电信</a> </div> <div class="sub-row"> <span class="bold mr10">智能设备:</span> <a href="#">智能手环</a> <span class="mr10 mll10">/</span> <a href="#">智能家居</a> <span class="mr10 mll10">/</span> <a href="#">智能手表</a> <span class="mr10 mll10">/</span> <a href="#">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娱乐:</span> <a href="#">耳机</a> <span class="mr10 mll10">/</span> <a href="#">音响</a> <span class="mr10 mll10">/</span> <a href="#">收音机</a> <span class="mr10 mll10">/</span> <a href="#">麦克风</a> </div> </div> </div> <!--家具--> <div class="inner-box"> <div class="sub-inner-box"> <div class="title"> 家具 </div> <div class="sub-row"> <span class="bold mr10">手机通讯:</span> <a href="#">手机</a> <span class="mr10 mll10">/</span> <a href="#">手机维修</a> <span class="mr10 mll10">/</span> <a href="#">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件:</span> <a href="#">手机壳</a> <span class="mr10 mll10">/</span> <a href="#">手机储存卡</a> <span class="mr10 mll10">/</span> <a href="#">数据线</a> <span class="mr10 mll10">/</span> <a href="#">充电器</a> <span class="mr10 mll10">/</span> <a href="#">电池</a> </div> <div class="sub-row"> <span class="bold mr10">运营商:</span> <a href="#">中国联通</a> <span class="mr10 mll10">/</span> <a href="#">中国移动</a> <span class="mr10 mll10">/</span> <a href="#">中国电信</a> </div> <div class="sub-row"> <span class="bold mr10">智能设备:</span> <a href="#">智能手环</a> <span class="mr10 mll10">/</span> <a href="#">智能家居</a> <span class="mr10 mll10">/</span> <a href="#">智能手表</a> <span class="mr10 mll10">/</span> <a href="#">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娱乐:</span> <a href="#">耳机</a> <span class="mr10 mll10">/</span> <a href="#">音响</a> <span class="mr10 mll10">/</span> <a href="#">收音机</a> <span class="mr10 mll10">/</span> <a href="#">麦克风</a> </div> </div> </div> </div> <!--一级菜单/主菜单--> <div class="menu-content" id="menu-content"> <div class="menu-item"> <a href=""> <span>手机、配件</span> <i><img src="img/cm2_list_icn_arr.png"/></i> </a> </div> <div class="menu-item"> <a href=""> <span>电脑</span> <i><img src="img/cm2_list_icn_arr.png"/></i> </a> </div> <div class="menu-item"> <a href=""> <span>家用电器</span> <i><img src="img/cm2_list_icn_arr.png"/></i> </a> </div> <div class="menu-item"> <a href=""> <span>家具</span> <i><img src="img/cm2_list_icn_arr.png"/></i> </a> </div> </div> <!--设置轮播图的框架banner--> <div class="banner" id="banner"> <!--然后设置轮播图内的图片--> <a href=""> <div class="banner-list slide1 show"></div> </a> <a href=""> <div class="banner-list slide2"></div> </a> <a href=""> <div class="banner-list slide3"></div> </a> </div> <!--轮播图中的两个箭头--> <a href="javascript:void(0)" class="button up" id="prve"></a> <a href="javascript:void(0)" class="button down" id="brve"></a> <!--轮播图中的圆点--> <div class="point" id="dots"> <span class="action"></span> <span></span> <span></span> </div> </div>[/code]
/*js 实现代码*/
/*首先封装一个代替getElementById()的方法,,,省着每次都要手写document.getElementById()这么长的代码*/
function byid(id){
/*首先条件：检测Id类型和值都要等于字符串，如果是则执行代码1:document.getElementById(id)，否则执行代码2：id*/
return typeof(id) === "string"?document.getElementById(id):id;//三元操作符
/*return 弹出这个条件*/
}
var index = 0,//定义一个全局变量，记录索引
timer = null,//定时器
pics = byid("banner").getElementsByTagName("div"),//取id为banner下的div 得到数组
dots = byid("dots").getElementsByTagName("span"),
prve = byid("prve"),
brve = byid("brve"),
len = pics.length;//定义len得到数组pics的长度
subMenu = byid("sub-menu"),
innerBox = subMenu.getElementsByClassName("inner-box"),
menu = byid("menu-content"),
menuItem = menu.getElementsByClassName("menu-item");//渠道id为menu-content的菜单栏
/*接下来将所有操作定义在函数slideImg里*/
function slideImg(){
var main = byid("main");//获取id为main的dom元素
//鼠标滑过时清除定时器，离开继续
main.onmouseover = function(){//鼠标划过时触发
//如果timer为真时 清除定时器；
if(timer) clearInterval(timer);//clearInterval：清除定时器；
}
main.onmouseout = function(){//鼠标离开时触发
timer = setInterval(function(){//每隔3秒调用一次里面的脚本
index++;//每隔3秒索引+1
if(index >= len){//判断如果索引值大于等于数组长度，就强制让它返回索引为0的图片
index = 0;
}
//切换图片
charImg();
},3000);//间歇调用
}
//调用onmouseout方法，自动在main上触发鼠标离开的事件。
main.onmouseout();//进行自动轮播，无需触碰
//遍历所有点击，且绑定点击事件，点击圆点切换图片
for(var d = 0; d<len ; d++){
/*给所有span添加一个id的属性，值为d，作为当前span的索引*/
dots[d].id = d;
dots[d].onclick = function(){//function()函数能够改变作用域
//改变Index为当前span的Id值
index = this.id;
this.className = "active";//this 指向对象 相当于span
//调用charImg，实现图片的切换
charImg();
}
}
//上一张按钮
brve.onclick=function(){
index++;
if(index >= len) index=0;
charImg();
}
//下一张
prve.onclick=function(){
index--;
if(index < 0) index = len-1;
charImg();
}
//导航菜单
//遍历主菜单拿到每一个元素，并绑定事件
for(var m = 0; m < menuItem.length; m++){
//给每一个menu-item定义data-index属性,作为索引
menuItem[m].setAttribute("data-index",m);
menuItem[m].onmouseover = function(){
var idx = this.getAttribute("data-index");
//遍历所有子菜单，将每一个都隐藏
for(var j=0;j<innerBox.length;j++){
innerBox[j].style.display = 'none';
menuItem[j].style.background = 'none';
}
console.log(idx);
subMenu.className = 'sub-menu';
innerBox[idx].style.display = 'block';
menuItem[idx].style.background = 'tgba(0,0,0,0.1)';
}
}
menu.onmouseout = function(){
subMenu.className = "sub-inner hide";
}
subMenu.onmouseover = function(){
this.className = "sub-menu";
}
subMenu.onmouseout = function(){
this.className = "sub-menu hide"
}
}
//切换图片
function charImg(){
//遍历banner下的所有的div,将其隐藏
for(var i = 0;i<len;i++){//遍历所有banner下的div以及dots下的span,并把每个div都隐藏，并将span类清除。
pics[i].style.display = "none";
dots[i].className = "";
}
//根据index索引找到当前div和span，将其显示出来并设为当前。
pics[index].style.display='block';
dots[index].className = "action";
};
slideImg();//调用slideImg()方法
</script>
<!--
封装函数方法 是为了 重复使用
--><!--最终效果图-->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html+css+js实现原生轮播特效
- 使用html+js+css 实现页面轮播图效果(实例讲解)
- 用原生js+HTML+CSS实现一个弹幕的效果
- html+css+js简单实现图片轮播效果
- HTML+CSS+JS实现轮播效果
- 原生js和css实现图片轮播效果
- 纯css,js原生，js原型，jquery四种方式实现轮播图效果
- JS+HTML+CSS实现轮播效果
- 3、js原生实现移动端手指滑动轮播图效果(3)
- 原生JS改变透明度实现轮播效果
- HTML+CSS+jquery 实现环形比例图效果 AngularJS+css实现环形比例图效果
- 原生js实现网易轮播图效果
- HTML+CSS+JS实现banner横幅自动切换效果
- 原生JS实现仿淘宝网左侧商品分类菜单效果代码
- JS+CSS实现经典的左侧竖向滑动菜单效果
- js/html/css做一个简单的图片自动（auto）轮播效果//带注释
- 原生JS实现CSS动画效果
- 原生JS实现图片轮播切换效果
- css和js实现最简单的轮播图效果
- 原生js实现无限循环轮播图效果