js简单实现精美轮播图效果

最新推荐文章于 2022-08-29 17:05:32 发布

小白6402

最新推荐文章于 2022-08-29 17:05:32 发布

阅读量943

点赞数 2

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/nihaio25/article/details/120224133

版权

精美轮播效果

效果图展示：

在这里插入图片描述

是不是觉得还是挺好看的。

1.首先建一个文档简单的html文档

2.引入下面的style样式

  body{
            background-color: rgb(119,115, 110);
        }
        ul{
            width: 800px;
            height: 200px;
            position:absolute;
            padding: 0px;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin: auto;
            list-style: none;
        }
        ul:hover{
            cursor: pointer;
        }
        li{
            position: absolute;
            left: 0;
            transition: 0.4s;
        }

2.粘贴下面的代码到script里面

 window.onload=function(){
        var cur_ul=document.getElementById('banner');
        var arr=new Array();
        var timer=setInterval(get_next,3000);

        for(var i=1;i<=5;i++){
            var cur_li=document.createElement("li");
            var cur_img=document.createElement('img');
            cur_img.src='img/'+ i +'.jpg';
            cur_img.style.width='400px';
            cur_img.style.height='200px';
            cur_li.appendChild(cur_img);
            cur_ul.appendChild(cur_li);
            cur_ul.onmouseenter=function(){
                  clearInterval(timer);
            }
            cur_ul.onmouseleave=function(){
            timer=setInterval(get_next,3000);
           }
           arr.push(cur_li);

        }
        var len=arr.length-1;
        arr[len-2].style.left='0px';
        arr[len-1].style.left='200px';
        arr[len].style.left='400px';
        arr[len-1].style.zIndex=100;
        arr[len-1].style.transform='scale(1.3)';
        function get_next(){
               var give_up=arr[arr.length-1];
               arr.pop();
               arr.unshift(give_up);
               for(var i=0;i<arr.length;i++){
                   arr[i].style.zIndex=i;
                   arr[i].style.transform='scale(1)';
               }
                arr[len-2].style.left='0px';
                arr[len-1].style.left='200px';
                arr[len].style.left='400px';
                arr[len-1].style.zIndex=100;
                arr[len-1].style.transform='scale(1.3)';
        }
        function  get_pre(){
               var give_up=arr[0];
               arr.shift();
               arr.push(give_up);
               for(var i=0;i<arr.length;i++){
                   arr[i].style.zIndex=i;
                   arr[i].style.transform='scale(1)';
               }
                arr[len-2].style.left='0px';
                arr[len-1].style.left='200px';
                arr[len].style.left='400px';
                arr[len-1].style.zIndex=100;
                arr[len-1].style.transform='scale(1.3)';
        }
        //生成左箭头
        var pre_img=document.createElement('img');
        pre_img.src='img/preImg.png';
        pre_img.style.position='absolute';
        pre_img.style.top=0;
        pre_img.style.bottom=0;
        pre_img.style.left=0;
        pre_img.style.margin='auto';
        pre_img.style.zIndex=100;
        cur_ul.appendChild(pre_img);

        var nex_img=document.createElement('img');
        nex_img.src='img/nexImg.png';
        nex_img.style.position='absolute';
        nex_img.style.top=0;
        nex_img.style.bottom=0;
        nex_img.style.right=0;
        nex_img.style.margin='auto';
        nex_img.style.zIndex=100;
        cur_ul.appendChild(nex_img);
        
        //左箭头
        pre_img.onclick=function(){
            get_pre()
        }
        //右箭头
        nex_img.onclick=function(){
                get_next()
            }

    }