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:;"><</a>
<a class="arrow" id="next" href="javascript:;">></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(); //手动启动一下轮播
};main.js中 第46行的注释写错了，你们懂的，不加 [0]得到的是一个伪数组