1
我正在为一个学校项目创建一个网站，我们被要求选择一家公司为其设计一个模拟宣传网站。我选择了CVS，但你可以选择任何人。我设法使用了一个我已经完成了一些codecamdemy类的模板，但是这些教程在改变图像长度方面似乎没有帮助。我想要做的是在整个幻灯片容器的整个长度上扩展名为“nyse”，“导师”和“山”的图像，但到目前为止，当我改变它时，图像似乎没有做任何事情。任何人都可以告诉我它在哪里出错或在哪里放置我的代码来扩展图像？我已经尝试了很多div，但迄今为止没有运气。我的代码如下。在幻灯片上扩展图像活动幻灯片
HTML
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="img/cvs.png">
</a>
<div class="headerNi">
<div class="container">
<a href="#" class="logo-icon">
<p><a href title="Click this link to view the scheme.">NIDC Graduate Scheme</a></p>
</a>
<div id ="headerMission">CVS Health's Northern Ireland Development Centre, which opened in 2012,<br>
creates software solutions for all parts of the US company,<br>
with particular focus on internet and mobile applications.</div></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Curriculum</a></li>
<li><a href="#">Staff Profiles</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Register</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">More <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Graduate Scheme</a></li>
<li><a href="#">What we look for</a></li>
<li><a href="#">Links</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="slider">
<div id="nyse-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>CVS is now hiring</h1>
<p>We will soon have a nice new building.</p>
<ul class="get-app">
<li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></a></li>
<li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></a></li>
<li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></a></li>
<li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></a></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="img/nyse.jpg" width="540px">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<a href="#">Accountability</a>
<p>Take responsibility for your actions.</p>
</div>
</div>
</div>
</div>
<div id="mountain-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Collaboration</h1>
<p>At CVS, it's important to work together with your mentor!</p>
</div>
<div class="slide-img col-xs-7">
<img src="img/mountain.png">
</div>
</div>
</div>
</div>
<div id="pharm-slide" class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Tenacity</h1>
<p>Be determined.</p>
<ul class="get-app">
<li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></a></li>
<li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></a></li>
<li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></a></li>
<li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></a></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="img/pharm.jpg" width="540px">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS
.container {
width: 960px;
color: gray;
}
/* 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%;
}
.slide {
text-align: center;
height: 550px;
}
#nyce-slide{
background-image: url('nsce.jpg');
}
#pharm-slide-feature{
background-image: url('pharm.jpg');
}
#mountain-slide-feature{
background-image: url('mountain.jpg');
}
.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://devonsstudio.com/businesspeople.png');
height: 550px;
}
.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;
}
.slide-feature p {
color: red;
}
.slider-nav {
text-align: center;
margin-top: 80px;
}
.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;
}
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://devonsstudio.com/businesspeople.png');
height: 550px;
}
.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;
}
.slide-feature p {
color: red;
}
.slider-nav {
text-align: center;
margin-top: 80px;
}
.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;
}
JAVASCRIPT
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function(e) {
e.preventDefault();
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if(nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function(e) {
e.preventDefault();
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if(prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
}
$(document).ready(main);
当你说“扩展图像的整个容器的宽度”？你到底什么意思？当您点击$（'。arrow-next'）链接时，您希望它如何操作？ – CodeGodie 2014-10-28 13:38:42
您是否看到问责性部分中的图像如何扩展导航滑块的整个大小？我基本上想要扩展其他图像来做同样的事情。 – Rory 2014-10-28 13:48:47
好吧，我更新了我的答案。请检查一下。 – CodeGodie 2014-10-28 14:11:43