【JS/CSS3】实现带预览图幻灯片效果~

一、前期准备

1.1 案例分析

适用场景：单例布局
1.2 方法论

V视图 HTML+CSS+调试
C js实现控制流程
D数据 优化扩展

二、代码

结构

<div class="slider">
    <div class="main">
        <div class="main_i">
            <div class="caption">
                <h2>h2 captionh2>
                <h2>h3 captionh2>
            div>
        <img src="images/{{index}}.jpg" alt="">
        div>
    div>
    <div class="ctrl">
        <a href="javascript:;"><img src="images/{{index}}.jpg" alt="">
        a>
    div>
div>                

 

样式（CSS略）

脚本功能开发

>>内容输出
Template改造 输出幻灯片&控制按钮 图片位置调整

>>切换控制
切换幻灯片 .main_i_active 切换控制按钮 .ctrl_i_active

0、修改VIEW ->Template(关键字替换),增加Template id
图片区

{{h2}}}

{{h3}}}

按钮区

 

下面是重点 JS脚本的编写~~

 

 

效果图 … = =莫吐槽又是这几张图~~~  

 

遇到问题：

1、 给图片直接加top:50%;会有BUG，没作用，原因可能是没给height固定高度~~给了固定高度就好了

但问题又来了，2、给固定高度后，按钮组不能自适应宽度 … 会被挤到第二排去  ……

 

蛋疼。。以后来填坑吧

转载于:https://www.cnblogs.com/fuyinsheng/p/5287610.html