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 相关文章推荐
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
详解如何理解vue的key属性
2019/04/14 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
实例讲解React 组件
2020/07/07 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
爱普生美国官网:Epson美国
2018/11/05 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
英语道歉信范文
2014/01/09 职场文书
银行简历自我评价
2014/02/11 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
企业安全标语
2014/06/07 职场文书
保护地球的标语
2014/06/17 职场文书
德生2P3收音机开箱评测
2022/04/30 无线电