js实现淘宝首页的banner栏效果


Posted in Javascript onNovember 26, 2019

本文实例为大家分享了js淘宝首页banner栏展示的具体代码,供大家参考,具体内容如下

<div class="bg clearfix">
 <div class="title">
 <a class="on" href="javascript:" >最热团购</a>
 <a href="javascript:" >商城特惠</a>
 <a href="javascript:" >名品推荐</a>
 <a href="javascript:" >缤纷活动</a>
 </div>
 <ul>
 <li class="active">
 <img class="active" src="img/1.jpg" alt="">
 <img src="img/2.jpg" alt="">
 <img src="img/3.jpg" alt="">
 <img src="img/4.jpg" alt="">
 <h3>
 <a class="hov" href="javascript:" >优惠1</a>
 <a href="javascript:" >优惠2</a>
 <a href="javascript:" >优惠3</a>
 <a href="javascript:" >优惠4</a>
 </h3>
 </li>
 <li >
 <img class="active" src="img/2.jpg" alt="">
 <img src="img/3.jpg" alt="">
 <img src="img/4.jpg" alt="">
 <img src="img/5.jpg" alt="">
 <h3>
 <a class="hov" href="javascript:" >优惠1</a>
 <a href="javascript:" >优惠2</a>
 <a href="javascript:" >优惠3</a>
 <a href="javascript:" >优惠4</a>
 </h3>
 </li>
 <li>
 <img class="active" src="img/3.jpg" alt="">
 <img src="img/4.jpg" alt="">
 <img src="img/5.jpg" alt="">
 <img src="img/6.jpg" alt="">
 <h3>
 <a class="hov" href="javascript:" >优惠1</a>
 <a href="javascript:" >优惠2</a>
 <a href="javascript:" >优惠3</a>
 <a href="javascript:" >优惠4</a>
 </h3>
 </li>
 <li >
 <img class="active" src="img/6.jpg" alt="">
 <img src="img/5.jpg" alt="">
 <img src="img/4.jpg" alt="">
 <h3>
 <a class="hov" href="javascript:" >优惠1</a>
 <a href="javascript:" >优惠2</a>
 <a href="javascript:" >优惠3</a>
 </h3>
 </li>
 </ul>
</div>

CSS:

@charset "UTF-8";
body{
 font-size: 12px;
 font-family: "宋体";
}
.clearfix:after { content: "."; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; }
.clearfix{zoom: 1;}
*{
 padding: 0;
 margin: 0;
}
img{
 vertical-align: text-top;
}
ul li{
 list-style: none;
}
a{
 text-underline: none;
 text-decoration: none;
 color: #fff;
 font-weight: bold;
}
.bg{
 width: 850px;
 margin: 0 auto;
 height: 291px;
 border: 1px solid #f2f2f2;
 background: #fff;
}
.title{
 display: flex;
 flex-direction: column;
 width: 100px;
 height: 100%;
 float: left;
}
.title>a{
 width: 100%;
 display: flex;
 flex: auto;
 justify-content: center;
 align-items: center;
 background: #ccc;
 color: #000;
 font-size: 16px;
 border-bottom: 1px solid #fff;
 text-align: center;
}
.title>a:last-of-type{
 border-bottom:none ;
}
ul{
 float: left;
}
ul li{
 position: relative;
 display: none;
}
ul>li>img{
 display: none;
}
ul .active{
 display: block;
}
ul>li>h3{
 position: absolute;
 width: 100%;
 bottom: 0;
 left: 0;
 display: flex;
 
}
ul>li>h3>a{
 flex: auto;
 padding: 10px 0;
 justify-content: center;
 align-items: center;
 text-align: center;
 border-right: 1px solid #fff;
 background: cornflowerblue;
}
ul>li>h3>a:last-of-type{
 border-right: none;
}
.title .on{
 background: #fff;
}
li>h3 .hov{
 background: brown;
}

js:

<script>
 window.οnlοad=function () {
 var oLeft=document.getElementsByClassName("title")[0];
 var oLefta=oLeft.getElementsByTagName("a");
 var oUl=document.getElementsByTagName("ul")[0];
 var oLi=oUl.getElementsByTagName("li");
 for(var i=0;i<oLefta.length;i++){
 oLefta[i].index=i;
 e(oLi[i]);
 oLefta[i].οnclick=function () {
 var That=this;
 for(var j=0;j<oLefta.length;j++){
 oLefta[j].className='';
 oLi[j].className='';
 }
 oLefta[That.index].className="on";
 oLi[That.index].className="active";
 }
 }
 function e(Li) {
 var oLia=Li.getElementsByTagName('a');
 var oImg=Li.getElementsByTagName("img");
 for(var k=0;k<oLia.length;k++){
 oLia[k].index=k;
 oLia[k].οnclick=function () {
 for(var z=0;z<oImg.length;z++){
 oImg[z].className='';
 oLia[z].className='';
 }
 oImg[this.index].className='active';
 oLia[this.index].className='hov';
 }
 
 }
 
 
 }
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件之easing 动态菜单
Aug 21 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
vue多个元素的样式选择器问题
Nov 29 Javascript
JS实现打字游戏
Dec 17 Javascript
three.js显示中文字体与tween应用详析
Jan 04 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 #Javascript
vue实现pdf文档在线预览功能
Nov 26 #Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 #Javascript
使用Vue生成动态表单
Nov 26 #Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 #Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 #Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 #Javascript
You might like
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
JavaScript 指导方针
2007/04/05 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python检测QQ在线状态的方法
2015/05/09 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
pytorch进行上采样的种类实例
2020/02/18 Python
增大python字体的方法步骤
2020/07/05 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
高二英语教学反思
2014/01/19 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
对教师的评语
2014/04/28 职场文书
运动会加油口号
2014/06/07 职场文书
大学迎新标语
2014/06/26 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
初中政治教学反思
2016/02/23 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL