                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS+CSS3實現帶預覽圖幻燈片效果

有沒有做成功的同學

跟著視頻一步一步做的，可是最終顯示的結果卻沒成功。實在是不知道是那里的問題。有沒有做好的同學把代碼發一下。謝謝了。

Java入門小白

2019-04-26

源自：JS+CSS3實現帶預覽圖幻燈片效果 3-3

關注問題我要回答

1038

操作

收起

1 回答

x偏愛_南半球o
2020-08-04

<!DOCTYPE?html>

<html?lang="en">

<head>

????<meta?charset="UTF-8">

????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">

????<title>帶縮略圖幻燈片</title>

????

????<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>

????????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 回復有任何疑惑可以回復我~

收起回答

舉報

0/150

提交

取消

JS+CSS3實現帶預覽圖幻燈片效果

參與學習 53755 人
解答問題 279 個

同樣的幻燈片，不一樣的切換，學會實現思路，操作很簡單

進入課程

本課相似問答

1 回答老師我的圖片為什么沒有變化，沒有變成150的寬度？

1 回答照片{{index}}是什么意思，并沒有做到這樣的效果

2 回答有沒有源碼啊

1 回答我的還沒有實現

1 回答我在做到5.2步驟的時候按按鈕沒有反應，視頻里面有反應 main.className += ' main-i_active';感覺這里有問題，求救

搜索更多本課相關問答

有沒有做成功的同學

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

有沒有做成功的同學

1 回答

本課相似問答

有沒有做成功的同學