分享两款炫酷的JS轮播图源码

几天前逛别人网站的时候发现了几款不错的轮播图，一不小心就给人家扒下来了

第一款(多款3DJS特效随机播放)：

效果展示：

演示地址：

https://iarc.top/tool/banner/

随便扒一下就下来了

第二款（较为简单）

效果展示：

演示地址：

https://iarc.top/tool/banner/banner2.html

HTML代码（注意看css/js的注释）

<style type="text/css">
        html,body,div{
            margin: 0;
            padding: 0;            
        }
        body{background-color: #232323}
        .slider-outer{
            width: 560px;/*图片宽度*/
            height: 300px;/*图片高度*/
            margin: 150px auto;
            background-color: #f60;
            position: relative;
            max-width:100%;
        }
        .img-item{
            position: absolute;
            width: 112px;
            height: 100%;
            background-color: #f10;
            transition: all 1.5s;
            /*设置子元素在3D空间中呈现*/
            transform-style: preserve-3d;
        }
        /*让图片可以构成一个有四个面的长方体 start*/
        .img{
            width: 100%;
            height: 100%;
            position: absolute;
            background-size: cover;
        }
        .img:nth-child(1){
            background: url("1.jpg") no-repeat;/*图片1*/
            transform: rotateX(0deg) translateZ(150px);
        }
        .img:nth-child(2){
            background: url("2.jpg") no-repeat;/*图片2*/
            transform: rotateX(-90deg) translateZ(150px);
        }
        .img:nth-child(3){
            background: url("3.jpg") no-repeat;/*图片3*/
            transform: rotateX(-180deg) translateZ(150px);
        }
        .img:nth-child(4){
            background: url("4.jpg") no-repeat;/*图片4*/
            transform: rotateX(-270deg) translateZ(150px);
        }
        /*让图片可以构成一个有四个面的长方体 end*/
        .btns{
            position: absolute;
            top: 50%;
            width: 100%;
            height: 70px;
            margin-top: -35px;
        }
        .prev,
        .next{
            width: 70px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            background-color: rgba(0,0,0,.3);
            color: #fff;
            font-size: 30px;
            cursor: pointer;
            position: absolute;
        }
        .prev{
            left: 0;
        }
        .next{
            right: 0;
        }
    </style>
    <script type="text/javascript">
function stops(){
   return false;
}
document.oncontextmenu=stops;
</script>
<script src="https://www.jsdaima.com/Upload/1479969384/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function (){
            var num = 0;
            $("#j_silder_outer .img-item").each(function(index, el) {
                $(this).css({
                    "left":$(this).width() * index + "px",
                    /*让每个img-item延时一定时间执行动画*/
                    "transitionDelay": index * 0.3 + "s"
                });
                $(this).find(".img").css({
                    "backgroundPosition": -$(this).width() * index + "px"
                });;
            });

            $(".prev").on("click",function (){
                $("#j_silder_outer .img-item").css("transform", "rotateX(" + (++num * 90) + "deg)");
            });

            $(".next").on("click",function (){
                $("#j_silder_outer .img-item").css("transform", "rotateX(" + (--num * 90) + "deg)");
            });
            
            var timejg=4000;//轮播间隔时间
            var time = setInterval(move,timejg);
            function move(){
                $("#j_silder_outer .img-item").css("transform", "rotateX(" + (--num * 90) + "deg)");
            }
            $('.slider-outer').hover(function(){
                clearInterval(time);
            },function(){
                time = setInterval(move,timejg);
            });


        })
        
        

        
    </script>
<div class="slider-outer" id="j_silder_outer">
        <div class="img-item">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>
        <div class="img-item">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>
        <div class="img-item">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>
        <div class="img-item">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>
        <div class="img-item">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>
        <div class="btns" data-num="0">
            <div class="prev"><</div>
            <div class="next">></div>
        </div>
    </div>

以上代码是我扒下来后又优化过一遍的，各位也可根据自己需求来调整更改