Question

我已经尝试了许多教程和方法来使我的图像滑块工作，但它只是不起作用。我刚开始所以我知道我必须学习，但请帮助我。这是我的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>
                <li id="4" class="slide"><img src="Images/blat_lavoar_baie.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>

这是我的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;
}

这是我的jQuery：

$(document).ready(function() {
$('.previous').click(function(){
    var currentSlide = 1;
    $('.slides').animate({'margin-left': '-=930'}, 1000);
    if (currentSlide === $('.slide', $('#slider')).length) {
                currentSlide = 1;
                $('.slides', $('#slider')).css('margin-left', 0);
            }
});
$('.next').click(function(){
    $('.slides').animate({'margin-left': '+=930'}, 1000);
});
});

我想制作它，以便在我点击按钮时图像会滑动，但我似乎无法让它循环播放。

我的图像滑块不会循环播放

0 个答案: