日韩中文字幕有码无码视频,美女被强奷到抽搐的动态图

技術(shù)頻道 - js技術(shù)

jQuery創(chuàng)建滑動(dòng)幻燈片

作者:admin 時(shí)間:2021-7-27 22:50:33 瀏覽:

在本教程中，我將使用簡(jiǎn)單的 HTML 和 CSS 來(lái)創(chuàng)建幻燈片，其中將使用 jQuery 庫(kù)創(chuàng)建滑動(dòng)功能。我還將使用兩個(gè)流行的插件，即：LocalScroll 和 ScrollTo，用于在 javasrcipt 幻燈片中提供底層效果。雖然前一個(gè)插件允許錨點(diǎn)根據(jù)目標(biāo) ID 將幻燈片跳轉(zhuǎn)到準(zhǔn)確的幻燈片，但后一個(gè)插件提供了出色的滑動(dòng)功能，可以轉(zhuǎn)換幻燈片而不是簡(jiǎn)單地從一個(gè)跳轉(zhuǎn)到另一個(gè)。

jQuery創(chuàng)建滑動(dòng)幻燈片

demo download

下面是幻燈片的 HTML 結(jié)構(gòu)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>jQuery Sliding</title>
  <link rel="stylesheet" href="css/style.css" type="text/css" />
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="js/jquery.scrollTo.js"></script>
  <script src="js/jquery.localscroll.js"></script>
  <script src="js/custom-scripts.js"></script>
</head>
<body>
  <div id="slideshow">
    <!-- List of slider images -->
    <ul>
      <li id="slide1"><img src="images/slide1.jpg" alt="Slide 1" /></li>
      <li id="slide2"><img src="images/slide2.jpg" alt="Slide 2" /></li>
      <li id="slide3"><img src="images/slide3.jpg" alt="Slide 3" /></li>
      <li id="slide4"><img src="images/slide4.jpg" alt="Slide 4" /></li>
      <li id="slide5"><img src="images/slide5.jpg" alt="Slide 5" /></li>
    </ul>
  </div>
  <div id="slideshow-nav">
    <!-- Navigation list of slider images -->
    <ul>
      <li><a href="#slide1">Slide 1</a></li>
      <li><a href="#slide2">Slide 2</a></li>
      <li><a href="#slide3">Slide 3</a></li>
      <li><a href="#slide4">Slide 4</a></li>
      <li><a href="#slide5">Slide 5</a></li>
    </ul>
  </div>
</body>
</html>

仔細(xì)觀察上面的代碼，你會(huì)發(fā)現(xiàn)演示頁(yè)面的 HTML 以 Doctype、標(biāo)題和指向 CSS 樣式表的鏈接開(kāi)頭。在此之后，兩個(gè)插件（上面已經(jīng)解釋過(guò)）、jQuery 庫(kù)和空的 scripts.js 文件可以鏈接在一起，以使幻燈片放映和工作。

形成幻燈片的 HTML 已分為兩部分，即：一個(gè)帶有幻燈片 ID 的 div 和另一個(gè)帶有幻燈片導(dǎo)航 ID 的 div。在這里，重要的是要注意幻燈片 div 將包含一個(gè)鏈接圖像的無(wú)序列表，帶有與幻燈片導(dǎo)航錨點(diǎn)對(duì)應(yīng)的 ID 的 <li> 標(biāo)簽。

現(xiàn)在，讓我們來(lái)看看 CSS 樣式（css/style.css）：

#slideshow {/*slider container css*/
  width: 800px;
  height: 400px;
  overflow: hidden;
  margin: 50px auto 50px auto;
  box-shadow: 0px 0px 50px #333;
  -moz-box-shadow: 0px 0px 50px #333;
  -webkit-box-shadow: 0px 0px 50px #333;
}
#slideshow ul {/*manage slider scroll elements css*/
  width: 4000px;
  list-style: none;
}
#slideshow ul li {
  float: left;
}

