原生js+css实现带预览图片的幻灯片效果实例

最新推荐文章于 2024-04-12 09:43:10 发布

冰雪为融

最新推荐文章于 2024-04-12 09:43:10 发布

阅读量1.9k

点赞数

分类专栏： js练习文章标签：带预览图的幻灯片

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79886853

版权

js练习专栏收录该内容

19 篇文章 3 订阅

订阅专栏

先总结一下，里面的用到的关键知识点

CSS中用到的知识点有：

过渡效果：transition，下面是语法，用到时候一般要加上浏览器内核前缀。本实例中主要用到过渡的地方是opacity和right

transition: property duration timing-function delay;

图片垂直居中：（这个我之前详细写过怎么实现水平垂直居中，原理一样，如果有兴趣的可以点击https://blog.csdn.net/lhjuejiang/article/details/79756844），这里主要用到的是：position:absolute; top:50%; margin-top:-(图片高度的一半)+px’;

盒子倒影效果：(这个目前只有内核前缀是-webkit的浏览器实现了)-webkit-box-reflect+: 方向(必选，可能的值有：above、below、left、right) 距离（可选）渐变（可选）

js中用到的核心技术有：正则表达式、字符串中的replace方法（注意replace方法输出的为字符串，而replace是字符串默认拥有的方法，所以replace可以连续使用）

用到了setTimeout定时器：主要解决的问题是：我们的元素是动态插入的，所以我们需要等到元素插入完成之后再对其进行后续的操作

模板字符串：嗯，这个也是我刚学会的，之前也没用过，我的理解就是把之前做好的一个模板进行改造（主要就是关键字的替换，一般把是如右边的做法：{{关键字}}，输出的时候用我们接受的数据替换掉关键字（用到了正则和字符串中的replace方法）），作用是输出幻灯片和控制按钮

嗯、上面是用到的核心技术，但理论和实践还差十个阮一峰，具体的实现，请看下面的实现过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding:0; margin:0;}
        body{
            padding:50px 0;
            background-color:#fff;
            font-size:14px;
            font-family:"Avenir Next";
            color:#555;
            -webkit-font-smoothing:antialiased;
        }
        /*幻灯片区域*/
        .slider,.slider .main ,.slider .main .main-i{
            width:100%; height:400px; position:relative;
        }
        .slider .main{overflow:hidden;}
        .slider .main .main-i img{
            width:100%;position:absolute; left:0; top:50%; z-index:1;
        }
        .slider .main .main-i_right img{margin-right:-50%;}

        .slider .main .main-i .caption{
            position:absolute; right:50%; top:30%; z-index:9;
        }
        .slider .main .main-i .caption h2{
            font-size:26px; line-height:50px;color:#b5b5b5; text-align:right;
        }
        .slider .main .main-i .caption h3{
            font-size:40px; line-height:70px;color:#000; text-align:right; ;
        }
        /*控制按钮区域*/
        .slider .ctrl{width:100%; height:13px; line-height:13px; text-align:center; position:absolute; left:0; bottom:-13px; background-color:#fff;}
        .slider .ctrl .ctrl-i{
            display:inline-block; width:12%; height:13px; background-color:#666; position:relative; box-shadow:0 1px 1px rgba(0,0,0,.3); margin-left:1px;
        }
        .slider .ctrl .ctrl-i img{width:100%; position:absolute; left:0; bottom:50px; opacity:0; transition:all .2s;z-index:1;}
        /*hover 的控制按钮的样式*/
        .slider .ctrl .ctrl-i:hover{
            background-color:#f0f0f0;
        }
        .slider .ctrl .ctrl-i:hover img{
            opacity:1;
            bottom:13px;
            z-index:2;
            -webkit-box-reflect:below 0px -webkit-gradient(linear,left top,left bottom, from(transparent),color-stop(50% transparent),to(rgba(255,255,255,0.3)));
        }
        /*active当前展现的样式*/
        .slider .ctrl .ctrl-i_active,
        .slider .ctrl .ctrl-i_active:hover{
            background-color:#000;
        }
        .slider .ctrl .ctrl-i_active:hover img{opacity:0;z-index:10;}
        /*幻灯片切换的样式*/
        .slider .main .main-i{
            opacity:0;
            position:absolute;
            right:50%;
            top:0;
            -webkit-transition:all .5s;
            z-index:2;
        }
        #main_background,
        .slider .main .main-i_active{
            opacity:1;
            right:0;

        }
        #main_background{
            z-index:1;
        }
        .slider .main .main-i h2{margin-right:45px;}
        .slider .main .main-i h3{margin-right:-45px;}
        .slider .main .main-i h2 , .slider .main .main-i h3{-webkit-transition:all 1s .8s; opacity:0;}
        .slider .main .main-i_active h2,.slider .main .main-i_active h3{
            margin-right:0; opacity:1;
        }
        .slider .main .main-i .caption{
            margin-right:13%;
        }
    </style>
