第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

<legend id="6uuyn"><track id="6uuyn"></track></legend>

<kbd id="6uuyn"><tr id="6uuyn"></tr></kbd>

<sub id="6uuyn"></sub>

^{<blockquote id="6uuyn"></blockquote>}

慕課網首頁
免費課
實戰(zhàn)課
體系課
發(fā)現(xiàn)
評價教程專欄手記
商業(yè)合作
企業(yè)服務講師入駐

                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS+CSS3實現(xiàn)帶預覽圖幻燈片效果

請幫我看下這是什么問題。跟著敲完我的網頁結構怎么亂了？

文字內容跑到上面去了，點擊按鈕圖跑到下面

weibo_火柴呵_0

2016-06-14

源自：JS+CSS3實現(xiàn)帶預覽圖幻燈片效果 3-2

關注問題我要回答

1702

操作

收起

5 回答

慕田峪8758219 回答被采納 +3 積分
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前面加個空格

0 回復有任何疑惑可以回復我~

erpangde
2016-12-08

我也遇到了樓主的問題，謝謝那位解答的同學

0 回復有任何疑惑可以回復我~

小幸運17
2016-07-26

我也遇到了樓主的問題，謝謝那位解答的同學

0 回復有任何疑惑可以回復我~

UNhandsome
2016-07-25

我也遇到了同樣的問題，謝謝那位解答的同學。謝謝了

0 回復有任何疑惑可以回復我~

weibo_火柴呵_0 提問者
2016-06-14

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

1 回復有任何疑惑可以回復我~

舉報

0/150

提交

取消

JS+CSS3實現(xiàn)帶預覽圖幻燈片效果

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

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

本課相似問答

2 回答跟著視頻敲都有問題了

1 回答求人幫檢查代碼敲了一下午的就是沒出來

1 回答我用hb來做怎么顯示結果不一樣，是不是哪里錯了

1 回答為什么我們那么多同樣的問題，

1 回答為什么我的效果不一樣，有人能幫幫我解答嗎？

搜索更多本課相關問答

請幫我看下這是什么問題。跟著敲完我的網頁結構怎么亂了？

我要回答關注問題

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

掃描二維碼
關注慕課網微信公眾號

^{<blockquote id="f64oh"></blockquote>}