Javascript学习笔记5 - 滑动Slides

开始之前：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;}