課程
/前端開發(fā)
/JavaScript
/JS+CSS3實現(xiàn)帶預覽圖幻燈片效果
文字內容跑到上面去了,點擊按鈕圖跑到下面
2016-06-14
源自:JS+CSS3實現(xiàn)帶預覽圖幻燈片效果 3-2
正在回答
你的245和246兩行:
main.className?+=?'main-i_active';
ctrl.className?+=?'ctrl-i_active';
應該改為
main.className?+=?' main-i_active';
ctrl.className?+=?' ctrl-i_active';
就是在main-i_active和ctrl-i_active前面加個空格
我也遇到了樓主的問題,謝謝那位解答的同學
我也遇到了同樣的問題,謝謝那位解答的同學。謝謝了
<!DOCTYPE?html> <html> ????<head> ????????<meta?charset="utf-8"> ????????<style?type="text/css"> ?????????*{margin:0;?padding:0;} ?????????body{ ?????????padding:50px?0; ?????????background-color:#fff; ?????????font-size:14px; ?????????font-family:'微軟雅黑'; ?????????color:#555; ?????????-webkit-font-smoothing:?antialiased; ?????????} ?????????.slider{ ?????????width:?100%; ?????????height:?400px; ?????????position:?relative; ?????????} ?????????/*?幻燈片區(qū)域?*/ ?????????.slider?.main{ ?????????overflow:?hidden; ?????????} ?????????/*?每個幻燈片的樣式?*/ ?????????.slider?.main?.main-i, ?????????.slider?.main, ?????????.slider{ ?????????width:?100%; ?????????height:?400px; ?????????position:?relative; ?????????} ?????????.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; ?????????} ?????????.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:?#000000; ?????????text-align:?right; ?????????} ?????????/*?控制按鈕區(qū)域?*/ ?????????.slider?.ctrl{ ?????????width:?100%; ?????????height:?13px; ?????????line-height:?13px; ?????????text-align:?center; ?????????position:?absolute; ?????????left:?0; ?????????bottom:?-13px; ?????????z-index:?1; ?????????} ?????????.slider?.ctrl?.ctrl-i{ ?????????display:?inline-block; ?????????width:?150px; ?????????height:?13px; ?????????background-color:?#666; ?????????box-shadow:?0?2px?2px?rgba(0,?0,?0,?.3); ?????????position:?relative; ?????????margin-left:?1px; ?????????z-index:?1; ?????????} ?????????.slider?.ctrl?.ctrl-i?img{ ?????????width:?100%; ?????????position:?absolute; ?????????left:?0; ?????????bottom:?50px; ?????????z-index:?1; ?????????opacity:?0; ?????????-webkit-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, ????????from(?transparent), ????????color-stop(50%,?transparent), ????????to(?rgba(255,255,255,.3)?) ????????); ????????opacity:?1; ?????????} ?????????/*?avtive?當前展現(xiàn)的狀態(tài)?*/ ?????????.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; ?????????-webkit-transition:all?.5s; ?????????} ?????????.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{ opacity:?0; ?????????-webkit-transition:all?1s?.8s; ?????????} ?????????.slider?.main?.main-i_active{ ?????????right:?0; ?????????opacity:?1; ?????????} ????????? ?????????.slider?.main?.main-i_active?h2, ?????????.slider?.main?.main-i_active?h3{ ?????????margin-right:?0px; ?????????opacity:?1; ?????????} ?????????.slider?.main?.main-i?.caption{ ??????margin-right:?13%; ????} ????????</style> ????</head> ????<body> ????<div> ????<!--?0.?修改?VIEW?->Template(關鍵字替換),增加Template?id--> ?????<div?id="template_main"> ?????<div?id="main_{{index}}"> ?????<div> ?????<h2>{{h2}}</h2> ?????<h3>{{h3}}</h3> ?????</div> ?????<img?src="imgs/{{index}}.jpg"??class="picture"> ?????</div> ?????</div> ?????<div?id="template_ctrl"> ?????<a?id="ctrl_{{index}}"?href="javascript:switchSlider({{index}});"><img?src="imgs/{{index}}.jpg"?/></a> ?????</div> ????<script?type="text/javascript"> ????//1.數(shù)據(jù)定義(實際生產環(huán)境中,應由后臺給出) ???????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:'Passionate',h2:'SEEKER'}, ????????{img:7,h1:'Crazy',h2:'FRIEND'} ????????] ????????//2.定義一個通用函數(shù) ????????var?g?=?function(id){ ?????????if(id.substr(0,1)=='.'){ ?????????return?document.getElementsByClassName(id.substr(1)); ?????????} ?????????return?document.getElementById(id); ????????} ????????//3.添加幻燈片的操作(所有幻燈片&對應的按鈕) function?addSliders(){ ????????//3.1?獲取模板 ????????var?tpl_main?=?g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,''); ????????var?tpl_ctrl?=?g('template_ctrl').innerHTML.replace(/^\s*/,'').replace(/\s*$/,''); ????????//3.2?定義最終輸出?HTML?的變量 ????????var?out_main?=?[]; ????????var?out_ctrl?=?[]; ????????//3.3?遍歷所有數(shù)據(jù),構建最終輸出的?HTML ????????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); ????????} ????????//3.4??把?HTML?回寫到對應的DOM里面 ????????g('template_main').innerHTML?=?out_main.join(''); ????????g('template_ctrl').innerHTML?=?out_ctrl.join(''); ???????} ???????//5.?幻燈片切換 ???????function?switchSlider(n){ ???????//5.1?獲得要展現(xiàn)的幻燈片操作按鈕?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'; ???????} ????????//4.定義何時處理幻燈片輸出 ????????window.onload?=?function(){ ?????????addSliders(); ?????????switchSlider(1); ????????} ?????</script> ?????</div> ????</body> </html>
舉報
同樣的幻燈片,不一樣的切換,學會實現(xiàn)思路,操作很簡單
2 回答跟著視頻敲都有問題了
1 回答求人幫檢查代碼 敲了一下午的 就是沒出來
1 回答我用hb來做怎么顯示結果不一樣,是不是哪里錯了
1 回答為什么我們那么多同樣的問題,
1 回答為什么我的效果不一樣,有人能幫幫我解答嗎?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-06-26
你的245和246兩行:
main.className?+=?'main-i_active';
ctrl.className?+=?'ctrl-i_active';
應該改為
main.className?+=?' main-i_active';
ctrl.className?+=?' ctrl-i_active';
就是在main-i_active和ctrl-i_active前面加個空格
2016-12-08
我也遇到了樓主的問題,謝謝那位解答的同學
2016-07-26
我也遇到了樓主的問題,謝謝那位解答的同學
2016-07-25
我也遇到了同樣的問題,謝謝那位解答的同學。謝謝了
2016-06-14