Javascript学习笔记5 - 滑动Slides

2 mins to read Hugo Author posts

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


Published At