Требования и анализ
нужно:
Автоматически вращайте пять изображений в непрерывном цикле. Нажимайте стрелки влево и вправо, чтобы переключать изображения вручную. Нажмите кнопку 1 2 3 4 5 под карусельным изображением, чтобы перейти к соответствующему изображению 1 2 3 4 5. Когда мышь находится на картинке изображения карусели, она больше не будет вращаться автоматически, и будут отображаться стрелки влево и вправо.Когда мышь отодвинута, стрелки влево и вправо будут скрыты и автоматически повернуты.
Изображение эффекта:
Макет: подготовьте семь изображений для реализации так называемого бесшовного поворота и зафиксируйте ширину и высоту семи изображений, которые, как предполагается, равны 600px*400px ниже. Предположим, html разделен на три области: область изображения, область кнопки, область стрелки. Затем заверните три области в div и установите ширину и высоту div на 600*400.
Стиль: по центру слева и справа, отображается на расстоянии 100 пикселей от верхнего края страницы. Пять кнопок имеют круглую форму, и цвет кнопки меняется при повороте изображения или нажатии кнопки. Остальные малые стили добавляются в буддийскую систему при написании кода.
JS-скрипт: просто объясните расположение маленькой картинки, а затем расскажите об остальном при написании этой части кода.
Из семи картинок две такие же, как первая и пятая из пяти разных картинок. Среди них пять разных картинок и та же самая картинка, что и первая, помещаются в седьмую из семи картинок, а пять разных картинок и та же самая картинка, что и пятая, помещаются в первую из семи картинок. Причина будет объяснена, когда я напишу эту часть кода
Этапы реализации
- Сначала идет html-фрейм
<body>
<div class="container">
<div class="wrap">
<img src="./imgs/5.jpg" alt="5">
<img src="./imgs/1.jpg" alt="1">
<img src="./imgs/2.jpg" alt="2">
<img src="./imgs/3.jpg" alt="3">
<img src="./imgs/4.jpg" alt="4">
<img src="./imgs/5.jpg" alt="5">
<img src="./imgs/1.jpg" alt="1">
</div>
<div class="button">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<a href="javascript:void(0);" class="jt jt_left"><</a>
<a href="javascript:void(0);" class="jt jt_right">></a>
</div>
добавить тегjavascript:void (0);Это сделано для предотвращения скачка тега a.
2. Определите стиль
Основная цель: определить ширину и высоту для всего div, div области кнопки области изображения, изображения, кнопки и стрелок влево и вправо, чтобы семь изображений отображались рядом, пять кнопок отображались внизу изображения в центр, и две стрелки отображаются в умеренных позициях слева и справа соответственно.
/* 清除默认样式 */
*{
margin: 0;
padding: 0;
text-decoration: none;
}
/* 总div */
div.container{
position: relative;
width: 600px;
height: 400px;
margin: 100px auto 0 auto;
box-shadow: 0 0 5px aqua;
overflow: hidden;
}
/* 图片区 */
div.container div.wrap{
position: absolute;
width: 4200px;
height: 400px;
z-index: 1;
}
div.container div.wrap img{
width: 600px;
height: 400px;
float: left;
}
/* 按钮区 */
div.container div.button{
position: absolute;
right: 225px;
bottom: 15px;
width: 150px;
height: 20px;
z-index: 2;
text-align: center;
}
div.container div.button span{
margin-left: 5px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: greenyellow;
text-align: center;
color: white;
cursor: pointer;
opacity: 0.6;
}
/* 轮播到哪张图，哪个按钮有这个效果，与其他按钮有个区别。 */
div.container div.button span.on{
opacity: 1;
}
/* 箭头区 */
div.container .jt{
position: absolute;
top: 40%;
color:greenyellow;
padding: 0px 14px;
font-size: 55px;
text-align: center;
z-index: 2;
display: none;
}
div.container .jt_left{
left: 10px;
}
div.container .jt_right{
right: 10px;
}
div.container:hover .jt{
display: block;
opacity: 0.4;
}
div.container .jt:hover{
opacity: 1;
}
Чтобы отобразить 1.jpg в первом изображении на только что введенной странице, добавьте встроенный стиль к изображению в области изображения, и пусть открытая страница по умолчанию отображает это изображение:
<div class="wrap" style="left:-600px">...</div>На этот раз эффект такой, при наведении мышки на картинку, у стрелочки какие-то стили:
Первый шаг: реализовать автоматическое переключение изображений
Инкапсулируйте две функции: функции next() и prev(), которые соответствуют правому и левому поворотам соответственно.Какая функция вызывается в этот момент, может переключать поворот изображения и изображение в каком направлении.
var wrap = document.getElementsByClassName('wrap')[0];
var newLeft = -600;
function next() {
setInterval(function(){
if(newLeft == -2400){
newLeft = 0;
}else{
newLeft = parseInt(wrap.style.left) - 600;
}
wrap.style.left = newLeft + 'PX';
},1000)
}
function prev() {
setInterval(function(){
if(newLeft == -600){
newLeft = -3000;
}else{
newLeft = parseInt(wrap.style.left) + 600;
}
wrap.style.left = newLeft + 'PX';
},1000)
}
Шаг 2: Позвольте каждому изображению переключаться с движущейся дорожкой во время карусели вместо резкого перехода от одного изображения к другому.
Здесь мне нужно использовать функцию движения startMove(), которую я инкапсулировал, и использовать ее как инструмент:
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
}
//运动框架 startMove函数
function startMove(obj,json,fn){
clearInterval(obj.timer);
//开启定时器
obj.timer = setInterval(function(){
var flag = true;
//遍历json
for (var attr in json) {
//取当前值 iCur
var iCur = 0;
if (attr == 'opacity') {
iCur = Math.round(parseFloat(getStyle(obj, attr))*100);
}else{
iCur = parseInt(getStyle(obj, attr));
}
//算速度：iSpeed
//目标值：json[attr]
var iSpeed = (json[attr]-iCur)/8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//检测停止
if (iCur != json[attr]) {
flag = false
}
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:'+iCur+iSpeed+')';
obj.style.opacity = (iCur+iSpeed)/100;
}else{
obj.style[attr] = iCur + iSpeed + 'px';
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {fn();}
}
},30)
}
Эта инкапсулированная функция движения здесь. Если вы не можете понять код с моими комментариями, вы можете пойти и посмотреть это видео. Лектор очень ясно объясняет:Эффект анимации JS
Затем используйте этот принцип: когда изображение поворачивается к шестому изображению справа, пусть сразу появляется первое изображение, а затем вызывается упакованная функция движения для переключения с первого изображения на второе изображение. То же самое верно и при повороте влево.При повороте первого изображения сразу же отображается шестое изображение, а затем шестое изображение перемещается на пятое изображение. Таким образом, создается впечатление, что пять изображений непрерывно вращались и вращались плавно.
Вот почему используются семь изображений, причем первое изображение совпадает с шестым изображением, а седьмое изображение совпадает со вторым изображением.код показывает, как показано ниже:
var wrap = document.getElementsByClassName('wrap')[0];
var newLeft = -600;
function next() {
setInterval(function () {
if (newLeft == -3000) {
newLeft = 0;
wrap.style.left = newLeft + 'px';
}
newLeft -= 600;
startMove(wrap, {
"left": newLeft
})
// wrap.style.left = newLeft + 'PX';
}, 3000)
}
function prev() {
setInterval(function () {
if (newLeft == 0) {
newLeft = -3000;
wrap.style.left = newLeft + 'px';
}
newLeft += 600;
startMove(wrap, {
"left": newLeft
});
}, 3000)
}
Шаг 3: Когда мышь перемещается по изображению, остановите автоматическое вращение и дайте несколько раз щелкнуть левой и правой стрелками, чтобы контролировать вращение влево и вправо один за другим.
основной принцип: очистите таймер, привяжите события click, onmouseenter и onmouseleave и выполните рефакторинг кода для инкапсуляции функции карусели справа налево и функции автоматической карусели.
Поверните функцию вправо:
function next() {
if (newLeft == -3000) {
newLeft = 0;
wrap.style.left = newLeft + 'px';
}
newLeft -= 600;
startMove(wrap, {
"left": newLeft
});
}
Поверните функцию влево:
function prev() {
if (newLeft == 0) {
newLeft = -3000;
wrap.style.left = newLeft + 'px';
}
newLeft += 600;
startMove(wrap, {
"left": newLeft
});
}
Функция автозапуска:
var timer = null;
function autoPlay() {
timer = setInterval(function () {
next();
}, 2000)
} /* 自动播放 */
Привязать каждое событие:
container.addEventListener('mouseenter', function () {
clearInterval(timer);
}, false)
container.addEventListener('mouseleave', function () {
autoPlay();
}, false)
left.addEventListener('click', function () {
prev();
})
right.addEventListener('click', function () {
next();
})
четвертый шаг:
- Обработайте кнопку так, чтобы, когда страница только что была открыта, первая кнопка имела эффект включения класса в элементе span.
- Далее, чтобы реализовать визуальное вращение какого изображения, соответствующая кнопка имеет эффект «на».
- Наконец, когда вы нажимаете на кнопку, кнопка имеет эффект включения класса и визуально переходит к первым нескольким изображениям.
Инкапсулируйте функцию для обработки кнопок.Функция состоит в том, чтобы установить имя класса каждой кнопки пустым, а затем при визуальном переходе к A-му изображению, пусть тип A-й кнопки в это время будет «включен».
Поэтому вам нужно установить дозорный индекс для визуального контроля того, какое изображение является первым, а затем добавить класс «on» к кнопке, соответствующей этому изображению:
//处理按钮
var index = 0;
var len = dot.length;
function setCurrentDot(){
for (var m = 0; m < len; m++){
dot[m].className = '';
}
dot[index].className = 'on';
}
setCurrentDot();
Если эта функция вызывается в это время, это означает, что первое изображение, отображаемое по умолчанию при первом входе на страницу, также является изображением по умолчанию для первой кнопки, чтобы иметь эффект класса «вкл».
Так как же сделать так, чтобы тип A-й кнопки был «включен», когда вы визуально перемещаетесь на A-ю картинку?
Вы можете добавлять и изменять значение индикатора индекса в функции, которая вращается один раз, и вызывать функцию setCurrentDot(). В следующем():
index++;
if(index === 5){
index = 0;
}
setCurrentDot();
В предыдущем():
index--;
if(index === -1){
index = 4;
}
setCurrentDot();
Наконец, когда вы понимаете, какая кнопка нажата, кнопка имеет эффект включения класса и визуально переходит к первым нескольким изображениям.
основная идея: Когда нажимается кнопка, например, нажимается третья кнопка, то изображение, которое должно отображаться в это время, должно быть визуально третьим изображением, которое является четвертым изображением среди семи изображений, и слева от обтекания, соответствующего к четвертому изображению -1800px, а затем найдите соответствующее правило, newLeft в это время должно быть: -600 * (x + 1). Затем независимо от того, куда он был повернут до нажатия кнопки, пока она нажата, используйте функцию движения startMove() для перемещения в положение newLeft. Согласно примеру, дозорный индекс в это время также равен 3, потому что первые несколько кнопок должны иметь класс on.
Напишите код в соответствии с основной идеей как (здесь нужно обратить внимание на проблему замыкания при привязке событий):
// 点到哪个按钮时，该按钮有类为'on'的效果，并且跳转到视觉上的第几张图。
for (var s = 0; s < len; s++){
(function(s){
dot[s].addEventListener('click',function(){
newLeft = -600 * (s + 1);
startMove(wrap,{"left":newLeft});
index = s;
setCurrentDot();
},false)
}(s))
}
Пишите сюда, значит требования выполнены.
наконец
Идея такая, главное не код, а логика анализа. Исходный код отправлен наgithub, я надеюсь, что это поможет вам~