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真的不难-回顾一下基础知识
Jan 15 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
js获取ip和地区
Mar 10 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
webpack多入口文件页面打包配置详解
Jan 09 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
JS面向对象之多选框实现
Jan 17 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 各种应用乱码问题的解决方法
2010/05/09 PHP
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
linux下python抓屏实现方法
2015/05/22 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
高中生自我评语大全
2014/01/19 职场文书
教师党性分析材料
2014/02/04 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
药店促销活动总结
2014/07/10 职场文书
法律意见书范文
2015/05/20 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android