Вы делаете очень хорошую работу ... щелчком .dot
вы можете начать с получения его индекса li
, а затем использовать индекс, чтобы показать / скрыть слайды
$(document).ready(function () {
$('.slide:eq(-1)').addClass('last');
$('.dot:first').addClass('active');
$('.slide:first').addClass('active').delay($duration).queue(function () {
$(this).addClass('show-text');
});
$('.slide:eq(1)').addClass('next');
});
var $classes = 'last active show-text next';
var $duration = 1250;
$('.dot').on('click' , function(){ // the dot click
var $This = $(this);
var GetIndex = $This.closest('li').index(); // get this li index
$('.dot').removeClass('active').filter($This).addClass('active'); // remove class active from other .dots and add the active class to the click one
alert(GetIndex);
});
$('.button').click(function moveSlide() {
var $active = $('.slide.active');
var $prevSlide = $('.slide').eq(($active.index() - 1) % $('.slide').length);
var $afterPrevSlide = $('.slide').eq(($active.index() - 2) % $('.slide').length);
var $nextSlide = $('.slide').eq(($active.index() + 1) % $('.slide').length);
var $slideAfterNext = $('.slide').eq(($active.index() + 2) % $('.slide').length);
var $tagNextDot = $('#' + $prevSlide.attr('id') + 'Dot' );
var $tagPrevDot = $('#' + $nextSlide.attr('id') + 'Dot' );
$active.dequeue();
$('.slide').removeClass($classes)
$('.dot').removeClass('active');
if ($(this).is("#prev")) {
$active.addClass('next');
$tagNextDot.addClass('active');
$prevSlide.addClass('active').delay($duration).queue(function () {
$(this).addClass('show-text');
});
$afterPrevSlide.addClass('last');
} else {
$active.addClass('last');
$tagPrevDot.addClass('active');
$nextSlide.addClass('active').delay($duration).queue(function () {
$(this).addClass('show-text');
});
$slideAfterNext.addClass('next');
}
});
body {
font-size: 16px;
font-family: 'Heebo', sans-serif;
text-transform: uppercase;
font-weight: 900;
}
/* Slides */
.slide-wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
overflow: hidden;
}
.slide {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 70%;
left: 140%;
z-index: 0;
transition: 1.25s;
box-shadow: -10px 0px 21px -5px rgba(0,0,0,0.5);
}
.slide h2 {
display: none;
color: #fff;
text-shadow: 0px 0px 8px rgba(0,0,0,0.5);
letter-spacing: -2px;
font-size: 3rem;
}
.slide.active.show-text h2 {
display: block;
animation: reveal-text 1.5s forwards;
}
@keyframes reveal-text {
0% { opacity: 0; }
100% { opacity: 1; }
}
#slide1 {
background-image: radial-gradient(
rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.35)
), url('https://picsum.photos/1250/1600/?random');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#slide2 {
background-image: radial-gradient(
rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.35)
), url('https://picsum.photos/1200/1600/?random');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#slide3 {
background-image: radial-gradient(
rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.35)
), url('https://picsum.photos/1200/1500/?random');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#slide4 {
background-image: radial-gradient(
rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.35)
), url('https://picsum.photos/1300/1600/?random');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide.last {
left: 0;
z-index: 0;
}
.slide.active {
left: 0;
z-index: 1;
}
.slide.next {
left: 70%;
z-index: 2;
}
.dots-wrapper {
z-index: 10;
list-style: none;
padding-left: 0;
position: absolute;
bottom: 0;
padding: 10px;
}
.dots-wrapper li {
display: inline;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border: 2px solid #fff;
border-radius: 6px;
}
.dot.active {
background-color: red;
border-color: red;
}
/* Buttons */
.button-wrapper {
display: flex;
z-index: 10;
width: 100%;
justify-content: space-between;
align-items: center;
}
.button {
background-color: rgba(0,0,0,0.45);
color: #ddd;
height: 40px;
border: none;
font-weight: bold;
padding: 10px 20px;
transition: 0.3s;
}
.button:hover {
cursor: pointer;
background: rgba(0,0,0,0.85);
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-wrapper">
<div id="slide1" class="slide">
<h2>Slide One.</h2>
</div>
<div id="slide2" class="slide">
<h2>Slide Two.</h2>
</div>
<div id="slide3" class="slide">
<h2>Slide Three.</h2>
</div>
<div id="slide4" class="slide">
<h2>Slide Four.</h2>
</div>
<div class="button-wrapper">
<button id="prev" class="button">Prev.</button>
<button id="next" class="button">Next.</button>
</div>
<ul class="dots-wrapper">
<li>
<span id="slide1Dot" class="dot"></span>
</li>
<li>
<span id="slide2Dot" class="dot"></span>
</li>
<li>
<span id="slide3Dot" class="dot"></span>
</li>
<li>
<span id="slide4Dot" class="dot"></span>
</li>
</ul>
</div>
Примечание: это не полный ответ, но объясняет идею использования индекса li
для получения количество нажатых .dot
Нет, нет никакого гарантируемого пути (хотя можно, конечно, узнать, каково следующее значение могло бы быть, другая команда могла бы пойти и использовать его, прежде чем можно будет сделать любое использование из него). Единственное гарантируемое значение, которое можно получить, является ранее вставленным значением идентификационных данных через SCOPE_IDENTITY()
(который возвратит значение идентификационных данных, в последний раз сгенерированное для текущей области).
Сомнительно, какая цель, почему нужно было бы знать значение прежде (при использовании автоматически увеличенного отобранного столбца идентификационных данных).
Если необходимо знать значение прежде, то я рекомендую генерировать идентификаторы сами. Можно сделать, это с идентификационной таблицей включило имя таблицы, или, если у Вас есть проблемы масштабируемости (и Вы используете транзакции), у Вас может быть идентификационная таблица для каждой таблицы, которой нужен идентификатор, который имел бы идентификатор, который будет вставлен (и впоследствии увеличен).
Или, Вы могли использовать GUID, и Вы сможете легко генерировать их на стороне клиента прежде, чем отправить его в Вашу базу данных.
Эта часть sql даст Вам следующее значение столбца идентификационных данных (существует, вероятно, много причин не повторить этот отрывок в производственном коде),
declare @nextid int;
declare @previousid int;
begin tran
insert into dbo.TestTable (Col1) values ('11');
select @nextid = SCOPE_IDENTITY();
rollback tran
select @previousid = @nextid -1
DBCC CHECKIDENT('dbo.TestTable', RESEED, @previousid);
select @nextid
этот stackoverflow вопрос дает некоторую дополнительную информацию - sql-identity-autonumber-is-incremented-even-with-a-transaction-rollback
Вы, вероятно, хотите использовать SCOPE_IDENTITY не @@ ИДЕНТИФИКАЦИОННЫЕ ДАННЫЕ для ограничения его значением идентификационных данных в текущей области. Это старается не получать новые значения идентификационных данных, вставленные триггерами в другие таблицы а не таблицу, в которую Вы просто вставили.
Но можно вычислить, каково следующее значение идентификационных данных
SELECT IDENT_CURRENT('mytable') + IDENT_INCR('mytable') FROM mytable
Проблема - Вы, не гарантируются, который является значением. У Вас должна была бы быть блокировка, таким образом, что другие вставки отклонены на таблице при выполнении ее, чтобы гарантировать, что значение точно. Также после того, как у Вас заканчиваются целые числа на 32 бита, я не знаю, какова логика. Я не знаю, переворачивается ли это или перестало работать.
Править: Я просто протестировал это (см. ниже для SQL), и он не возвращает правильное значение, когда нет никаких данных. И пересев с DBCC CHECKIDENT ('имя таблицы', ПЕРЕСЕЙТЕ, 200) на самом деле привел к следующему значению, являющемуся 201 не 200.
CREATE TABLE willtest (myid integer IDENTITY(1,1), myvalue varchar(255))
SELECT IDENT_CURRENT('willtest') + IDENT_INCR('willtest')
INSERT INTO willtest (myvalue)
VALUES ('1')
INSERT INTO willtest (myvalue)
VALUES ('2')
INSERT INTO willtest (myvalue)
VALUES ('3')
INSERT INTO willtest (myvalue)
VALUES ('4')
INSERT INTO willtest (myvalue)
VALUES ('5')
INSERT INTO willtest (myvalue)
VALUES ('6')
INSERT INTO willtest (myvalue)
VALUES ('7')
INSERT INTO willtest (myvalue)
VALUES ('8')
SELECT IDENT_CURRENT('willtest') + IDENT_INCR('willtest')
DBCC CHECKIDENT ('willtest', RESEED, 200)
SELECT IDENT_CURRENT('willtest') + IDENT_INCR('willtest')
INSERT INTO willtest (myvalue)
VALUES ('200')
INSERT INTO willtest (myvalue)
VALUES ('201')
INSERT INTO willtest (myvalue)
VALUES ('202')
INSERT INTO willtest (myvalue)
VALUES ('203')
INSERT INTO willtest (myvalue)
VALUES ('204')
INSERT INTO willtest (myvalue)
VALUES ('205')
INSERT INTO willtest (myvalue)
VALUES ('206')
INSERT INTO willtest (myvalue)
VALUES ('207')
SELECT IDENT_CURRENT('willtest') + IDENT_INCR('willtest')
SELECT * FROM willtest
DROP TABLE willtest
Так как Вы отбираете от 1 и инкремент 1 (ИДЕНТИФИКАЦИОННЫЕ ДАННЫЕ (1,1)), я задаюсь вопросом, можно ли создать процедуру, где можно установить переменную как "Выбор @@ ИДЕНТИФИКАЦИОННЫЕ ДАННЫЕ + 1" или что-то как этот.
Использовать GUID
столбцы для Ваших первичных ключей. Если у Вас не будут миллиардов записей и тысяч запросов в секунду, Вы, вероятно, не заметите различия в производительности. Но если Вам не нравится проводить слишком много времени, занимаясь глупыми проблемами как это, Вы заметите различие в своем уровне напряжения и продолжительности жизни.