源代码从哪里下载-慕课网

首页课程实战体系课手记专栏慕课教程

源代码从哪里下载

来源：2-3 基本界面样式完成

南城浅霜

2015-12-10 15:40

课程很好啊

写回答关注

7回答

lynhao

2015-12-10 16:32:55

已采纳

看具体课程，看老师老师在屏幕右下角有没有提供代码资源，建议自己手敲一遍~

0 0
qq_向右看_0

2016-05-22 10:41:33

为什么我的下面的控制按钮点击一次就少一个如果开始点击第一张图片图片轮播就切换不了呢？

0 0

xtaotao: 2015-12-26 17:09:41

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;
}

/*幻灯片区域的样式*/
.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';
}

/*控制按钮区域的样式*/
.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 当前展示的状态*/
.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)
}

0 3

南城浅霜

2015-12-10 17:47:17

部分效果没出来

0 0
南城浅霜

2015-12-10 17:47:13

部分效果没出来

0 0
echo_kinchao

2015-12-10 16:20:59

右下角哪里有资源可以下

1 0

南城浅霜

只有图片资源可以下载

2015-12-10 17:46:27

共 1 条回复 >
李晓健

2015-12-10 15:48:06

问问题前可以先搜一下有没有相同的问题，有的话就不用再问了，尤其是这些通用性的问题。

0 0

JS+CSS3实现带预览图幻灯片效果

同样的幻灯片，不一样的切换，学会实现思路，操作很简单

53759 学习 · 265 问题

查看课程

相似问题

我只想问下：源代码在哪里可以下载吗？？

回答 4

请求源代码

回答 1

源代码（说明）

回答 7

为何没有代码可以下载的代码供参考？

回答 2

为何没有代码可以下载的代码供参考？

回答 2

打开慕课网App查看更多内容