原生js做一个简单的仿幻灯片放映_js实现类似ppt播放的展示效果-CSDN博客

本文链接：https://blog.csdn.net/weixin_44164982/article/details/107780061

效果：

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/slider.css">
</head>
<body>
    <div class="slider-wrapper">
        <div class="slider">
            <ul class="slider-list">
                <li class="slider-item active">
                    <a href="">
                        <img src="images/1.jpg" alt=""/>
                    </a>
                </li>
                <li class="slider-item">
                    <a href="">
                        <img src="images/2.jpg" alt=""/>
                    </a>
                </li>
                <li class="slider-item">
                    <a href="">
                        <img src="images/3.jpg" alt=""/>
                    </a>
                </li>
                <li class="slider-item">
                    <a href="">
                        <img src="images/4.jpg" alt=""/>
                    </a>
                </li>
                <li class="slider-item">
                    <a href="">
                        <img src="images/5.jpg" alt=""/>
                    </a>
                </li>
                <li class="slider-item">
                    <a href="">
                        <img src="images/6.jpg" alt=""/>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 缩略图 -->
      
        <div class="thumbs">
                <ul class="thumbs-list">
                    <li class="thumbs-item cur">  
                           <!-- 协议限定符，阻止a跳转 -->
                        <a href="javascript:void(false)">
                            <img src="images/1.jpg" alt=""/>
                        </a>
                    </li>
                    <li class="thumbs-item">  
                        <a href="javascript:void(false)">
                            <img src="images/2.jpg" alt=""/>
                        </a>
                    </li>
                    <li class="thumbs-item">  
                        <a href="javascript:void(false)">
                            <img src="images/3.jpg" alt=""/>
                        </a>
                    </li>
                    <li class="thumbs-item">  
                        <a href="javascript:void(false)">
                            <img src="images/4.jpg" alt=""/>
                        </a>
                    </li>
                    <li class="thumbs-item">  
                        <a href="javascript:void(false)">
                            <img src="images/5.jpg" alt=""/>
                        </a>
                    </li>
                   <li class="thumbs-item">  
                        <a href="javascript:void(false)">
                            <img src="images/6.jpg" alt=""/>
                        </a>
                    </li>
                </ul>
        </div>
    </div>
    <script type="text/javascript" src="js/slider.js"></script>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
a{
    text-decoration: none;
}
/* 图片宽高继承父级盒子 */
img{
    width: 100%;
    height:100%;
}
.slider-wrapper{
    width: 996px;
    height: 480px;
    margin: 50px auto;
    border:1px #000;
}
.slider{
    position: relative;
    float: left;
    width: 840px;
    height: 480px;
}
.slider .slider-item{
    display: none;
    position: absolute;
    top:0;
    left:0;
    height: 480px;
}
.slider .slider-item.active{
    display: block;
}
.thumbs{
    float: left;
    width: 142px;
    height: 480px;
    border: 1px solid #ddd;
}
.thumbs-item{
    box-sizing: content-box;
    margin: 1px;
    height: 79px;
    opacity: .5;
}
.thumbs-item.cur{
    opacity: 1;
}

var sliderItem=document.getElementsByClassName("slider-item");
var thumbsItem=document.getElementsByClassName("thumbs-item");
for(var i=0;i<thumbsItem.length;i++){
    (function(k){
        thumbsItem[i].onclick=function(){
            for(j=0;j<thumbsItem.length;j++){
                thumbsItem[j].className="thumbs-item";
                sliderItem[j].className="slider-item";
            }
            this.className+=" cur";
            sliderItem[k].className+=" active";//用到i会出现闭包，用立即执行函数解决。因为外面的i不会被保存，i永远都是循环执行后的值
        }
    })(i)//通过立即执行函数把循环到的i保存起来
  
}

案例中闭包小问题：

function test(){
    var arr=[];
    for(var i=0;i<10;i++){
        arr[i]=function(){//funcition并没有执行，只是i++
            console.log(i);
        }
    }
    return arr;

var myArr=test();
console.log(myArr);//形成闭包，把里面的arr传到了外面 [ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ]
for(var j=0;j<myArr.length;j++){
   myArr[j]();//循环执行，打印10个10
}


---------------------------------------------------------------------------
/*    解决在for循环中， 改用立即执行函数，保存i
     for(var i=0;i<10;i++){
        (function(j){
           arr[j]=function(){//funcition并没有执行，只是i++
                   console.log(j);//0 1 2 3....9
             }
        })(i)
    }
   return arr;
} */
---------------------------------------------------------------------------

看了上面例子我们就能理解幻灯片例子中的立即函数写法了

var sliderItem=document.getElementsByClassName("slider-item");
var thumbsItem=document.getElementsByClassName("thumbs-item");
for(var i=0;i<thumbsItem.length;i++){
    (function(k){
        thumbsItem[i].onclick=function(){
            for(j=0;j<thumbsItem.length;j++){
                thumbsItem[j].className="thumbs-item";
                sliderItem[j].className="slider-item";
            }
            this.className+=" cur";
            sliderItem[k].className+=" active";//用到i会出现闭包，用立即执行函数解决。因为外面的i不会被保存，i永远都是循环执行后的值
        }
    })(i)//通过立即执行函数把循环到的i保存起来,k是形参
  
}