gpt4 book ai didi

javascript - 简单的 jquery slider 问题

转载 作者:行者123 更新时间:2023-11-28 01:23:21 24 4
gpt4 key购买 nike

因此,作为学习 jquery 的一种方式,我正在制作自己的 slider ,其中每个图像都向左滑动以创建一个不错的效果,这是因为我更改了绝对定位图像容器的左侧属性。

但是我没能让它移动,我所做的是捕获 slider 中每个图像的宽度并相应地移动容器。

我的代码:

$(document).ready(function() {
var interval = 2000; //will move to left 450px each X seconds
var sliders = $('.slider_image'); //counts number of sliders
var image_width = $('.slider_image').width();
var index = 0;
var show_index = 0;
var scrolledPx = 0;

setInterval(function() {

if (scrolledPx >= image_width * sliders.length - 1) {

$('.sliders_container').animate({
'left': '0px'
}, 2000);
scrolledPx = 0;

} else {

$('.sliders_container').animate({
'left': '-= ' + image_width + ''
}, 1000);
scrolledPx += image_width;
}

}, interval);
});
/*SECTION SLIDER MARG START*/

.section_slider_marg_maincontainer {
width: 100%;
height: 275px;
outline: 2px solid white;
position: relative;
overflow: hidden;
}

.section_slider_marg_items_container {
width: auto;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: flex;
}

.section_slider_marg_item {
height: 100%;
width: 450px;
outline: 2px solid red;
background-size: cover;
}


/*SECTION SLIDER MARG END*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section_slider_marg_maincontainer" style="">
<div class="section_slider_marg_items_container sliders_container" style="">
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">1</div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">2</div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">3</div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">4</div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">5</div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">6</div>
</div>
</section>

最佳答案

<style>
.section_slider_marg_maincontainer {
width: 100%;
height: 275px;
outline: 2px solid white;
position: relative;
overflow: hidden;
}

.section_slider_marg_items_container {
width: auto;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: flex;
}

.section_slider_marg_item {
height: 100%;
width: 450px;
outline: 2px solid red;
background-size: cover;
}

.slider_image {display: none}

/* Slideshow container */
.sliders_container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

</style>
</head>
<body>

<div class="section_slider_marg_items_container sliders_container">

<div class="section_slider_marg_item slider_image">
<img src="res1.jpg"></div>

<div class="section_slider_marg_item slider_image">
<img src="res1.jpg"></div>



<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>


<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slider_image");

if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}

slides[slideIndex-1].style.display = "block";

}
</script>

看看这个,让我知道它是否有效

关于javascript - 简单的 jquery slider 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51366548/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com