圆弧派博客 - 专注于网络技术

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

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

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

效果展示:

演示地址:

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

源码

在网页头部引入

<link rel="stylesheet" href="//cdn.iarc.top/banner/css/style.css" />
<script type="70121cff3a3204649e18ece2-text/javascript" src="//cdn.iarc.top/banner/js/modernizr.min.js"></script>
<script type="70121cff3a3204649e18ece2-text/javascript">
    /* <![CDATA[ */
    var CSSettings = {"pluginPath":"style/banner"};
    /* ]]> */
    </script>
<script type="70121cff3a3204649e18ece2-text/javascript" src="//cdn.iarc.top/banner/js/cute.slider.js"></script>
<script type="70121cff3a3204649e18ece2-text/javascript" src="//cdn.iarc.top/banner/js/cute.transitions.all.js"></script>

上面的css、js的静态文件有防盗链,故需要保存到本地再调取

轮播图HTML代码:

<div id="banner">
<div class="c-860 c-demoslider">
<div id="cuteslider_3_wrapper" class="cs-circleslight">
<div id="cuteslider_3" class="cute-slider" data-width="960" data-height="420" data-overpause="true">
<ul data-type="slides">
<li data-delay="5" data-src="5" data-trans3d="tr6,tr17,tr22,tr23,tr29,tr27,tr32,tr34,tr35,tr53,tr54,tr62,tr63,tr4,tr13,tr45" data-trans2d="tr3,tr8,tr12,tr19,tr22,tr25,tr27,tr29,tr31,tr34,tr35,tr38,tr39,tr41">
<img src="https://cdn.iarc.top/yhbk.jpg" data-thumb="//cdn.iarc.top/banner/001/mini.jpg">
<a data-type="link" href="//cdn.iarc.top/banner/tool"></a>
</li>
<li data-delay="5" data-src="5" data-trans3d="tr6,tr17,tr22,tr23,tr26,tr27,tr29,tr32,tr34,tr35,tr53,tr54,tr62,tr63,tr4,tr13" data-trans2d="tr3,tr8,tr12,tr19,tr22,tr25,tr27,tr29,tr31,tr34,tr35,tr38,tr39,tr41">
<img src="//cdn.iarc.top/banner/bg/blank.png" data-src="https://cdn.iarc.top/yhbk.jpg" data-thumb="//cdn.iarc.top/banner/001/mini.jpg">
<a data-type="link" href="#"></a>
</li>
<li data-delay="5" data-src="5" data-trans3d="tr6,tr17,tr22,tr23,tr26,tr27,tr29,tr32,tr34,tr35,tr53,tr54,tr62,tr63,tr4,tr13" data-trans2d="tr3,tr8,tr12,tr19,tr22,tr25,tr27,tr29,tr31,tr34,tr35,tr38,tr41">
<img src="//cdn.iarc.top/banner/bg/blank.png" data-src="https://cdn.iarc.top/yhbk.jpg" data-thumb="//cdn.iarc.top/banner/001/mini.jpg">
<a data-type="link" href="#" target="_blank"></a>
</li>
<li data-delay="5" data-src="5" data-trans3d="tr6,tr17,tr22,tr23,tr26,tr27,tr29,tr32,tr34,tr35,tr53,tr54,tr62,tr63,tr4,tr13" data-trans2d="tr3,tr8,tr12,tr19,tr22,tr25,tr27,tr29,tr31,tr34,tr35,tr38,tr39,tr41">
<img src="//cdn.iarc.top/banner/bg/blank.png" data-src="https://cdn.iarc.top/yhbk.jpg" data-thumb="//cdn.iarc.top/banner/001/mini.jpg">
<a data-type="link" href="#" target="_blank"></a>
</li>
<li data-delay="5" data-src="5" data-trans3d="tr6,tr17,tr22,tr23,tr26,tr27,tr29,tr32,tr34,tr35,tr53,tr54,tr62,tr63,tr4,tr13" data-trans2d="tr3,tr8,tr12,tr19,tr22,tr25,tr27,tr29,tr31,tr34,tr35,tr38,tr39,tr41">
<img src="//cdn.iarc.top/banner/bg/blank.png" data-src="https://cdn.iarc.top/yhbk.jpg" data-thumb="//cdn.iarc.top/banner/001/mini.jpg">
<a data-type="link" href="#" target="_blank"></a>
</li>
<li data-delay="5" data-src="5" data-trans3d="tr6,tr17,tr22,tr23,tr26,tr27,tr29,tr32,tr34,tr35,tr53,tr54,tr62,tr63,tr4,tr13" data-trans2d="tr3,tr8,tr12,tr19,tr22,tr25,tr27,tr29,tr31,tr34,tr35,tr38,tr39,tr41">
<img src="//cdn.iarc.top/banner/bg/blank.png" data-src="https://cdn.iarc.top/yhbk.jpg" data-thumb="//cdn.iarc.top/banner/001/mini.jpg">
<a data-type="link" href="#" target="_blank"></a>
</li>
</ul>
<ul data-type="controls">
<li data-type="captions"></li>
<li data-type="link"></li>
<li data-type="video"></li>
<li data-type="slideinfo"></li>
<li data-type="circletimer"></li>
<li data-type="previous"></li>
<li data-type="next"> </li>
<li data-type="bartimer"></li>
<li data-type="slidecontrol" data-thumb="true" data-thumbalign="up"></li>
</ul>
</div>
<div class="cute-shadow"><img src="//cdn.iarc.top/banner/bg/shadow.png" alt="shadow"></div>
</div>
<p><script type="70121cff3a3204649e18ece2-text/javascript">var cuteslider3 = new Cute.Slider();cuteslider3.setup("cuteslider_3" , "cuteslider_3_wrapper", "//cdn.iarc.top/banner/css/slider-style.css");cuteslider3.api.addEventListener(Cute.SliderEvent.CHANGE_START, function(event) { });cuteslider3.api.addEventListener(Cute.SliderEvent.CHANGE_END, function(event) { });cuteslider3.api.addEventListener(Cute.SliderEvent.WATING, function(event) { });cuteslider3.api.addEventListener(Cute.SliderEvent.CHANGE_NEXT_SLIDE, function(event) { });cuteslider3.api.addEventListener(Cute.SliderEvent.WATING_FOR_NEXT, function(event) { });</script>
</div>
</div>

<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" data-cf-settings="70121cff3a3204649e18ece2-|49" defer></script>

皆为源码无加密,各位可根据自己所需进行调整

第二款(较为简单)

效果展示:

演示地址:

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>

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

当前页面是本站的「谷歌AMP」版。查看和发表评论请点击:完整版 »