上面的 CSS 將每個(gè)頁(yè)面的樣式設(shè)置為更像幻燈片。首先將幻燈片的高度和寬度設(shè)置為與圖像幻燈片的尺寸完全相似的尺寸。每張幻燈片并排浮動(dòng)，無(wú)序列表的總寬度縮放到 4590px。此外，我使用了溢出屬性來(lái)防止多個(gè)圖像在整個(gè)頁(yè)面上運(yùn)行。在這里，你只需將溢出屬性設(shè)置為溢出：滾動(dòng)；即使在缺少 Javascript 的情況下也能制作幻燈片。

接下來(lái)，使用 CSS3-box shadow 添加一個(gè)很酷的陰影，如下所示：

#slideshow-nav {/* Slider navigation container css */
  width: 150px;
  margin: 0 auto 100px auto;
}
#slideshow-nav ul {
  list-style: none;
}
#slideshow-nav ul li {
  float: left;
}
#slideshow-nav ul li a {/* navigation styling css */
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  margin: 0 5px;
  background: #fff;
  text-indent: -9999px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  box-shadow: 0px 0px 30px #000;
  -webkit-box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
/* hover and active navigation css */
  background: #333;
}

在這里，如果你仔細(xì)觀察，幻燈片導(dǎo)航 div 正在移動(dòng)到主幻燈片部分下方的位置。此外，我們不希望多個(gè)按鈕在啟用 Javascript 的情況下不起作用。你可以使用visibility: hidden; 用于在默認(rèn)情況下隱藏這些按鈕，使它們?cè)谝院蟮臅r(shí)間點(diǎn)可見(jiàn)。你可能還想知道，在 CSS3 邊框半徑的幫助下，每個(gè)導(dǎo)航列表的錨點(diǎn)都被轉(zhuǎn)換為圓形按鈕，默認(rèn)文本使用負(fù)文本縮進(jìn)移出屏幕。

到目前為止，即使沒(méi)有 Javascript，幻燈片在其工作狀態(tài)下也是可見(jiàn)的。只有一個(gè)滾動(dòng)條允許用戶在多個(gè)圖像之間來(lái)回移動(dòng)。

最后，讓我們看看jQuery的功能（js/custom-scripts.js）：

$(document).ready(function() {
  var slider = $("#slideshow");
  var slider_nav = $("#slideshow-nav");
  slider_nav.find("a[href=#slide1]").addClass("active");
  slider_nav.localScroll({
    target:'#slideshow',
    axis: 'x'
  });
  slider_nav.find("a").click(function(){
    slider_nav.find("a").removeClass("active");
    $(this).addClass("active");
  });
});

如果你查看上面的代碼，你會(huì)發(fā)現(xiàn)幻燈片 div 的 CSS 已經(jīng)從 overflow: scroll; 改成了overflow; hidden;。在此之后，導(dǎo)航按鈕的可見(jiàn)性已設(shè)置為可見(jiàn)，并自動(dòng)將“active”類添加到第一個(gè)按鈕。兩個(gè)插件，即：LocalScroll 和 ScrollTo 現(xiàn)在都被激活，localScroll 功能被應(yīng)用于幻燈片導(dǎo)航項(xiàng)目，通過(guò)簡(jiǎn)單地沿 X 軸移動(dòng)來(lái)引導(dǎo)它們定位幻燈片項(xiàng)目。

最后，為了確?；脽羝械乃邪粹o都以其相關(guān)的active類（無(wú)論何時(shí)點(diǎn)擊）亮起，我們將使用一個(gè)簡(jiǎn)單的 jQuery 規(guī)則，從不同的按鈕中刪除active類。這個(gè)特定的active類將出現(xiàn)在 CSS 樣式表中，用于為相應(yīng)的按鈕呈現(xiàn)灰色背景。在瀏覽器中運(yùn)行快速測(cè)試將顯示以最佳方式工作的整個(gè) javascript 幻燈片。

結(jié)論

這就是創(chuàng)建一個(gè)引人注目的 Javascript 幻燈片，它可以為你沉悶乏味的網(wǎng)頁(yè)添加大量的視覺(jué)吸引力和優(yōu)雅。