</head>
<body>
<div class="slider">
    <div class="main" id="template_main">
        <div class="main-i {{css}}" id="main_{{index}}">
        <div class="caption">
            <h2>{{h2}}</h2>
            <h3>{{h3}}</h3>
        </div>
        <img src="imgs/{{index}}.jpg" class="picture"/>
        </div>
    </div>
    <div class="ctrl" id="template_ctrl">
        <a class="ctrl-i " id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">
        <img src="imgs/{{index}}.jpg"/>
        </a>
    </div>
</div>
<script>
    //数据定义，实际生产中应由后台给出
var data = [{img:1,h1:'Beautiful Lacy&Jan',h2:'Cute Girls'},
    {img:2,h1:'Annnanann',h2:'Dadada'},
    {img:3,h1:'Beautiful Ann',h2:'Cute Girl'},
    {img:4,h1:'Beautiful Donna',h2:'Cute Girl'},
    {img:5,h1:'Beautiful Lucy',h2:'Cute Girl'},
    {img:6,h1:'Beautiful Joy',h2:'Cute Girl'},
    {img:7,h1:'Beautiful Ken',h2:'Good boy'}
];
//内容输出
    //0 修改VIEW，转为Template（关键字替换，增加template id）
    //通用函数
    var g = function(id){
        if(id.substr(0,1)=='.'){
            return document.getElementsByClassName(id.substr(1));
        }
        return document.getElementById(id);
    }
//3、添加幻灯片的操作（所有幻灯片对应的按钮）
    function addSliders(){
        //获取模板
        //去掉空格
        var tpl_main = g('template_main').innerHTML
            .replace(/^\s*/,'')
            .replace(/\s*$/,'');
        var tpl_ctrl = g('template_ctrl').innerHTML
            .replace(/^\s*/,'')
            .replace(/\s*$/,'');
        //定义最终输出的HTML变量
        var out_main = [];
        var out_ctrl = [];
        //遍历所有数据，构建最终输出的HTML
        for(i in data){
            var _html_main = tpl_main
                .replace(/{{index}}/g,data[i].img)
                .replace(/{{h2}}/g,data[i].h1)
                .replace(/{{h3}}/g,data[i].h2)
                .replace(/{{css}}/g,['','main-i_right'][i%2]);
            var _html_ctrl = tpl_ctrl
                .replace(/{{index}}/g,data[i].img);
            out_main.push(_html_main);
            out_ctrl.push(_html_ctrl);

        }
        //把HTML回写到对应的DOM里面
        g('template_main').innerHTML = out_main.join('');
        g('template_ctrl').innerHTML = out_ctrl.join('');
       //添加切换时的背景图片
        g('template_main').innerHTML +=tpl_main
            .replace(/{{index}}/g,'{{index}}')
            .replace(/{{h2}}/g,data[i].h1)
            .replace(/{{h3}}/g,data[i].h2);
        g('main_{{index}}').id = 'main_background';

    }
    //幻灯片切换
    function switchSlider(n){
        //获得要展示的幻灯片按钮 DOM
        var main = g('main_'+n);
        var ctrl = g('ctrl_'+n);

        //获得所有幻灯片以及控制按钮
        var clear_main = g('.main-i');
        var clear_ctrl = g('.ctrl-i');
        //清除他们的active样式
        for(var i=0; i<clear_ctrl.length;i++){//这个地方使用的是clear_ctrl.length,我试过使用clear_main.length,然后后面的clear_ctrl[i].className就一直报错，不知道为什么，反正注意就用celar_ctrl.length,不会报错，等我搞懂了，会进行讨论的
            clear_main[i].className=clear_main[i].className
                .replace('main-i_active','');
            clear_ctrl[i].className=clear_ctrl[i].className
                .replace('ctrl-i_active','');
        }
        //为当前控制按钮和幻灯片附加样式
        main.className +=' main-i_active';
        ctrl.className +=' ctrl-i_active';
        //切换时复制上一张幻灯片到main_background中
        setTimeout(()=>{
            g('main_background').innerHTML = main.innerHTML;
        },1000)

    }
    function movePictures(){
        var pictures = g('.picture');
        for(var i=0; i<pictures.length;i++){
            pictures[i].style.marginTop = (-1*pictures[i].clientHeight)/2+'px';
        }
    }
window.onload = function(){
    addSliders();
    switchSlider(1);
    setTimeout(function(){
        movePictures();
    },100);
}

</script>
</body>
</html>

冰雪为融

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js+css实现带预览图片的幻灯片效果实例

先总结一下，里面的用到的关键知识点CSS中用到的知识点有：过渡效果：transition，下面是语法，用到时候一般要加上浏览器内核前缀。本实例中主要用到过渡的地方是opacity和righttransition: property duration timing-function delay;图片垂直居中：（这个我之前详细写过怎么实现水平垂直居中，原理一样，如果有兴趣的可以点击https://bl...
复制链接

扫一扫