JS+DIV 实现轮播图（二）（慕课网学习笔记）

最新推荐文章于 2024-04-15 10:28:24 发布

geekzsp

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量4.8k

点赞数

分类专栏：前端文章标签： javascript js div

本文链接：https://blog.csdn.net/mixi9760/article/details/52073399

版权

前端专栏收录该内容

25 篇文章 2 订阅

订阅专栏

效果图：

这里写图片描述

原理：

这里和实现轮播图（一）的原理差不多只不过多了一些特效

代码：

<!DOCTYPE html>
<html lang="en">

 <!--先布局出来  -->
 <!--整体一个div 里面 两个div  一个是主体-->
 <!--一个是控制栏-->
 <!--主体里面有多个子div  子div包括 img  和标题-->
 <!--控制栏里面也有对应的子div  包括 img-->
 <!--然后就是模拟 变换的效果-->
 <!--给变换的多一个class 样式 就可以实现效果-->
 <!---->
 <!--data: -->
 <!--1 先把数据都写到布局-->
 <!--1.1 先提取模版  然后 for循环 用正则替换写布局-->
 <!--1.2 写选择函数   选中的 给一个样式。-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            padding: 50px;
            background-color: #FFF;
            font-size: 14px;
            color: #555;
            -webkit-font-smoothing: antialiased; //字体抗锯齿
        }
        .slider,.main,.main_i{
            width: 100%;
            height: 400px;
            position: relative;
            z-index: 2;
        }
        /*//幻灯片*/
        .main{
            overflow: hidden;
        }
         /*幻灯片切换样式*/
        .main_i{
            opacity: 0;
            position: absolute;
            right: 50%;
            top:0;
            -webkit-transition:all .8s;

        }
        .margin_i_right{
            right: -50%;
        }
        #main_background,
        .main_i_active{
            opacity: 1;
            right: 0;
            z-index: 2;
        }
        #main_background{
            z-index: 1;
        }
        .main_i img{
            width: 100%;
            position: absolute;
            left: 0;
            top: 50%;
        }
        .main_i .caption{
            position: absolute;
            left: 10%;
            top: 20%;
            z-index: 999;
        }
        .main_i .caption h2{
            font-size: 60px;
            line-height: 50px;
            color: #B5B5B5;
            text-align: right;
            margin-right: -45px;
        }
        .main_i .caption h3{
            font-size: 70px;
            line-height: 70px;
            color: #000000;
            text-align: right;
            margin-right:45px ;
        }
         .main_i .caption h2,
         .main_i .caption h3{
             opacity: 0;
            -webkit-transition: all 1s .8s ;
        }
        /*控制按钮区域*/
        .ctrl{
            width: 100%;
            height: 13px;
            line-height: 13px;
            text-align: center;
            position: absolute;
            left: 0;
            background-color: #FFF;
            bottom: -13px;
        }
        .ctrl_i{
            display: inline-block;
            width: 150px;
            height: 13px;
            margin-left: 1px;
            background-color: #666;
            box-shadow: 0 3px 1px rgba(0,0,0,.3);
            position: relative;
        }
        .ctrl_i img{
            z-index: 988;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 50px;
            opacity: 0;
            -webkit-transition: all .5s ;

        }
        /*hover 控制按钮样式*/
        .ctrl_i:hover{
            background-color: #F0F0F0;
        }
        .ctrl_i:hover img{
           bottom: 13px;
            opacity: 1;
        }
        /*active 当前展现的状态*/
        .ctrl_i_active,.ctrl_i_active:hover{
            background-color:#000 ;
        }
        .ctrl_i_active:hover img{
            opacity: 0;
        }
        .main_i_active .caption h2,
        .main_i_active .caption h3{
            margin-right: 0px;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="slider">
        <!--修改view 转换成模版  关键词替换  增加 template id-->
        <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="images/{{index}}.jpg" class="pictures" alt="">
            </div>
        </div>
        <div class="ctrl" id="template_ctrl">
            <a href="javascript:switchSlider({{index}});" onfocus="this.blur();" class="ctrl_i" id="ctrl_{{index}}"><img src="images/{{index}}.jpg" alt=""></a>
        </div>

    </div>
    <script>
//        数据定义 实际开发应该是后台给
        var data=[
            {img:1,h2:"Creative",h3:'DUET'},
            {img:2,h2:"Friendly",h3:'DEVIL'},
            {img:3,h2:"Tranquilent",h3:'COMPATRIOT'},
            {img:4,h2:"INsecure",h3:'HUSSLER'},
            {img:5,h2:"Loving",h3:'REBEL'},
            {img:6,h2:"Passionate",h3:'SEEKER'},
            {img:7,h2:"Crazy",h3:'FRIEND'},
        ]
        //2. 通用函数  获取元素节点  可以根据classname  获取节点数组（多传一个.作为标志判断 用的时候再去掉） 也可以 通过id 获取 节点
        var g =function(id){
            if(id.substr(0,1)=="."){
                return document.getElementsByClassName(id.substr(1));
            }
            return document.getElementById(id);
        }
//        3  添加幻灯片的操作(所有幻灯片&对应的按钮)
         function addSliders(){
           //3.1 获取模版
             var tpl_main=g("template_main").innerHTML
                     .replace(/^\s*/,'')//前面空格
                     .replace(/\s*$/,'');//后面空格
             var tpl_ctrl=g("template_ctrl").innerHTML
                     .replace(/^\s*/,'')//前面空格
                     .replace(/\s*$/,'');//后面空格
             //3.2 定义最终输出 HTML 的变量
             var out_main=[];
             var out_ctrl=[];
//             3.3  遍历所有数据，构建最终输出的HTML
             for( i in data){
                 var _html_main=tpl_main
                         .replace(/{{index}}/g,data[i].img)
                         .replace(/{{h2}}/g,data[i].h2)
                         .replace(/{{h3}}/g,data[i].h3)
                         .replace(/{{css}}/g,["","margin_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);
             }
             //3.4 把HTML 回写到对应的DOM 里面
             g("template_main").innerHTML=out_main.join('');
             g("template_ctrl").innerHTML=out_ctrl.join('');

//             增加 main_background
             g("template_main").innerHTML+=tpl_main
                     .replace(/{{index}}/g,'{{index}}')
                     .replace(/{{h2}}/g,data[i].h2)
                     .replace(/{{h3}}/g,data[i].h3);
             g("main_{{index}}").id="main_background";
         }
//            5.幻灯片切换
            function  switchSlider(n){
                //5.1获得要展现的幻灯片&控制按钮
                var main=g('main_'+n);
                var ctrl=g('ctrl_'+n);
//            5.2 获得所有的幻灯片以及控制按钮
                var clear_main=g(".main_i");
                var clear_ctrl=g(".ctrl_i");
//                5.3 清除他们的active 样式 这里不是真正的数组 不能用 for in
                for(i=0;i<clear_ctrl.length;i++){
                    clear_main[i].className=clear_main[i].className.replace(" main_i_active",'');
                    clear_ctrl[i].className=clear_ctrl[i].className.replace(" ctrl_i_active",'');
                }
//                5.4 为当前控制按钮和幻灯片附加样式
                main.className+=" main_i_active";
                ctrl.className+=" ctrl_i_active";
                count=n;
            //切换完成后 把 背景图改成这张图
                setTimeout(function(){ g('main_background').innerHTML=main.innerHTML;},500);

            }
//        6  动态调整图片的 margin-top 使其居中
            function  movePictures(){
                var pictures= g('.pictures');
                for(var i=0;i<pictures.length;i++){
                    pictures[i].style.marginTop=pictures[i].clientHeight/2*(-1)+"px"
                }
            }
//            7 定时切换功能
            var  count=1;
           var  by=0;
        function autoChage(){
            switchSlider(count);
//            count++;
            if(count==data.length+1)
            count=1;

            if(count==7){
                by=1;
                count--;
            }
          else  if(count==1){
                count++;
                by=0;
            }
            else{
                if(by==0){
                    count++
                }else {
                    count--
                }
            }
        }


//        4  定义何时处理幻灯片输出
        window.onload=function(){
            addSliders();
            setInterval(autoChage,3000);
            switchSlider(1);
            //延时执行 不然可能找不到  元素
            setTimeout(movePictures,100);
        }

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

geekzsp

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
JS+DIV 实现轮播图（二）（慕课网学习笔记）

效果图原理代码效果图：原理：这里和实现轮播图（一）的原理差不多只不过多了一些特效代码：<!DOCTYPE html><html lang="en">     <!--控制栏里面也有对应的子div 包
复制链接

扫一扫