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

<blockquote id="jzolj"></blockquote>

<em id="jzolj"></em>

<menuitem id="jzolj"><sup id="jzolj"></sup></menuitem>

<ol id="jzolj"></ol>

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

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

源代碼從哪里下載

課程很好啊

南城淺霜

2015-12-10

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

關(guān)注問題我要回答

1698

操作

收起

7 回答

lynhao 回答被采納 +3 積分
2015-12-10

看具體課程，看老師老師在屏幕右下角有沒有提供代碼資源，建議自己手敲一遍~

0 回復(fù) 有任何疑惑可以回復(fù)我~

qq_向右看_0
2016-05-22

為什么我的下面的控制按鈕點(diǎn)擊一次就少一個(gè) ?如果開始點(diǎn)擊第一張圖片 ?圖片輪播就切換不了呢？

0 回復(fù) 有任何疑惑可以回復(fù)我~

xtaotao
2015-12-26

html

<html>
<head>
	<title>img?slider</title>
	<meta?charset="utf8"/>?
	<link?href="style.css"?rel="stylesheet"?type="text/css"/>
</head>	

<body>
<div?class="slider">
	<div?class="main"?id="template_main">
		<div?class="main-i?{{css}}"?id="main_{{index}}">
			<img?src="img/{{index}}.jpg"/?class="picture">
			<div?class="caption">
				<h2>{{h2}}</h2>
				<h3>{{h3}}</h3>
			</div>
		</div>
	</div>
	<div?class="ctrl"?id="template_ctrl">
		<a?class="ctrl-i"?href="javascript:switchSlider({{index}});"?id="ctrl_{{index}}">
				<img?src="img/{{index}}.jpg"/>
		</a>
	</div>	
</div>
<script?src="script.js"></script>
</body>	
</html>

css

*{
	padding:0px;
	margin:0px;
}

body{
	padding:50px?0px;
	background-color:?#fff;
	font-family:"Avenir?Next";
	font-size:14px;
	color:#555;
	-webkit-font-smoothing:antialiased;
}

.slider?.main?.main-i,
.slider?.main,
.slider{
	width:100%;
	height:400px;
	position:relative;
}

/*幻燈片區(qū)域的樣式*/
.slider?.main{
	overflow:?hidden;
}

.slider?.main?.main-i{}

.slider?.main?.main-i?img{
	width:100%;
	position:absolute;
	top:50%;
	left:0px;
}

.slider?.main?.main-i?.caption{
	position:absolute;
	right:60%;
	top:30%;
}

.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:?55px;
	line-height:?60px;
	color:?#000000;
	text-align:?right;
	font-family:?'Andale?Mono?Regular';
}

/*控制按鈕區(qū)域的樣式*/
.slider?.ctrl{
	width:100%;
	height:13px;
	position:absolute;
	bottom:-13px;
	left:0px;
	text-align:center;
	line-height:?13px;
}

.slider?.ctrl?.ctrl-i{
	position:relative;
	display:?inline-block;
	width:150px;
	height:13px;
	background-color:?#666;
	box-shadow:0?1px?1px?rgba(0,0,0,0.3);
	margin-left:1px;
}

.slider?.ctrl?.ctrl-i?img{
	width:100%;
	position:absolute;
	bottom:50px;
	left:0px;
	opacity:?0;
	z-index:?-1;
	-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,0.3)?)
	);
	opacity:?1;
	z-index:?0;
}


/*active?當(dāng)前展示的狀態(tài)*/
.slider?.ctrl?.ctrl-i-active:hover,
.slider?.ctrl?.ctrl-i-active{
	background-color:?#000;
}

.slider?.ctrl?.ctrl-i-active:hover?img{
	z-index:-1;
	opacity:?0;
}

/*幻燈片切換*/
.slider?.main?.main-i-right,
.slider?.main?.main-i{
	position:absolute;
	left:-50%;
	top:0;
	opacity:?0;
	-webkit-transition:all?.5s;
}

.slider?.main?.main-i-right{
	left:50%;
}


.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?.5s;
}

#main_background,
.slider?.main?.main-i-active{
	left:0%;
	opacity:?1;
}

#main_background{
	z-index:-1;
}

.slider?.main?.main-i-active?.caption{
	margin-right:?5%;
}

.slider?.main?.main-i-active?h2,
.slider?.main?.main-i-active?h3{
	opacity:?1;
	margin-right:?0px;
}

javascript

var?data=[
	{img:'1',h2:'Creative',h3:'DUET'},
	{img:'2',h2:'Friendly',h3:'DEVIL'},
	{img:'3',h2:'Tranqilent',h3:'COMPATRIOT'},
	{img:'4',h2:'Insecure',h3:'HUSSLER'},
	{img:'5',h2:'Loving',h3:'REBEL'},
	{img:'6',h2:'Passionate',h3:'SEEKER'},
	{img:'7',h2:'Crazy',h3:'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].h2).replace(/{{h3}}/g,data[i].h3).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(/{{h2}}/g,data[i].h2).replace(/{{h3}}/g,data[i].h3)
	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(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','')
	}

	main.className+='?main-i-active'
	ctrl.className+='?ctrl-i-active'

	setTimeout(function(){
		background=g('main_background')
		background.innerHTML=main.innerHTML
	},1000)
}

function?movePicture(){
	var?picture=g('.picture')

	for?(var?i=0?;i<picture.length;i++){
		picture[i].style.marginTop=(-1*?picture[i].clientHeight/2)+'px'?
	}
}

window.onload=function(){
	addSliders()
	switchSlider(1)
	setTimeout(movePicture,100)
}

3 回復(fù) 有任何疑惑可以回復(fù)我~

南城淺霜提問者
2015-12-10

部分效果沒出來

0 回復(fù) 有任何疑惑可以回復(fù)我~

南城淺霜提問者
2015-12-10

部分效果沒出來

0 回復(fù) 有任何疑惑可以回復(fù)我~

echo_kinchao
2015-12-10

右下角哪里有資源可以下

0 回復(fù) 有任何疑惑可以回復(fù)我~

#1

南城淺霜提問者

只有圖片資源可以下載

2015-12-10 回復(fù) 有任何疑惑可以回復(fù)我~

李曉健
2015-12-10

問問題前可以先搜一下有沒有相同的問題，有的話就不用再問了，尤其是這些通用性的問題。

0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150

提交

取消

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

參與學(xué)習(xí) 53755 人
解答問題 276 個(gè)

同樣的幻燈片，不一樣的切換，學(xué)會(huì)實(shí)現(xiàn)思路，操作很簡(jiǎn)單

進(jìn)入課程

本課相似問答

4 回答我只想問下：源代碼在哪里可以下載嗎？？

1 回答不知道素材從哪里下載

1 回答想要源代碼

7 回答源代碼（說明）

1 回答請(qǐng)求源代碼

搜索更多本課相關(guān)問答

源代碼從哪里下載

我要回答關(guān)注問題

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

<tr id="73yph"></tr>

<tr id="73yph"></tr>

<pre id="73yph"><fieldset id="73yph"></fieldset></pre>