有没有做成功的同学
跟着视频一步一步做的，可是最终显示的结果却没成功。实在是不知道是那里的问题。有没有做好的同学把代码发一下。谢谢了。
Java入门小白
2019-04-26
1 回答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带缩略图幻灯片</title>
<!-- <link rel="stylesheet" href="css/index.css"> -->
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 50px 0;
background-color: #fff;
font-size: 14px;
font-family: 'Avenir Next';
color: #555;
-webkit-font-smoothing: antialiasd;
}
.slider .main .main-i,
.slider .main,
.slider {
width: 100%;
height: 400px;
position: relative;
}
.slider .main {
overflow: hidden;
}
.slider .main .main-i img {
width: 100%;
position: absolute;
left: 0;
top: 50%;
z-index: 1;
}
.slider .main .main-i .caption {
position: absolute;
right: 50%;
top: 30%;
z-index: 9;
margin-right: 13%;
}
.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;
}
.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: 1;
opacity: 0;
transition: all .2s;
}
.slider .ctrl .ctrl-i:hover {
background-color: #f0f0f0;
}
.slider .ctrl .ctrl-i:hover img {
bottom: 13px;
-webkit-box-reflect: below 0 -webkit-gradient(linear,
left top,
left bottom,
from(transparent),
color-stop(50%, transparent),
to(rgba(255, 255, 255, .3)));
opacity: 1;
}
.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;
position: absolute;
right: 50%;
top: 0;
transition: all .5s;
z-index: 2;
}
.slider .main .main-i h2 {
margin-right: 45px;
}
.slider .main .main-i h3 {
margin-right: -45px;
}
.slider .main .main-i h2,
.slider .main .main-i h3 {
transition: all 1s .5s;
opacity: 0;
}
.slider .main .main-i_right {
right: -50%;
}
#main_background,
.slider .main .main-i_active {
opacity: 1;
right: 0;
z-index: 2;
}
#main_background {
z-index: 1;
}
.slider .main .main-i_active h2,
.slider .main .main-i_active h3 {
margin-right: 0;
opacity: 1;
}
</style>
</head>
<body>
<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 src="img/{{index}}.jpg" class="picture">
</div>
</div>
<div class="ctrl" id="template_ctrl">
<a href="javascript:switchSlider({{index}});" class="ctrl-i" id="ctrl_{{index}}"><img
src="img/{{index}}.jpg"></a>
</div>
</div>
<!-- <script src="js/index.js"></script> -->
<script>
var data = [
{ img: 1, h1: 'Creative', h2: 'DUET' },
{ img: 2, h1: 'Friendly', h2: 'DEVIL' },
{ img: 3, h1: 'Insecure', h2: 'HUSSLER' },
{ img: 4, h1: 'Loving', h2: 'REBEL' },
{ img: 5, h1: 'Passionate', h2: 'SEEKER' },
{ img: 6, h1: 'Tranquilent', h2: 'COMPATRIOT' },
{ img: 7, h1: 'Crazy', h2: 'FRIEND' }
]
var g = function (id) {
if (id.substr(0, 1) == '.') {
return document.getElementsByClassName(id.substr(1));
}
return document.getElementById(id);
}
function addSliders() {
var tpl_main = g('template_main').innerHTML.replace(/^\s*/, '').replace(/\s*/, '');
var tpl_ctrl = g('template_ctrl').innerHTML.replace(/^\s*/, '').replace(/\s*/, '');
var out_main = [];
var out_ctrl = [];
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).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);
}
g('template_main').innerHTML = out_main.join(' ');
g('template_ctrl').innerHTML = out_ctrl.join(' ');
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';
}
function switchSlider(n) {
var main = g('main_' + n);
var ctrl = g('ctrl_' + n);
var clear_main = g('.main-i');
var clear_ctrl = g('.ctrl-i')
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', '');
}
main.className += ' main-i_active';
ctrl.className += ' ctrl-i_active';
setTimeout(function () { g('main_background').innerHTML = main.innerHTML; }, 1000);
}
function movePictures() {
var pictures = g('.picture');
for (i = 0; i < pictures.length; i++) {
pictures[i].style.marginTop = (-1 * pictures[i].clientHeight / 2) + 'px';
}
}
window.onload = function () {
addSliders();
switchSlider(2);
setTimeout(function () {
movePictures()
}, 100);
}
</script>
</body>
</html>
举报
0/150
提交
取消
