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

最新推荐文章于 2020-12-30 01:35:20 发布

是行是行啊

最新推荐文章于 2020-12-30 01:35:20 发布

阅读量163

点赞数

分类专栏：原生JS学习案例

本文链接：https://blog.csdn.net/weixin_45655555/article/details/108791200

版权

原生JS学习案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

幻灯片案例

样式：
在这里插入图片描述

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;
        })();

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

是行是行啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS幻灯片案例——与tab栏切换类似

幻灯片案例样式：1. 这个问题是因为img是xxx元素，display：block 就没问题了2. 主图也是写好6个盒子，展示的显示，剩余的隐藏。通过添加删除类名来呈现3. 类名修改的方法可有两种① 要自己手动添加空格隔开e.className = ‘要保留的类名’e.className += ’ 添加的类名’② classList增： e.classList.add(‘类名’)删：e.classList.remove(‘类名’)4. 要注意闭包问题5. 巧用立即执行
复制链接

扫一扫