开始之前:http://docs.jquery.com/ 是jQuery文档的网站, https://jsfiddle.net/是js的在线验证工具
在html中,有这几个标签:
javascript、jQuery代码:
var main = function(){
$('.dropdown-toggle').click(function(){
//$('.dropdown-menu').slideDown();
$('.dropdown-menu').toggle();
});
// Click Slides -- Show next slide
$('.arrow-next').click(function(){//select
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
if (nextSlide.length ===0)
nextSlide = $('.slide').first();
currentSlide.fadeOut(600);
nextSlide.fadeIn(600);
currentSlide.removeClass('active-slide');//注意这里没有"."
nextSlide.addClass('active-slide');
//让点点的颜色跟随变化
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextDot.length === 0)
nextDot = $('.dot').first();
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
// Click Slides -- show previous slide
$('.arrow-prev').click(function(){//select
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
if (prevSlide.length === 0)
prevSlide = $('.slide').last();
currentSlide.fadeOut(600);
prevSlide.fadeIn(600);
currentSlide.removeClass('active-slide');//注意这里没有"."
prevSlide.addClass('active-slide');
//让点点的颜色跟随变化
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevDot.length === 0)
prevDot = $('.dot').last();
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
}
$(document).ready(main);
CSS代码:
/* General */
.container {
width: 960px;
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 15px;
}
/* Menu */
.header .menu {
float: right;
list-style: none;
margin-top: 5px;
}
.menu > li {
display: inline;
padding-left: 20px;
padding-right: 20px;
}
.menu a {
color: #898989;
}
/* Dropdown */
.dropdown-menu {
font-size: 16px;
margin-top: 5px;
min-width: 105px;
}
.dropdown-menu li a {
color: #898989;
padding: 6px 20px;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/* App links */
.get-app {
list-style: none;
padding-bottom: 9px;
padding-left: 0px;
padding-top: 9px;
}
.get-app li {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
.get-app img {
height: 40px;
}