我对网站模板有疑问。有一个滑块没有箭头可以移动其图像，并且没有自动移动并为其移动箭头，但是我需要JavaScript代码方面的帮助才能使其移动滑块。模板是PHP。
<div class="row">
<div id="client-logo" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4500px; left: 0px; display: block; transition: all 800ms ease 0s; transform: translate3d(-250px, 0px, 0px);">
<div class="owl-item" style="width: 250px;"><div class="client-logo item"> <a href="#" target="_blank"> <img src="login/pic/65874300338.jpg" alt=""> </a> </div></div></div></div>
</div>
<div class="nextCircle">
<i class="fa fa-arrow-right next" aria-hidden="true"></i>
</div>
<div class="prevCircle">
<i class="fa fa-arrow-left previous" aria-hidden="true"></i>
</div>
</div>
.nextCircle {
position:relative;
top:-65px;
transform:translateY(-50%);
left:98%;
width:50px;
height:50px;
border-radius: 50%;
opacity:0.5;
background-color:blue;
z-index:19;
}
.next {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:white;
z-index:20;
}
.nextCircle:hover{
opacity:0.7;
cursor: pointer;
}
.fa.fa-arrow-right, .fa.fa-arrow-left {
font-size:30px;
}
.prevCircle {
position:relative;
top:-115px;
transform:translateY(-50%);
right:2%;
width:50px;
height:50px;
border-radius: 50%;
opacity:0.5;
background-color:blue;
z-index:19;
}
.previous {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:white;
z-index:20;
}
.prevCircle:hover {
opacity: 0.7;
cursor: pointer;
}
代码末尾的箭头和我编写的CSS代码。我需要一个Java代码才能使箭头移动此滑块。
答案 0 :(得分：1)
自定义解决方案1：
$(function(){
var i= 0;
//when the next button is clicked on
$('.next').on("click", function(){
//increase the display picture index by 1
i = i + 1;
//if we are at the end of the image queue, set the index back to 0
if (i == $('img').length) {
i=0;
}
//set current image and previous image
var currentImg = $('img').eq(i);
var prevImg = $('img').eq(i-1);
//call function to animate the rotation of the images to the right
animateImage(prevImg, currentImg);
});
//when the previous button is clicked on
$('.previous').on("click", function(){
//if we are at the beginning of the image queue, set the previous image to the first image and the current image to the last image of the queue
if (i==0) {
prevImg = $('img').eq(0);
i=$('img').length-1;
currentImg = $('img').eq(i);
}
//decrease the display picture index by 1
else {
i=i-1;
//set current and previous images
currentImg = $('img').eq(i);
prevImg = $('img').eq(i+1);
}
//call function to animate the rotation of the images to the left
animateImageLeft(prevImg, currentImg);
});
//function to animate the rotation of the images to the left
function animateImageLeft(prevImg, currentImg) {
//move the image to be displayed off the visible container to the right
currentImg.css({"left":"100%"});
//slide the image to be displayed from off the container onto the visible container to make it slide from the right to left
currentImg.animate({"left":"0%"}, 1000);
//slide the previous image off the container from right to left
prevImg.animate({"left":"-100%"}, 1000);
}
//function to animate the rotation of the images to the right
function animateImage(prevImg, currentImg) {
//move the image to be displayed off the container to the left
currentImg.css({"left":"-100%"});
//slide the image to be displayed from off the container onto the container to make it slide from left to right
currentImg.animate({"left":"0%"}, 1000);
//slide the image from on the container to off the container to make it slide from left to right
prevImg.animate({"left":"100%"}, 1000);
}
});.owl-carousel {
position:relative;
width:80%;
height:100%;
margin:0 auto;
overflow:hidden;
}
.owl-carousel img:first-child {
position:relative;
width:100%;
left:0%;
top:0;
}
img {
position:absolute;
width:100%;
left:-100%;
top:0;
}
.nextCircle {
position:absolute;
top:50%;
transform:translateY(-50%);
left:85%;
width:50px;
height:50px;
border-radius: 50%;
opacity:0.5;
background-color:black;
z-index:19;
}
.next {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:white;
z-index:20;
}
.nextCircle:hover{
opacity:0.7;
cursor: pointer;
}
.fa.fa-arrow-right, .fa.fa-arrow-left {
font-size:30px;
}
.prevCircle {
position:absolute;
top:50%;
transform:translateY(-50%);
right:85%;
width:50px;
height:50px;
border-radius: 50%;
opacity:0.5;
background-color:black;
z-index:19;
}
.previous {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:white;
z-index:20;
}
.prevCircle:hover {
opacity: 0.7;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">
<div id="client-logo" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer">
<img src="https://images.unsplash.com/photo-1510797215324-95aa89f43c33?fit=crop&fm=jpg&h=800&q=80&w=1200" alt="">
<img src="https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?fit=crop&fm=jpg&h=800&q=80&w=120" alt="">
<img src="https://images.unsplash.com/photo-1509149037-37dc57ccbd13?fit=crop&fm=jpg&h=800&q=80&w=1200" alt="">
<img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?fit=crop&fm=jpg&h=800&q=80&w=1200g" alt="">
</div>
</div>
<div class="nextCircle">
<i class="fa fa-arrow-right next" aria-hidden="true"></i>
</div>
<div class="prevCircle">
<i class="fa fa-arrow-left previous" aria-hidden="true"></i>
</div>
</div>
使用内置方法中的owlCarousel：
您可以使用以下参数导航和 navText 将箭头添加到owlCarousel中以显示按钮
navText: [
'<i class="fa fa-angle-left" aria-hidden="true"></i>',
'<i class="fa fa-angle-right" aria-hidden="true"></i>'
],
$('.main-content .owl-carousel').owlCarousel({
stagePadding: 50,
loop: true,
margin: 10,
autoplay: true,
navigation: true,
nav: true,
navText: [
'<i class="fa fa-angle-left" aria-hidden="true"></i>',
'<i class="fa fa-angle-right" aria-hidden="true"></i>'
],
navContainer: '.main-content .custom-nav',
responsive:{
0:{
items: 1
},
600:{
items: 3
},
1000:{
items: 5
}
}
});.main-content {
position: relative;
}
.main-content .owl-theme .custom-nav {
position: absolute;
top: 20%;
left: 0;
right: 0;
}
.main-content .owl-theme .custom-nav .owl-prev, .main-content .owl-theme .custom-nav .owl-next {
position: absolute;
height: 100px;
color: inherit;
background: none;
border: none;
z-index: 100;
}
.main-content .owl-theme .custom-nav .owl-prev i, .main-content .owl-theme .custom-nav .owl-next i {
font-size: 2.5rem;
color: #cecece;
}
.main-content .owl-theme .custom-nav .owl-prev {
left: 0;
}
.main-content .owl-theme .custom-nav .owl-next {
right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="main-content">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://images.unsplash.com/photo-1510797215324-95aa89f43c33?fit=crop&fm=jpg&h=800&q=80&w=1200" alt="Picture 1">
</div>
<div class="item">
<img src="https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?fit=crop&fm=jpg&h=800&q=80&w=1200" alt="Picture 2">
</div>
<div class="item">
<img src="https://images.unsplash.com/photo-1509149037-37dc57ccbd13?fit=crop&fm=jpg&h=800&q=80&w=1200" alt="Picture 3">
</div>
<div class="item">
<img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?fit=crop&fm=jpg&h=800&q=80&w=1200" alt="Picture 4">
</div>
</div>
<div class="owl-theme">
<div class="owl-controls">
<div class="custom-nav owl-nav"></div>
</div>
</div>
</div>