用js写图片轮播效果

雨点打透心脏的1/2处 2022-02-24 11:55 283阅读 0赞

用js写图片轮播效果  
轮播效果有两种，位移轮播（位移又分为上下和左右）和渐变轮播。两种轮播的HTML是一样的结构，只是css和js有一点点区别。  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0_size_16_color_FFFFFF_t_70]  
1、先分析页面结构（两种轮播方式都可以用着一个结构）  
（1）由两部分组成，一个是轮播所用的图片，另一个是图片右下方的小圆点。  
（2）用什么标签，层级结构是什么？当然这个界面比较简单先用一个大的div将图片和圆点都装起来，在用一个ul将图片装起来，圆点用span标签。  
这样结构就写好了，再将图片放进去。（当然也可以用其他结构）

<div class="big">
        
            <ul class="pic" id="pic">
                <li><img src="images/1.jpg" alt=""></li>
                <li><img src="images/2.jpg" alt=""></li>
                <li><img src="images/3.jpg" alt=""></li>
                <li><img src="images/4.jpg" alt=""></li>
            </ul>
        
    
    
        
        <div class="dian" id="dian">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        
    </div>

2、结构搭建好了，接下来就是样式了。（左右、上下轮播）  
（1）连接样式表  
![在这里插入图片描述][20190403233002280.png]  
（2）然后写公共样式

/*公共样式*/
    *{margin:0 auto; padding:0;}
    ul,li,ol{ list-style: none;}
    img{border: none;}
    /*公共样式*/

（3）写图片的样式，因为用的li标签，li是块级元素，让li标签左浮动，超出的部分隐藏。在设置一下宽高。

/*图片样式*/
    .big{ width: 500px; height: 500px; overflow: hidden;position: relative; }
    .pic{ width: 3000px;transition:all 0.5s;}
    .pic>li{ float: left; width: 500px; height: 500px; overflow: hidden;}
    /*图片样式 end*/

（4）点的样式

/*点的样式*/
    .dian{height: 20px; right:20px; bottom:20px; position: absolute;}
    .dian span{ display: inline-block; width: 20px; height: 20px; background: #666; border-radius: 20px; margin-right: 10px; cursor: pointer;}
    .dian .on{background: #ff0;}
    /*点的样式 end*/

3、接下来就是js的部分了。其实样式设置好了，js做的很简单，就是通过元素的id获取元素，不断地改变图片元素的位置。并给圆点添加点击的样式。（左右、上下轮播）

{
        /*
      * findSiblings : 找所有的兄弟节点
      * 参数：tag  目标。找目标的所有的兄弟节点
      * 举例：let  xd = findSiblings("xID");
      *       找指定标签的所有兄弟，返回一个数组
      * */
        let findSiblings = function( tag ){
            let parent = tag.parentNode;
            let  childs = parent.children;
            let Sibling = [];  // 用来存储找到的兄弟们。
            for( let i = 0 ; i <= childs.length-1; i++){
                if( childs[i] !== tag ){
                    Sibling[ Sibling.length ] = childs[i];
                }
            }
            return Sibling;
        };
    
        let d = document.getElementById('dian');
        let p = document.getElementById('pic');
        let lis = d.children;
        for(let i = 0;i < lis.length;i++){
            lis[i].addEventListener('click',function () {//添加点击监听事件
                console.info(i);
                //p.style.marginLeft = "-"+ 1200*i +"px";//左右轮播
                p.style.marginTop = "-"+ 500 * i +"px";//上下轮播
                lis[i].className = 'on';
                let liSibing = findSiblings(this);
                for (let j = 0 ;j<liSibing.length;j++){
                    liSibing[j].className = "";
                }
            });
    
        }
    }

4、渐变轮播的css样式

/*公共样式*/
    *{margin:0 auto; padding:0;}
    ul,li,ol{ list-style: none;}
    img{border: none;}
    /*公共样式*/
    
    /*图片样式*/
    .big{ width: 1200px;height: 500px;position: relative; }
    .pic{ transition:all 0.5s;}
    .pic>li{width: 1200px; height: 500px; display: none;overflow: hidden; /* 内容超出隐藏 */position: absolute;  /*绝对定位，相互覆盖*/}
    .pic > .showLi{display: block; animation: myAni  1s  both;}
    @keyframes  myAni { 0%{opacity: 0;} 100%{opacity: 1;} }
    /*图片样式 end*/
    
    /*图标样式*/
    .dian{height: 81px; right:38px; bottom:20px; position: absolute;}
    .dian div{width: 81px; height: 81px;float: left; margin-right: 20px; cursor: pointer; border: 5px solid transparent;}
    .dian .on{border: #fff solid 5px; border-radius: 5px;}
    /*图标样式 end*/
    
    5、渐变轮播的js样式

//实现图片自动播放  
function toright() \{  
//已经是最后一张图（与第一张相同） 应下一次显示第二张  
if(Index === lis.length)\{  
picUl.style.left = “0px”;  
Index = 0;  
\}  
picUl.style.marginLeft = “-”+ 1200 \* Index +“px”;  
span\[Index\].className = “on”;  
let xd = findSiblings( span\[Index\] );  
for(let j = 0 ; j <=xd.length-1 ; j++)\{  
xd\[j\].className = “”;  
\}  
Index++;  
[console.info][](Index);  
\}

let setAuto;
    function auto(){
        setAuto = setInterval(function () {
        toright();
    },1000);}
    auto();
    picUl.addEventListener('mouseenter',function () {
        clearInterval(setAuto);
    });
    picUl.addEventListener('mouseleave',function () {
        auto();
    });
    }

6、这样就完成了两种轮播方式，但是不足的是还不能让图片自动播放，等待后续学习后，在实现。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0_size_16_color_FFFFFF_t_70]: /images/20220224/02717014d37d42c7a58adf484edfcf55.png
[20190403233002280.png]: /images/20220224/9e2e89269e2649adb78e27bb1537c0c2.png
[console.info]: http://console.info