我的图像滑块不会循环播放 [英] My image slider won't loop
本文介绍了我的图像滑块不会循环播放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经尝试了很多教程和方法来使我的图像滑块工作，但它只是不起作用。我刚开始所以我知道我必须学习，但请帮助我。
这是我的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 / 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屋！
查看全文
