Jquery Slider在我的第一个网站上没有工作？
几个小时前我开始创建我的第一个网站（目前还不完整）并且偶然发现了这个问题。我的jquery滑块不起作用，但滑块的所有三个图像都出现在我的网站上。我已经检查了链接rel目录路径并更改了几次，但它仍然无法正常工作。希望你们能帮忙。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
});
$('.slider2').bxSlider({
pager:false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
controls:false,
});/**Here is the html(Main.html):** **Here is the css(styles.css):**/
@import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--- Navigation --*/
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #FEFBEF;
background-color: white;
}
.clearfix {
clear: both;
}
#wrapper {
margin: 0 auto;
max-width: 1120px;
background: #FEFBEF;
overflow: auto;
background-color: black;
}
#main_header {
width: 100%;
border: 1px solid black;
font-family: 'Black Ops One', sans-serif;
background-color: black;
color: white;
}
#main_header h1 {
float: left;
font-size: 380%;
margin: -10% 0 0 2%;
}
#callout {
margin: 50px 20px 0 0;
}
#callout h2 {
text-align: right;
color: white;
}
#callout p {
text-align: right;
padding: 0%;
color: grey;
font-size: 20px;
margin-bottom: 3px;
}
#nav_menu {
width: 100%;
height: 10%;
background-color: white;
}
#nav_menu li {
display: inline-block;
margin: 20px 20px 20px 63px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
#nav_menu li a {
text-decoration: none;
color: black;
}
/*--- Start Image Slider --*/
.slider {
max-width: 1020px;
box-shadow: 1% 2% 5% 0 rgba(0, 0, 0, 0.07);
}
.slider1 img {
width: 100%;
margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a {
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a {
z-index: 5;
}
.slider .bx-wrapper .bx-prev {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/left-arrow.png") no-repeat 8px 13px;
left: 0px;
}
.slider .bx-wrapper .bx-prev:hover {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/left-arrow.png") no-repeat 8px 18px;
}
.slider .bx-wrapper .bx-next {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/right-arrow.png") no-repeat 10px 12px;
right: 0px;
}
.slider .bx-wrapper .bx-next:hover {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/right- arrow.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third {
width: 28%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
border: 1px solid black;
height: 50%;
background-color: white;
}
footer {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
height: 6%;
background-color: white;
overflow: auto;
}
footer p {
margin-top: 1%;
}
/* **here is another css(jquery.bxslider.css):** */
.bx-wrapper {
max-width: 1020px;
position: relative;
padding: 0;
*zoom: 1;
}
.bx-wrapper img {
max-width: 1020px;
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
left: 0px;
background: #fff;
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
max-width: 1020px;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url("img/bx_loader.gif") center center no-repeat #fff;
height: 100%;
max-width: 1020px;
;
position: relative;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
background: url("img/controls.png") no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 10px;
background: url("img/controls.png") no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: relative;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url("img/controls.png") -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url("img/controls.png") -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MUSIC STORE</title>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">INSTRUMENTS</a></li>
<li><a href="#">AMPLIFIERS</a></li>
<li><a href="#">ACCESSORIES</a></li>
<li><a href="#">FEATURED ARTISTS</a></li>
</ul>
</nav>
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="../Music Store/img/smiley1.jpg"/></li>
<li><img src="../Music Store/img/smiley2.jpg"/></li>
<li><img src="../Music Store/img/sad.jpg"/></li>
</ul>
</div>
</div>
<section class="one-third"> </section>
<section class="one-third"> </section>
<section class="one-third"> </section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
</body>
</html>
以下是我的文件夹的屏幕截图：
2 个答案:
答案 0 :(得分：0)
-
在CDN中加入jquery - https://code.jquery.com/
-
添加
$(function(){ })- http://api.jquery.com/jquery/#jQuery-callback -
纠正img路径
-
这是您正确的Main.html：
<!DOCTYPE>
<html lang="en">
<head>
<title>MUSIC STORE</title>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
<script type="text/javascript">
$(function(){
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto: true,
pager: false,
});
$('.slider2').bxSlider({
pager: false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto: true,
pager: false,
controls: false,
});
})
</script>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">INSTRUMENTS</a></li>
<li><a href="#">AMPLIFIERS</a></li>
<li><a href="#">ACCESSORIES</a></li>
<li><a href="#">FEATURED ARTISTS</a></li>
</ul>
</nav>
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="img/smiley1.jpg"/></li>
<li><img src="img/smiley2.jpg"/></li>
<li><img src="img/sad.jpg"/></li>
</ul>
</div>
</div>
<section class="one-third"></section>
<section class="one-third"></section>
<section class="one-third"></section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
</body>
</html>
答案 1 :(得分：0)
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？