我如何使用 JQuery 圖像滑塊？
[英]How I can use JQuery image slider?
問題描述
我在整理我的 jQuery 圖像滑塊時遇到了麻煩。 我不知道它有什么問題。 我正在使用responsiveslides.js （ http://responsiveslides.com/ ）`
/* RESET */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { /* Cancel out some differences between browser defaults */ margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; } * { /* Padding and borders will be subtracted from the content box width, not added to it. */ box-sizing: border-box; } article, aside, audio, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { /* Make sure the browser knows how to display HTML5 elements */ display: block; } header img{ display: block; width: 30em; margin-left: auto; margin-right: auto; padding-top: 2em; padding-bottom: 1em; } #wrap{ background-image: url(Images\\seamless-old-style-wallpaper-Download-Royalty-free-Vector-File-EPS-37757.jpg); background-repeat: repeat; background-size: cover; width: 100%; height: 100%; border: 1px; } nav { width: 40em; height: 3em; background: light grey; padding-top: 1em; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-right: auto; margin-left: auto; color: white; } nav ul { overflow: hidden; margin: 0; padding: 0; } nav ul li { list-style: none; float: left; text-align: center; color: white; width: calc(40em / 6); } nav ul li a, nav ul li a :visited { display: block; text-decoration: none; color: #white; } nav ul li a: hover { color: brown; } li a { text-decoration: none; color:#fff; } li a:visited { text-decoration: none; color:#fff; } li a:hover { text-decoration: none; color:#512e15; } li a:focus { text-decoration: none; color:#fff; } li a:hover, li a:active { text-decoration: none; color:#512e15; } footer{ display: flex; position: fixed; bottom: 0px; width: 40em; margin-left: auto; margin-right: auto; height: 3em; background-color: light grey; padding-top: 1em; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; left:0; right:0; clear: left; } p, address, #phone, #email{ color: white; padding-left: 1em; padding-right: 1em; font-size: .75em; } footer img{ height:1em; width: 2em; padding-left: 1em; } body{ display: flex; } #leftSide{ float:left; width: 32em; height: 16.5em; font-size: 1.5em; margin-left: 7em; margin-right:7em; margin-top: 1em; margin-bottom: 1.5em; overflow-y: scroll; } aside{ display: inline-flex; color: white; font-size: 2em; width: 50%; height: 100%; } #title h1{ color: white; margin-top: .25em; margin-bottom: .25em margin-left: auto; margin-right: auto; font-size: 5em; text-align: center; } iframe{ margin-top: 3em; } .rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Great Art</title> <link rel="stylesheet" href="stylesheet.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="responsiveslides.min.js"></script> </head> <body background="Images\\flock_wallpaper_pattern_by_hydrogen666.jpg"> <div id=wrap> <header> <img src="Images\\Great Art logo 2.jpg" alt="Great Art Logo"> </img> </header> <nav> <ul> <li><a href="index.html">home</a></li> <li><a href="Gallery.html">gallery</a></li> <li><a href="artist biography.html">artist biography</a></li> <li><a href="blog.html">blog page</a></li> <li><a href="about us.html">About us</a></li> <li><a href="contact us.html">contact us</a></li> </ul> </nav> <div id=main> <ul class="rslides"> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> </ul> <script> $(function () { $(".rslides").responsiveSlides(); }); </script> </div> <footer> <p> Great Art </p> <address> PO Box 12-345 Christchurch </address> <p id=phone> Phone: 03 345 6789 </p> <p id=email> Email: hubert@great-art.org.nz </p> <img src="Images\\fb-art.jpg"> <img src="Images\\twitter logo.png"> </footer> </div> </body> </html>
我已經將 .js 插入到包含文件夾中，我想不出為什么它不會運行。
2 個解決方案
解決方案1
0 2016-06-12 04:00:31
您應該在引號中包含 hte id，並且在腳本塊之后您不會關閉包含它的 div。 您應該將腳本塊移出 div 並移動到頁面底部，然后您將關閉 divb 並且它應該可以工作。 - 它應該是：
<div id= "main">
<ul class="rslides">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
</div>
//other code
<script>//code//</script>
你也錯誤地關閉了你的 img 標簽 - 當 htey 應該用於正斜杠時使用反斜杠：它應該是
<img src= "Images/fb-art.jpg" alt="facebook logo"/>
<img src= "Images/twitter logo.png" alt="twitter logo"/>
解決方案2
0 2016-06-12 06:24:16
- 我在官方 js 上進行了測試（我建議你也將它替換到你的 html 頭中）
<!-- //official jquery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- //official responsiveslides --> <script src="http://responsiveslides.com/responsiveslides.min.js?v=1.6"></script>
移動主幻燈片腳本觸發它（我添加了自動啟動器，mb 那為什么在你的代碼幻燈片中不會啟動 X），沒有分頁，沒有導航）
$(函數(){$(".rslides").responsiveSlides({ auto: true, pagination: false, nav: false, fade: 500 }); });
如何使用類型范圍輸入中的值來設置jQuery UI Slider的值？
[英]How can I use the value from an input of type range to set the value of a jQuery UI Slider?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.