|
|
|
|
|
|
jQuery創(chuàng)建滑動幻燈片
作者:admin 時間:2021-7-27 22:50:33 瀏覽:在本教程中，我將使用簡單的 HTML 和 CSS 來創(chuàng)建幻燈片，其中將使用 jQuery 庫創(chuàng)建滑動功能。我還將使用兩個流行的插件，即：LocalScroll 和 ScrollTo，用于在 javasrcipt 幻燈片中提供底層效果。雖然前一個插件允許錨點根據目標 ID 將幻燈片跳轉到準確的幻燈片，但后一個插件提供了出色的滑動功能，可以轉換幻燈片而不是簡單地從一個跳轉到另一個。
jQuery創(chuàng)建滑動幻燈片
下面是幻燈片的 HTML 結構：
<!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>
仔細觀察上面的代碼，你會發(fā)現演示頁面的 HTML 以 Doctype、標題和指向 CSS 樣式表的鏈接開頭。在此之后，兩個插件（上面已經解釋過）、jQuery 庫和空的 scripts.js 文件可以鏈接在一起，以使幻燈片放映和工作。
形成幻燈片的 HTML 已分為兩部分，即：一個帶有幻燈片 ID 的 div 和另一個帶有幻燈片導航 ID 的 div。在這里，重要的是要注意幻燈片 div 將包含一個鏈接圖像的無序列表，帶有與幻燈片導航錨點對應的 ID 的 <li> 標簽。
現在，讓我們來看看 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 將每個頁面的樣式設置為更像幻燈片。首先將幻燈片的高度和寬度設置為與圖像幻燈片的尺寸完全相似的尺寸。每張幻燈片并排浮動，無序列表的總寬度縮放到 4590px。此外，我使用了溢出屬性來防止多個圖像在整個頁面上運行。在這里，你只需將溢出屬性設置為溢出：滾動；即使在缺少 Javascript 的情況下也能制作幻燈片。
接下來，使用 CSS3-box shadow 添加一個很酷的陰影，如下所示：
#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;
}在這里，如果你仔細觀察，幻燈片導航 div 正在移動到主幻燈片部分下方的位置。此外，我們不希望多個按鈕在啟用 Javascript 的情況下不起作用。你可以使用visibility: hidden; 用于在默認情況下隱藏這些按鈕，使它們在以后的時間點可見。你可能還想知道，在 CSS3 邊框半徑的幫助下，每個導航列表的錨點都被轉換為圓形按鈕，默認文本使用負文本縮進移出屏幕。
到目前為止，即使沒有 Javascript，幻燈片在其工作狀態(tài)下也是可見的。只有一個滾動條允許用戶在多個圖像之間來回移動。
最后，讓我們看看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");
});
});如果你查看上面的代碼，你會發(fā)現幻燈片 div 的 CSS 已經從 overflow: scroll; 改成了overflow; hidden;。在此之后，導航按鈕的可見性已設置為可見，并自動將“active”類添加到第一個按鈕。兩個插件，即：LocalScroll 和 ScrollTo 現在都被激活，localScroll 功能被應用于幻燈片導航項目，通過簡單地沿 X 軸移動來引導它們定位幻燈片項目。
最后，為了確?；脽羝械乃邪粹o都以其相關的active類（無論何時點擊）亮起，我們將使用一個簡單的 jQuery 規(guī)則，從不同的按鈕中刪除active類。這個特定的active類將出現在 CSS 樣式表中，用于為相應的按鈕呈現灰色背景。在瀏覽器中運行快速測試將顯示以最佳方式工作的整個 javascript 幻燈片。
結論
這就是創(chuàng)建一個引人注目的 Javascript 幻燈片，它可以為你沉悶乏味的網頁添加大量的視覺吸引力和優(yōu)雅。
- 站長推薦
