我的图像滑块不会循环播放 [英] My image slider won't loop
问题描述
我已经尝试了很多教程和方法来使我的图像滑块工作,但它只是不起作用。我刚开始所以我知道我必须学习,但请帮助我。
这是我的HTML:
< !DOCTYPE html >
< html >
< head >
< meta charset = utf-8 >
< title > Hotel Acquabella < 温泉n> / title >
< link type = text / css rel = stylesheet href = main。 css / >
< script type = text / java脚本 src = https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js > < / script >
< script type = < span class =code-keyword> text / javascript src = https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js > < / script >
< script type = text / javascript src = main2.js > < / 脚本 >
< / head >
< body >
< div class = wholebody >
< div class = workingarea >
< div class = header >
< div < span class =code-attribute> class = logo >
< a href = index.html > ; < img src = Images / logo.png / > < / a >
< / div >
< div class = menu >
< ul >
< li > < a href = index.html > 主页< / a > < / li >
< li > < a href = despre-noi.html > Despre noi < / a > < / li >
< li > < a href = produse.html > 制作< / a > < / li >
< li > < a < span class =code-attribute> href = noutati.html > Noutati < / a > < / li >
< li > < a href = contact.html > 联系< / a > < / li >
< / ul >
< / div >
< / div >
< div id = 滑块 >
< ul class = slide >
< li id = 1 class = slide > < img src = Images / blat_lavoar_baie.jpg / > < / li >
< li id = 2 class = slide > < img src = Images / cadite_dus_acquabela.jpg / > < / li >
< li id = 3 class = slide > < img src = Images / set_dus_jet_spa.jpg / > < / li >
< / ul >
< / div >
< div id = textslider >
< ul class = textslides >
< li class = textslide > Piesele şiaccessoriilede mobilier Acquabella preiau texturile produselorpentruduşşipotfi asortate cu acestea。 Rezultatul final - armoniavizualăoptimăpentrubaia ta!< / li >
< li class = textslide > Acquabellaîţiprezintăunconceptavangardistîndesignulbăilorşioabordare ultra-creativăauneibăifoupersonalitate:THE SHOWER SHOW。< / li >
< li class = textslide > PlăcilepecialeAkronşitele6 texturi principale,inspirate de aspectul gresiei,ardeziei,pielii sau pietrei,asigurădesignulremarcabil al produselor Acquabella。< / li >
< / ul >
< span class =code-keyword>< / div >
< div class = navigation >
< div class = previous >
< img src = Images / main-slider-prev.png / >
< / div >
< div class = next >
< img src = Images / main-slider-next.png / >
< / div >
< / div >
< / div >
< / div >
< / body >
< / html >
这是我的CSS:
body {
background-color:#e9e6df;
}
.wholebody {
宽度:1180px;
身高:2000px;
background-color:#e9e6df;
}
.wholebody .workingarea {
宽度:1080px;
身高:1900px;
background-color:#ffffff;
仓位:绝对;
top:0;
左:0;
}
.header {
身高:115px;
宽度:1080px;
display:inline-block;
}
.logo img {
margin-left:60px;
margin-top:26px;
显示:内联;
float:left;
}
.menu ul {
margin-top:83px;
margin-left:250px;
}
.menu ul li {
list-style-type:none;
显示:内联;
填充:20px;
font-family:'VarelaRegular',sans-serif;
字体大小:13px;
letter-spacing:1px;
}
.menu ul li a {
color:#8f8e87;
text-decoration:none;
}
.menu a:悬停{
颜色:#ccab65;
}
#slider {
margin-top:50px;
宽度:930px;
身高:370px;
溢出:隐藏;
仓位:绝对;
z-index:1;
}
#slider .slides {
display:block;
宽度:6000px;
身高:370px;
保证金:0;
填充:0;
}
#slider .slide {
float:left;
list-style-type:none;
宽度:930px;
身高:370px;
}
#textslider {
身高:150px;
宽度:540px;
溢出:隐藏;
z-index:2;
仓位:绝对;
右:0px;
top:325px;
background-color:#ccab65;
}
#textslider .textslides {
display:block;
宽度:6000px;
身高:150px;
保证金:0;
填充:0;
}
#textslider .textslide {
float:left;
list-style-type:none;
宽度:420px;
身高:60px;
color:#fff;
font-family:serif;
字体大小:17px;
font-style:italic;
font-weight:600;
line-height:24px;
padding-top:45px;
padding-bottom:45px;
padding-left:60px;
padding-right:60px;
}
.navigation {
身高:40px;
宽度:150px;
仓位:绝对;
右:0px;
top:500px;
}
.previous {
身高:40px;
宽度:74px;
float:left;
显示:内联;
border:none;
border-right:1px solid#ccab65;
}
.previous img {
position:absolute;
宽度:5%;剩余
:40px;
top:12px
}
.next {
height:40px;
宽度:75px;
float:right;
显示:内联;
}
.next img {
position:absolute;
宽度:5%;
右:40px;
top:12px;
}
这是我的jQuery:
< pre lang =Javascript> $( document )。ready( function (){
$(' 。previous')。click( function (){
var currentSlide = 1 ;
$(< span class =code-string>' 。slides')。animate({'' margin-left':' - = 930'}, 1000 );
$(' 。textslides')。animate({' margin-left':< span class =code-string>' - = 540'}, 1000 跨度>);
});
$(' 。next')。click( function (){
$(' 。slides')。 animate({' margin-left':' + = 930'}, 1000 );
$(' .documentslides')。animate({' margin-left':' + = 540'} , 1000 );
});
}); ( document )。ready ( function (){
(' .previous')。click( function (){
var currentSlide = 1 ;
(' < span class =code-string>。slides'
)。animate({' margin-left' :' - = 930'}, 1000 跨度>);
I have tried many many tutorials and ways to make my image slider work but it just doesn't work. I am just starting so I know I have to learn, but please help me out here.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hotel Acquabella</title>
<link type="text/css" rel="stylesheet" href="main.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="main2.js"></script>
</head>
<body>
<div class="wholebody">
<div class="workingarea">
<div class="header">
<div class="logo">
<a href="index.html"><img src="Images/logo.png" /></a>
</div>
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="despre-noi.html">Despre noi</a></li>
<li><a href="produse.html">Produse</a></li>
<li><a href="noutati.html">Noutati</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="slider">
<ul class="slides">
<li id="1" class="slide"><img src="Images/blat_lavoar_baie.jpg" /></li>
<li id="2" class="slide"><img src="Images/cadite_dus_acquabela.jpg" /></li>
<li id="3" class="slide"><img src="Images/set_dus_jet_spa.jpg" /></li>
</ul>
</div>
<div id="textslider">
<ul class="textslides">
<li class="textslide">Piesele și accesoriile de mobilier Acquabella preiau texturile produselor pentru duș și pot fi asortate cu acestea. Rezultatul final - armonia vizuală optimă pentru baia ta!</li>
<li class="textslide">Acquabella îți prezintă un concept avangardist în designul băilor și o abordare ultra-creativă a unei băi cu personalitate: THE SHOWER SHOW.</li>
<li class="textslide">Plăcile speciale Akron și cele 6 texturi principale, inspirate de aspectul gresiei, ardeziei, pielii sau pietrei, asigură designul remarcabil al produselor Acquabella.</li>
</ul>
</div>
<div class="navigation">
<div class="previous">
<img src="Images/main-slider-prev.png" />
</div>
<div class="next">
<img src="Images/main-slider-next.png" />
</div>
</div>
</div>
</div>
</body>
</html>
Here is my CSS:
body { background-color: #e9e6df; } .wholebody { width: 1180px; height: 2000px; background-color: #e9e6df; } .wholebody .workingarea { width: 1080px; height: 1900px; background-color: #ffffff; position: absolute; top: 0; left: 0; } .header { height: 115px; width: 1080px; display: inline-block; } .logo img { margin-left: 60px; margin-top: 26px; display: inline; float: left; } .menu ul { margin-top: 83px; margin-left: 250px; } .menu ul li { list-style-type: none; display: inline; padding: 20px; font-family: 'VarelaRegular', sans-serif; font-size: 13px; letter-spacing: 1px; } .menu ul li a { color: #8f8e87; text-decoration: none; } .menu a:hover { color: #ccab65; } #slider { margin-top: 50px; width: 930px; height: 370px; overflow: hidden; position: absolute; z-index: 1; } #slider .slides { display: block; width: 6000px; height: 370px; margin: 0; padding: 0; } #slider .slide { float: left; list-style-type: none; width: 930px; height: 370px; } #textslider { height: 150px; width: 540px; overflow: hidden; z-index: 2; position: absolute; right: 0px; top: 325px; background-color: #ccab65; } #textslider .textslides { display: block; width: 6000px; height: 150px; margin: 0; padding: 0; } #textslider .textslide { float: left; list-style-type: none; width: 420px; height: 60px; color: #fff; font-family: serif; font-size: 17px; font-style: italic; font-weight: 600; line-height: 24px; padding-top: 45px; padding-bottom: 45px; padding-left: 60px; padding-right: 60px; } .navigation { height: 40px; width: 150px; position: absolute; right: 0px; top: 500px; } .previous { height: 40px; width: 74px; float: left; display: inline; border: none; border-right: 1px solid #ccab65; } .previous img { position: absolute; width: 5%; left: 40px; top: 12px } .next { height: 40px; width: 75px; float: right; display: inline; } .next img { position: absolute; width: 5%; right: 40px; top: 12px; }
Here is my jQuery:
$(document).ready(function() {
$('.previous').click(function(){
var currentSlide = 1;
$('.slides').animate({'margin-left': '-=930'}, 1000);
$('.textslides').animate({'margin-left': '-=540'}, 1000);
});
$('.next').click(function(){
$('.slides').animate({'margin-left': '+=930'}, 1000);
$('.textslides').animate({'margin-left': '+=540'}, 1000);
});
});
(document).ready(function() {
('.previous').click(function(){ var currentSlide = 1;
('.slides').animate({'margin-left': '-=930'}, 1000);
这篇关于我的图像滑块不会循环播放的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!