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

课程

/前端开发

/JavaScript

/JS+CSS3实现带预览图幻灯片效果

在这个案例的基础上增加了 自动轮播、导航箭头控制轮播以及将 HTML中控制按钮中的 switchSlider 移到了js文件中，从而实现结构、行为的分离

demo.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS+CSS3实现带预览图幻灯片效果</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
	<!-- 修改view转换为模版,关键字替换 -->
    <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 class="picture" src="imgs/{{index}}.jpg" alt="">
    		</div>
    	</div>
    	<div class="ctrl" id="template_ctrl">
    		<a class="ctrl-i" id="ctrl_{{index}}" href="javascript:;">
    			<img src="imgs/{{index}}.jpg" alt="">
    		</a>
    	</div>
        <!-- 幻灯片左右箭头 -->
        <a class="arrow" id="prev" href="javascript:;">&lt;</a>
        <a class="arrow" id="next" href="javascript:;">&gt;</a>
    </div>

    <script src="main.js"></script>
</body>

</html>

main.css

/* 初始化代码 */
* {
    margin: 0;
    padding: 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 {
    position: relative;
}

.slider .main .main-i img {
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
}

.slider .main .main-i .caption {
    position: absolute;
    right: 50%;
    top: 30%;
    z-index: 9;
}

.slider .main .main-i .caption h2 {
    font-size: 40px;
    line-height: 50px;
    color: #b5b5b5;
    text-align: right;
}

.slider .main .main-i .caption h3 {
    font-size: 70px;
    line-height: 70px;
    color: #000;
    text-align: right;
    font-family: 'Open Sans Condensed';
}


/* 控制按钮区域 */
.slider .ctrl {
    width: 100%;
    height: 13px;
    line-height: 13px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: -13px;
    font-size: 0;
}

.slider .ctrl .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;
}
.slider .ctrl .ctrl-i img {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 50px;
    z-index: 9;
    opacity: 0;
    transition: all .2s;
}

/* hover 到控制按钮 */
.slider .ctrl .ctrl-i:hover {
    background-color: #f0f0f0;
}

.slider .ctrl .ctrl-i:hover img {
    bottom: 13px;
    /*添加倒影-没有*/
    -webkit-box-reflect: below 0px -webkit-gradient(linear,left top,left bottom,form(transparent),color-stop(50%),transparent),to(rgba(255,255,255,.3));
    opacity: 1;
}

/* active 按钮展现时的状态*/
.slider .ctrl .ctrl-i_active:hover,
.slider .ctrl .ctrl-i_active {
    background-color: #000;
}

.slider .ctrl .ctrl-i_active:hover img {
    opacity: 0;
}

/* 幻灯片切换的样式 */
.slider .main .main-i {
    opacity:0;
    right: 50%;
    position: absolute;
    transition: all 0.5s;
    z-index: 2;
}

/*它的位置不同优先级就不同，要把握时机，避免不必要的覆盖*/
.slider .main .main-i_right {
    right: -50%;
}

.slider .main .main-i_active,#main_background {
    opacity: 1;
    right: 0;
    top: 0;
    z-index: 2;
}

#main_background {
    z-index: 1;
}

.slider .main .main-i .caption h2{
    margin-right: 45px;
    transition: all 1s 0.8s;
    opacity: 0;
}

.slider .main .main-i .caption h3 {
    margin-right: -45px;
    transition: all 1s 0.8s;
    opacity: 0;
}

.slider .main .main-i_active .caption h2,.slider .main .main-i_active .caption h3 {
    margin-right: 0;
    opacity: 1;
}

.slider .main .main-i .caption {
    margin-right: 13%;
}

/* 幻灯片左右剪头 */
.arrow {
    display: none;
    position: absolute;
    z-index: 10;
    top: 0;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: rgba(0,0,0,.2);
    text-decoration: none;
    font-size: 30px;
    color: #fff;
    font-weight: bold;
}

.arrow:hover {
    background-color: rgba(0,0,0,.5);
}

#prev {
    top: 50%;
    left: 3%;
    margin-top: -20px;
}

#next {
    right: 3%;
    top: 50%;
    margin-top: -20px;
}

.slider:hover .arrow {
    display: inline-block;
}

main.js

