个人中心
gpt4 book ai didi

javascript - 跨幻灯片事件幻灯片扩展图像

转载 作者：行者123 更新时间：2023-11-28 17:28:40 25 4
gpt4 key购买 nike

我正在为一个学校元素创建一个网站，我们被要求选择一家公司为其设计一个模拟宣传网站。我选择了 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">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</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">&bull;</li>
            <li class="dot">&bull;</li>
            <li class="dot">&bull;</li>
            <li class="dot">&bull;</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/

25 4 0
文章推荐： javascript - 整页js将下一节滑过当前
文章推荐： python - 在pygame中闪烁图像
文章推荐： python - Urwid 水平菜单 - 返回上一个状态或重新开始循环
文章推荐： python - 使用 notify-send 的 python 脚本的 crontab
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com