jquery - 如何使用 jQuery 脚本为我的网站创建幻灯片？

标签 jquery html css

<分区>

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 8 年前。

Improve this question

我正在尝试创建这样的幻灯片 site

首先:我正在使用 Kompozer。我的网站尚未上线，因为我仍在努力将其整合到我的电脑中。为了更好地理解，这是我所有网站文件在计算机中的存储路径 (C:\Documents\Website)

根据本站成员(member)的建议，我已经在 jquery.com 下载了最新版本的 jQuery 并将其安装在我的电脑中 (C:\Users\Documents\Website\jQuery)

现在进入正题。 我已经在我的网站正文中安装了 jQuery 和 $carousel 脚本，您可以在此处看到(第 69 行):http://jsfiddle.net/e2hsgh65/ 

<html> <head> <title>template</title> <style type="text/css"> #headers {
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  position: static;
  text-transform: none;
  font-size: small;
  border-top-style: none;
  border-left-color: #eaeaea;
  max-width: 100%;
  font-weight: bolder;
  min-width: 100%;
  text-decoration: none;
  border-left-width: 1387px;
  background-color: #727272;
  line-height: 200%;
  min-height: 40px;
  font-style: normal;
  border-bottom-style: solid;
  max-height: 40px;
  font-family: Arial, Helvetica, sans-serif;
  display: block;
  color: #eaeaea;
  border-right-style: none;
}
#left,
#right {
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  position: relative;
  width: 50%;
}
#left {
  float: left;
  display: block;
  position: relative;
}
#right {
  float: right;
  display: block;
  position: relative;
}
#footers {
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  background-color: #727272;
  line-height: 300%;
  border-bottom-style: none;
  font-style: normal;
  font-size: small;
  max-width: 100%;
  min-width: 100%;
  border-top-color: #eaeaea;
  position: relative;
  text-transform: none;
  display: block;
  border-top-style: groove;
  color: #eaeaea;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  border-left-style: none;
  max-height: 200px;
  min-height: 200px;
}
#menus {
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  line-height: 200%;
  max-width: 100%;
  max-height: 80px;
  display: block;
  font-weight: normal;
  font-size: medium;
  position: static;
  text-transform: capitalize;
  text-decoration: none;
  color: #666666;
  padding-top: 10pt;
}
#navigations {
  border-style: none none inset;
  border-bottom: 3px inset #515151;
  overflow: hidden;
  color: #666666;
  font-style: normal;
  max-height: 100px;
  position: static;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 200%;
  display: block;
  font-size: medium;
  font-weight: normal;
  text-decoration: none;
  max-width: 100%;
  padding-top: 10pt;
  text-transform: capitalize;
}
#bottom_footer {
  margin: 0 auto;
  border-top-color: #bababa;
  border-top-style: solid;
  font-family: "Times New Roman", Times, serif;
  border-right-style: none;
  font-style: normal;
  max-height: 50px;
  border-bottom-style: none;
  min-width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: medium;
  max-width: 100%;
  position: absolute;
  line-height: 300%;
  color: #f0f0f0;
  text-transform: capitalize;
  background-color: #898989;
  min-height: 50px;
  display: block;
  text-decoration: none;
}
#h2 {
  line-height: 300%;
}
#h1 {
  overflow: hidden;
  display: table-header-group;
  position: relative;
  line-height: 300%;
}
#m2 {
  overflow: hidden;
  line-height: 400%;
  display: block;
  position: relative;
}
#wrap {
  margin: 0 auto;
  width: 1156px;
}
ul {
  margin: 0;
  padding: 0;
  float: left;
  width: 100%;
  list-style-type: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  color: #cccccc;
  text-decoration: none;
}
a {
  border-style: outset double none;
  border-top: 1px outset silver;
  border-left: 1px double silver;
  border-right: 1px double #f4f4f4;
  padding: 0.2em 0.6em;
  width: 6.7em;
  color: #4b4b4b;
  font-weight: normal;
  background-color: #e3e6e6;
  text-decoration: none;
  text-transform: capitalize;
  line-height: 200%;
  text-align: center;
  font-style: normal;
  float: left;
  font-family: Arial, Helvetica, sans-serif;
}
a:hover {
  background-color: #83c5c5;
}
li {
  display: inline;
}
#slidecontainer {
  overflow: hidden;
  max-width: 100%;
  min-width: 100%;
  position: relative;
}
</style> </head>
<div id="slidecontainer">
  <script src="jquery-1.11.2.min.js"></script>
  <script>
    $('.carousel').carousel({
      interval: 3000
    })
  </script>
  <div id="Mycarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img style="width: 1156px; height: 303px;" src="http://placehold.it/1200x315" alt="">
        <div class="carousel-caption">

          <h3>Caption Text</h3>

        </div>
      </div>
      <div class="item">
        <img style="width: 1156px; height: 303px;" src="http://placehold.it/1200x315" alt="">
        <div class="carousel-caption">

          <h3>Caption Text</h3>

        </div>
      </div>
      <div class="item">
        <img style="width: 1156px; height: 303px;" src="http://placehold.it/1200x315" alt="">
        <div class="carousel-caption">

          <h3>Caption Text</h3>

        </div>
      </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> 
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> 
    </a>
  </div>
  <!-- Carousel -->
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</div>
<div id="store_content">
  <div id="left_st">
    <div id="category">category left</div>
  </div>
  <div id="right_st">
    <div id="products">products left</div>
  </div>