/*数据定义-从后台加载数据*/
var data = [{
    img: 1,
    h1: 'Creative',
    h2: 'DUET'
}, {
    img: 2,
    h1: 'Friendly',
    h2: 'DEVIL'
}, {
    img: 3,
    h1: 'Tranquilent',
    h2: 'COMPATRIOT'
}, {
    img: 4,
    h1: 'Insecure',
    h2: 'HUSSLER'
}, {
    img: 5,
    h1: 'Loving',
    h2: 'REBEL'
}, {
    img: 6,
    h1: 'Passionsate',
    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);
};

/* 8.1获取导航箭头元素  和 定义当前页面索引index */
var prev = g('prev');
var next = g('next');
var index = 1;
var timer; //计时器标识
var slid = g('.slider')[0]; //此处得到的是一个伪数组

/* 3.添加幻灯片的操作 （所有幻灯片以及对应的按钮） */
function addSliders(){
    //3.1 获取模版
    var tpl_main = g('template_main').innerHTML.replace(/^\s*|\s*$ /,'');
    var tpl_ctrl = g('template_ctrl').innerHTML.replace(/^\s*|\s*$/,'');

    // 3.2 定义最终输出的HTML变量
    var out_main = [];
    var out_ctrl = [];

    // 3.3 遍历所有数据，构建最终输出的HTML
    for(var 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);
    }

    //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].h1)
        .replace(/{{h3}}/g,data[i].h2);
    g('main_{{index}}').id = 'main_background';
}

/* 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(var 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';

    // 7.2切换时复制上一张幻灯片到 #main_background中
    setTimeout(function(){
        g('main_background').innerHTML = main.innerHTML;
    },1000);
}

/* 9.给所有的控制按钮添加click事件 */
    function buttonsClick(){
        var buttons = g('.ctrl-i');
        var myIndex;//找到点击的是第几张图片
        for(var i = 0;i < buttons.length;i++){
            buttons[i].onclick=function(){
                myIndex = parseInt(this.getAttribute('id').substr(5));
                index = myIndex;
                switchSlider(index);
            };
        }
    }

/* 6.动态调整图片的margin-top,以使其垂直居中 */
function movePictures(){
    var pictures = g('.picture');
    for(var i = 0;i<pictures.length;i++){
        pictures[i].style.marginTop = -(pictures[i].clientHeight / 2 )+ 'px';
    }
}

/* 8.为两个导航箭头绑定切换幻灯片的事件 */
prev.onclick=function(){
    if(index == 1){
        index = 7;
    }else {
        index--;
    }
    switchSlider(index);
};

next.onclick = function(){
    if(index == data.length){
        index = 1;
    }else {
        index++;
    }
    switchSlider(index);
};

/* 10.自动轮播-模拟导航箭头点击事件就可以了 */
    function play(){
        timer = setInterval(function(){
            next.onclick();
        },3000);
    }

    function stop(){
        clearInterval(timer);
    }

/* 定义何时处理幻灯片输出 */
window.onload = function(){
    addSliders();
    switchSlider(1);
    buttonsClick();
    /*movePictures(); 这样会不起作用，因为在获取图片的时候，可能还不能获取到，因为图片是动态生成的，所以需要等待图片生成后再执行*/
    setTimeout(movePictures,100);
    slid.addEventListener('mouseover',stop,false);
    slid.addEventListener('mouseout',play,false);
    //此处如果清除不了自动轮播，很可能是slid不是一个具体的DOM元素而是一个伪数组的集合，导致无法绑定事件,因此用 g('.slider')[0]获取到最外部的.slider容器，必须加上[0]
    play(); //手动启动一下轮播
};


守候你的季节

2016-09-13

源自：JS+CSS3实现带预览图幻灯片效果  3-3

关注问题 我要回答
1225
操作
收起

正在回答

1 回答

守候你的季节 提问者
2016-09-13

main.js中 第46行的注释写错了，你们懂的，不加 [0]得到的是一个伪数组

0 回复 有任何疑惑可以回复我~
收起回答

举报

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

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

进入课程

本课相似问答

2 回答​控制按钮之间存在空隙？？

1 回答做到5.1获得要展现的幻灯片以及控制按钮出现问题，求大神解答一下。

1 回答自动播放如何实现

1 回答//5.4 为当前控制按钮和幻灯片附加样式 main.className += &#039;main-i_active&#039;;

2 回答g(&#039;template_ctrl&#039;) 这个得到的每个控制代码后面会加上一个逗号，在调的时候也会显示出来
搜索更多本课相关问答

在这个案例的基础上增加了 自动轮播、导航箭头控制轮播以及将 HTML中控制按钮中的 switchSlider 移到了js文件中，从而实现结构、行为的分离

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