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 遮罩层实现(mask)实现代码
Jan 09 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
js倒计时显示实例
Dec 11 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
js制作提示框插件
Dec 24 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 str_pad 函数使用详解
2009/01/13 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
Smarty模板配置实例简析
2019/07/20 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
jQuery知识点整理
2015/01/30 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python Flask基础教程示例代码
2018/02/07 Python
python字符串循环左移
2019/03/08 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
美国轮胎网站:Priority Tire
2018/11/28 全球购物
初一生物教学反思
2014/01/18 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
人力资源求职信
2014/05/25 职场文书
励志演讲稿800字
2014/08/21 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
单位计划生育责任书
2015/05/09 职场文书
Java基础-封装和继承
2021/07/02 Java/Android