</div>
<div id="footers">
  <div style="text-align: center;"></div>
  <div id="left">
    <div style="text-align: center;"></div>
    <div style="text-align: left;" id="f1">SERVICE
      <br>Contact Us
      <br>Blog
      <br>FAQ's
      <br>Customer Rewards Program</div>
  </div>
  <div id="right">
    <div style="text-align: center;"></div>
    <div style="text-align: right;" id="f2">ABOUT MEB ZONE
      <br>Terms Of Service
      <br>Return Policy
      <br>Privacy Policy
      <br>Company Information</div>
  </div>
</div>
<div id="bottom_footer">
  <div style="text-align: center;">Copyright © 2015 Meb Zone.com All rights Reserved.
    <br>
  </div>
</div>
</body>

</html>

脚本根本不起作用...有什么想法吗？

最佳答案

它是一个 bootstrap carousel你可以像这样使用它，

<div id="myCarousel" class="carousel slide">
   <!-- Carousel indicators -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>   
   <!-- Carousel items -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="/bootstrap/images/slide1.png" alt="First slide">
      </div>
      <div class="item">
         <img src="/bootstrap/images/slide2.png" alt="Second slide">
      </div>
      <div class="item">
         <img src="/bootstrap/images/slide3.png" alt="Third slide">
      </div>
   </div>
   <!-- Carousel nav -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>
</div>

另请参阅 link在此插件中获得更多选项

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
      <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
        <li data-slide-to="1" data-target="#carousel-example-generic" class=""></li>
        <li data-slide-to="2" data-target="#carousel-example-generic" class=""></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img alt="First slide" data-src="holder.js/900x500/auto/#777:#555/text:First slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+">
        </div>
        <div class="item">
          <img alt="Second slide" data-src="holder.js/900x500/auto/#666:#444/text:Second slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==">
        </div>
        <div class="item">
          <img alt="Third slide" data-src="holder.js/900x500/auto/#555:#333/text:Third slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojMzMzO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+VGhpcmQgc2xpZGU8L3RleHQ+PC9zdmc+">
        </div>
      </div>
      <a data-slide="prev" href="#carousel-example-generic" class="left carousel-control">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a data-slide="next" href="#carousel-example-generic" class="right carousel-control">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>ata-slide="next">&rsaquo;</a>
</div>

关于jquery - 如何使用 jQuery 脚本为我的网站创建幻灯片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27701037/

上一篇：html - 对于超过一页的内容，页脚保留在屏幕底部位于顶部滚动的位置

下一篇：javascript - 如何更改数据表上的组件id

相关文章：

jQuery 找不到动态添加的 DOM 对象？

jquery - 如何使用jquery触发双击

javascript - 单击按钮刷新另一个网址

javascript - 登录后查看 HTML 内容

html - 如何做到这一点 : Need to use break-all and line should break on hyphen?

css - 使用百分比属性调整图像大小

javascript - Firebase - 将文件放在多个目录中

javascript - 如何使用 slider 更改 HTML5 音频音量或轨道位置？

html - 带有网格模板区域的网格布局

JQuery:$(window).resize() 不起作用

©2024 IT工具网  联系我们