原生JS幻灯片案例——与tab栏切换类似

幻灯片案例

样式：

1. 这个问题是因为img是xxx元素，display：block 就没问题了

2. 主图也是写好6个盒子，展示的显示，剩余的隐藏。通过添加删除类名来呈现

3. 类名修改的方法可有两种

① 要自己手动添加空格隔开

e.className = ‘要保留的类名’
e.className += ’ 添加的类名’

② classList

增： e.classList.add(‘类名’)
删：e.classList.remove(‘类名’)

4. 要注意闭包问题

5. 巧用立即执行函数 ▲

6. 知道侧边小图的高度80和图片尺寸，计算剩余的宽高

. 完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;}ul{padding: 0;margin: 0;list-style: none;}a{text-decoration: none;}.wrapper{position: relative;width:996px;height: 480px;margin: 50px auto;border: 1px solid #000000;/* box-sizing: border-box; */}img{width: 100%;height: 100%;display: block;}.wrapper .main{float: left;/* position: relative; */width: 853px;height: 480px;overflow: hidden;}.wrapper .main .main-item{display: none;}.wrapper .main .main-item.active{display: block;}.wrapper .side{position: absolute;top: 0;right: 0;float: left;width: 142px;height: 480px;}.wrapper .side li{opacity: .5;}.wrapper .side li.cur{opacity: 1;}</style>
</head>
<body><div class="wrapper"><div class="main"><ul><li class="main-item active"><a href="javascrpit::"><img src="img/1.jpg" alt=""></a></li><li class="main-item"><a href="javascrpit::"><img src="img/2.jpg" alt=""></a></li><li class="main-item"><a href="javascrpit::"><img src="img/3.jpg" alt=""></a></li><li class="main-item"><a href="javascrpit::"><img src="img/4.jpg" alt=""></a></li><li class="main-item"><a href="javascrpit::"><img src="img/5.jpg" alt=""></a></li><li class="main-item"><a href="javascrpit::"><img src="img/6.jpg" alt=""></a></li></ul></div><div class="side"><ul><li class="item cur"><img src="img/1.jpg" alt=""></li><li class="item"><img src="img/2.jpg" alt=""></li><li class="item"><img src="img/3.jpg" alt=""></li><li class="item"><img src="img/4.jpg" alt=""></li><li class="item"><img src="img/5.jpg" alt=""></li><li class="item"><img src="img/6.jpg" alt=""></li></ul></div></div><script>var lis = document.getElementsByClassName('item');var mainItem = document.getElementsByClassName('main-item');console.log(mainItem);console.log(lis);for(var i = 0; i < lis.length; i++){(function(k){lis[k].onclick = function(){for(var j = 0; j < lis.length; j++){lis[j].className = 'item';mainItem[j].className = 'main-item';}this.className += ' cur';  // 有个空格哦mainItem[k].className += ' active';}})(i)}</script>
</body>
</html>

封装成插件：

插件标配：

立即执行函数
构造函数属性写在构造函数里，方法写在构造函数的原型上，最后，把构造函数挂载在全局

        ;(function(opt){var Slider = function(opt){//获取侧边栏的每个元素 （这样写以后类似的内容就只要把你的类名放进去就可以了）this.lis = document.getElementsByClassName(opt.sliderItem);//获取主图元素this.mainItem = document.getElementsByClassName(opt.mainItem);// !首先这个是我没有想到的// 执行函数，事件就绑定完成了            this.bindClick();}Slider.prototype = {//绑定点击事件bindClick:function(){var lis = this.lis,mainItem = this.mainItem;// 给每个li元素绑定点击事件，存在闭包问题 所以使用立即执行函数的方法for(var i=0; i<lis.length; i++){(function(j){lis[j].onclick = function(){console.log('1');//干掉所有人for(var k=0; k<lis.length; k++){lis[k].className = 'item';mainItem[k].className = 'main-item';}//留下我自己this.className += ' cur';mainItem[j].className += ' active';}})(i);}}}window.Slider = Slider;})();

在原型上写的方法是可以在构造函数上调用的！

原生JS幻灯片案例——与tab栏切换类似相关推荐

案例：tab 栏切换（重点案例）
案例:tab 栏切换(重点案例) 业务需求: 当鼠标点击上面相应的选项卡(tab),下面内容跟随变化. 案例分析: (1)Tab 栏切换有2个大的模块. (2)上面的模块选项卡,点击某一个,当前这一个 ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
tab栏切换动画的相关方法上动画的相关方法下隐藏动画案例隐藏动画练习
tab栏切换 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
JavaScript基础 - 经典案例3 - tab栏选项卡切换
通常我们用 js 写 tab 栏切换功能会用到排他思想,即干掉其他人,留下我自己但也可以用一个更有效率的方法:找出那个特殊的人,精准干掉他,放过其他无辜的人,然后留下我自己实现过程:假设需要切换 ...
WebAPI(part7)--Tab栏切换案例
学习笔记,仅供参考,有错必究 Web API Tab栏切换案例代码 <!DOCTYPE html> <html lang="en"><head> ...
DOM（二）：几个NB案例、属性操作（自定义属性）、tab栏切换（重难点）
这里写目录标题一.几个案例: 案例1:如何实现点击一个按钮亮,其余按钮全灭? 案例2:浏览器换肤效果案例3:表格隔行变色案例4:全选框和复选框(难的一塌糊涂) 我自己的逻辑: 老师操作小弟的逻辑 ...
前端——tab 栏切换案例
案例当鼠标点击上面相应的选项卡(tab),下面内容跟随变化分析 Tab栏切换有2个大的模块上面的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式下面的模块内 ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...

原生JS幻灯片案例——与tab栏切换类似

幻灯片案例

原生JS幻灯片案例——与tab栏切换类似相关推荐

最新文章

热门文章