原生JS实现7中简单效果

1. 轮播图

1. 描述:
   • 每隔固定事件会自动换图
   • 点击向左键或者向右键后转到相应的图片上
   • 点击下面原点会转到相应图片
2. 效果图:

1. 代码:

   1. HTML

   <div id="box">
           <ul class="list">
               <li><img src="./img/1.jpg" alt=""></li>
               <li><img src="./img/2.jpg" alt=""></li>
               <li><img src="./img/3.jpg" alt=""></li>
               <li><img src="./img/4.jpg" alt=""></li>
               <li><img src="./img/5.jpg" alt=""></li>
           </ul>
           <span class="left"><</span>
           <span class="right">></span>
   
           <ul class="iconList">
               <li class="current"></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
           </ul>
       </div>
   

   2. CSS

   *{
               margin:0;
               padding: 0;
           }
           li{
               list-style: none;
           }
           img{
               display: block;
               width: 100%;
               height: 100%;
           }
           #box{
               width: 2452px;
               height: 920px;
               position: relative;
               margin: 50px auto;
               overflow: hidden;
               cursor: pointer;
           }
           #box span{
               width: 100px;
               height: 150px;
               position: absolute;
               top: 40%;
               font-size: 100px;
               text-align: center;
               background-color: aqua;
           }
           #box .left{
               left: 0;
           }
           #box .right{
               right: 0;
           }
           #box .iconList{
               position: absolute;
               left:40%;
               transform: translateY(-50%);
               bottom: 1px;
               overflow: hidden;
           }
           .iconList li {
               width: 80px;
               height: 80px;
               border-radius: 50%;
               margin-right:10px ;
               float: left;
               background-color: aliceblue;
           }
   
           .iconList li.current{
               background-color: cornflowerblue;
           }
   

   3. Javascript

   var box = document.querySelector("#box");
           var span = document.querySelectorAll("span");
           //鼠标移入
           box.onmouseenter = function(){
               for(var i=0;i<span.length;i++){
                   span[i].style.opacity = 1;
               }
           }
           //鼠标移出
           box.onmouseleave = function(){
               for(var i=0;i<span.length;i++){
                   span[i].style.opacity = 0;
               }
           }
           //点击点，图片一起变动 iconList
           var img = document.querySelectorAll(".list>li");
           var btn = document.querySelectorAll(".iconList>li");
           var ind = 0; //保持同步的索引
           var sign = null;
           //定时器在一个函数当中
           function setInt(ind){
               sign =  setInterval(function(){
                   //排他
                   for(var j=0;j<btn.length;j++){
                       btn[j].style.backgroundColor="aliceblue";
                       img[j].style.display = "none";
                   }
                   //设置一个位置
                   btn[ind].style.backgroundColor = "cornflowerblue";
                   img[ind].style.display = "block";
                   ind<btn.length-1 ? ind++ : ind = 0;
               },2000);
           }
           //需要一个定时器
           window.onload = function(){
               setInt(ind);
               //3秒转动一次 //
               /*加入定时器执行到1500毫秒的时候,
               我任意点击了一张图片，那么图片默认还剩下500毫秒的预览时间
               */
           }
   
           //循环绑定事件
           for(var i=0;i<btn.length;i++){
               btn[i].index = i; //给li标签绑定一个index属性
               btn[i].onclick = function(){ 
                   clearInterval(sign);
                   //使用排他思想
                   //图片联动 : 点的数量和图片的数量时一致的
                   //那么索引是相同
                   for(var j=0;j<btn.length;j++){
                       btn[j].style.backgroundColor="aliceblue";
                       img[j].style.display = "none";
                   }
                   this.style.backgroundColor = "cornflowerblue";
                   img[this.index].style.display = "block";
                   ind = this.index;
                   setInt(ind)
               }
           }
           var left = document.querySelector(".left");
           var right = document.querySelector(".right");
           left.onclick = function(){
               clearInterval(sign);
               //索引位置一起变
               ind>0 ? ind-- : ind = btn.length-1;
               //排他
               for(var j=0;j<btn.length;j++){
                   btn[j].style.backgroundColor="aliceblue";
                   img[j].style.display = "none";
               }
               //设置一个位置
               btn[ind].style.backgroundColor = "cornflowerblue";
               img[ind].style.display = "block";
               setInt(ind);
           }
           right.onclick = function(){
               clearInterval(sign);
               ind<btn.length-1 ? ind++ : ind = 0;
               for(var j=0;j<btn.length;j++){
                   btn[j].style.backgroundColor="aliceblue";
                   img[j].style.display = "none";
               }
               //设置一个位置
               btn[ind].style.backgroundColor = "cornflowerblue";
               img[ind].style.display = "block";
               setInt(ind);
           }
   

2. 翻牌

1. 描述:
   • 一个div,当鼠标移入时反转,移出时反转回来
2. 效果: