我正在为一个学校元素创建一个网站，我们被要求选择一家公司为其设计一个模拟宣传网站。我选择了 CVS，但你可以选择任何人。我设法使用了一个模板，我已经完成了一些 codecamdemy 类(class)，但教程似乎对更改图像的长度没有帮助。我想要做的是将名为“nyse”、“mentor”和“mountain”的图像扩展到整个幻灯片容器的长度，但到目前为止，当我更改它时，图像似乎没有做任何事情。谁能告诉我哪里出了问题或在哪里放置我的代码来扩展图像？我已经尝试了很多 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);
最佳答案
这是一个 DEMO FIDDLE (您只需要将您的图片 URLS 添加到 CSS)
您需要做的第一件事是添加 e.preventDefault();你的点击事件是这样的:
$('.arrow-next').click(function(e) {
e.preventDefault();
//..more code
});
$('.arrow-prev').click(function(e) {
e.preventDefault();
//..more code
});
然后你需要给每张幻灯片一个唯一的 ID 并给它一个图像的背景，就像你有一个 .slide-feature 的背景一样:
HTML:
<div id="nyce-slide" class="slide">
<!-- ...code.. -->
</div>
<div id="mountain-slide" class="slide">
<!-- ...code.. -->
</div>
<div id="mentor-slide" class="slide">
<!-- ...code.. -->
</div>
CSS:
.slide {
text-align: center;
height: 550px;
}
#nyce-slide{
background-image: url('nyce.jpg');
}
#mentor-slide{
background-image: url('mentor.jpg');
}
#mountain-slide{
background-image: url('mountain.jpg');
}
这是最后的编辑:
<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 class="slider">
<div id="nyce-slide" class="slide active-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>
</div>
</div>
<div id="accountability-slide" class="slide">
<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>
</div>
</div>
<div id="mentor-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>
</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>
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);
</script>
</body>
关于javascript - 跨幻灯片事件幻灯片扩展图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26609637/