为了账号安全,请及时绑定邮箱和手机立即绑定

正在回答

1 回答

<!DOCTYPE html>
<htmml>
<head>
    <title>
    shopping web
    </title>
    <meta charset="utf-8">
    <style>
    *{padding:0;margin:0}
    body{
    padding:50px 0;
    background-color: #FFF;
    font-size: 14px;
    font-family: 'Avenir Next';
    color: #555; ;
    -webkit-font-smoothing: antialised;/*字体抗锯齿*/
    }
    .main-i,
    .main,
    .slider{
        width:  100%;
        height:  400px;
        position: relative;
    }
    /*幻灯片区域*/
    .main{
        overflow: hidden;
    }
    /*每一个幻灯片的样式*/
    .main-i{}
    .main-i img{
        width: 100%;
        position: absolute;
        left: 0;
        top: 50%;
    }
    .caption{
        position: absolute;
        right: 50%;
        top: 30%;
        z-index: 9;
    }
    .caption h2{
        font-size: 40px;
        line-height: 50px;
        color: #B5B5B5;
        text-align: right;
    }
    .caption h3{
        font-size: 70px;
        line-height: 70px;
        color: #000000;
        text-align: right;
        font-family: 'Open Sans Condensed';
    }
    /*控制按钮区域*/
    .ctrl{
        width: 100%;
        height: 13px;
        line-height: 13px;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: -13px;
        
    }
    .ctrl-i{
        display: inline-block;
        width: 150px;
        height: 13px;
        background-color: #666;
        box-shadow: 0 1px 1px rgba(0,0,0,.3);
        position: relative;
        margin-left: 1px;
    }
    .ctrl-i img{
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 50px;
        z-index: 1;
        opacity: 0;
        -webkit-transition:all .2s;
      
    }
    /*hover 到控制按钮的样式*/
    .ctrl-i:hover{
        background-color: #F0F0F0;
    }
    .ctrl-i:hover img{
        bottom: 13px;
        -webkit-box-reflect:below 0px -webkit-gradient(
            linear,
            left top,
            left bottom,
            from( transparent ),
            color-stop( 50%, transparent),
            to( rgba( 255,255,255,.3 ) )
        );
    opacity: 1;
    }
    /*当前展现的状态*/
    .ctrl-i_active:hover,
    .ctrl-i_active{
        background-color: #000;
    }
    .ctrl-i_active:hover img{
        opacity: 0;
    }
    /*幻灯片切换的样式*/
    .main-i{
        opacity: 0;
        position: absolute;
        right: 50%
        top:0;
        -webkit-transition:all .5s;
    }
    .main-i h2{
        margin-right: 45px;
    }
    .main-i h3{
        margin-right: -45px;

    }
    .main-i_active h2,
    .main-i_active h3{
        opacity: 0;
        -webkit-transition:all 1s .8s;
    }
    .main-i_active{
        right: 0;
        opacity: 1;
    }
    .main-i_active h2,
    .main-i_active h3{
        margin-right: 0px;
        opacity: 1;
    }
    .caption{
        margin-right: 13%;
    }
    </style>
    </head>
<body>
   <div class="slider">
    <!-- 0.修改 VIEW->Template(关键字替换),增加 template id -->
        <div class="main" id="template_main">
            <div class="main-i" id="main_{{index}}">
                <div class="caption">
                <h2>{{h2}}</h2>
                <h3>{{h3}}</h3>
                </div>
            <img src="img/{{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="img/{{index}}.jpg"/>
    </a>
    </div>
    <script type="text/javascript">

        //1.数据定义(实际生产环境中,应有后台给出)
        var data = [
        {img:1,h1:'Creative',h2:'UUET'},
        {img:2,h1:'Friendly',h2:'DEVIL'},
        {img:3,h1:'Tranquilent',h2:'COMPATRIOT'},
        {img:4,h1:'Insercure',h2:'HUSSLER'},
        {img:5,h1:'LOving',h2:'REBRL'},
        {img:6,h1:'Passionate',h2:'SEEKER'},
        {img:7,h1:'Crazy',h2:'FRIEND'}
        ];

        // 2. 通用函数
        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].h1)
                 .replace(/{{h3}}/g,data[i].h2);
 
            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('');
        }
        //5.幻灯片切换
        function switchSlider(n){
        //5.1获得要展现的幻灯片&控制按钮 DOM
        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(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';
        }
        //6.动态调整图片的 margin-top 使其垂直居中
        function movePictures(){
            var pictures = g('.picture');
            for(i=0;i<pictures.length;i++){
                pictures[i].style.marginTop = (-1 * pictures[i].clientHeight/2) + 'px'
            }
    }


         //4.定义合适处理幻灯片输出
        window.onload = function(){
            addSliders();
            switchSlider(1);
            setTimeout(function(){
                movePictures();
            },100)
        }

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

0 回复 有任何疑惑可以回复我~
#1

南星

我想请问你的代码调试过了吗,我也是同样的代码,但是在点击第一次的时候没问题,点击第二图片的时候就会出现报错 ​Uncaught TypeError: Cannot read property 'className' of undefined
2015-07-25 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS+CSS3实现带预览图幻灯片效果
  • 参与学习       53759    人
  • 解答问题       265    个

同样的幻灯片,不一样的切换,学会实现思路,操作很简单

进入课程

请求源代码

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信