一、js實現輪播圖小結
隨着網絡上的網頁和應用程序數量的增加，輪播圖已成為必不可少的元素之一。實現一個輪播圖需要使用JS/JQuery來生成動態效果。輪播圖可以使用簡單的HTML和CSS進行布局，但在早期JavaScript實現輪播時可能很難做到各種各樣的動畫效果。在這篇文章中，我們將討論JS實現輪播圖的思路和代碼。
二、js實現輪播圖的思路與代碼
下面是輪播圖的步驟:
- 設置輪播圖中要顯示的圖片。
- 在HTML中添加用於顯示輪播圖圖片的HTML元素。
- 添加一個用於向前/向後移動的控件，這樣用戶就可以在輪播圖中進行手動控制。
- 使用JavaScript or JQuery編寫函數來控制圖片的滑動效果。包括手動移動與自動滾動效果。
- 右側的圖片會在用戶點擊按鈕時向右移動。
- 左側的圖片會在用戶點擊按鈕時向左移動。
下面是一個簡單的JS實現輪播圖的代碼示例:
$(function() {
var width = $('ul li:first').width();
var animateSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var startSlide = function() {
interval = setInterval(function() {
$('ul').animate({'margin-left': '-=' + width}, animateSpeed, function(){
currentSlide++;
if (currentSlide === $('ul li').length) {
currentSlide = 1;
$('ul').css('margin-left', 0);
}
});
}, pause);
};
startSlide();
});
最終效果可以查看下面的預覽:
三、原生js實現輪播圖
使用原生JS實現輪播圖的的方法和jQuery類似。下面是一個非常簡單的示例:
var sliderIndex = 0;
var sliderTimer;
function slider() {
var slides = document.getElementsByClassName("slider");
for (var i = 0; i slides.length) {
sliderIndex = 1;
}
slides[sliderIndex - 1].style.display = "block";
sliderTimer = setTimeout(slider, 2000);
}
slider();
四、js輪播圖代碼左右切換
下面是JS實現輪播圖的代碼，可以使用戶可以通過「前進」和「後退」按鈕手動進行切換。
$(document).ready(function() {
var slideIndex = 1;
showSlides(slideIndex);
$('.prev').click(function() {
showSlides(slideIndex -= 1);
});
$('.next').click(function() {
showSlides(slideIndex += 1);
});
function showSlides(n) {
var i;
var slides = $('.slides');
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';
};
});
五、自動輪播圖怎麼實現
下面是實現自動播放的代碼。
$(document).ready(function() {
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = $('.slides');
for (i = 0; i slides.length) {
slideIndex = 1
}
slides[slideIndex-1].style.display = 'block';
setTimeout(showSlides, 2000); // 圖片將在2秒後自動播放。
}
});
六、js實現輪播圖代碼
下面的JS代碼提供了一個更完整、可配置的示例：
var slider = {
currentIndex: 0,
nextIndex: 1,
interval: 3000,
width: 400,
slides: [],
intervalId: 0,
stop: function() {
clearInterval(this.intervalId);
},
createSlider: function() {
var sliderEl = document.createElement('div');
sliderEl.classList.add('slider');
var sliderInnerEl = document.createElement('div');
sliderInnerEl.classList.add('slider-inner');
sliderEl.appendChild(sliderInnerEl);
for (var i = 0; i = self.slides.length) {
self.nextIndex = 0;
}
}, this.interval);
},
animate: function(currentIndex, nextIndex) {
var currentSlide = document.querySelector('.slider .slider-inner .slide:nth-child(' + (currentIndex + 1) + ')');
var nextSlide = document.querySelector('.slider .slider-inner .slide:nth-child(' + (nextIndex + 1) + ')');
currentSlide.style.opacity = 0;
currentSlide.style.zIndex = 1;
nextSlide.style.opacity = 1;
nextSlide.style.zIndex = 2;
},
prev: function() {
this.stop();
this.nextIndex = this.currentIndex - 1;
if (this.nextIndex < 0) {
this.nextIndex = this.slides.length - 1;
}
this.animate(this.currentIndex, this.nextIndex);
this.currentIndex = this.nextIndex;
this.nextIndex--;
if (this.nextIndex = this.slides.length) {
this.nextIndex = 0;
}
var self = this;
setTimeout(function() {
self.start();
}, 1000);
}
};
var el = document.querySelector('#slider-container');
slider.el = el;
slider.slides = [
'https://images.unsplash.com/photo-1527185733542-5a810fda9664?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7815d0bdeed7ef1f2c1d903d560cf896&auto=format&fit=crop&w=634&q=80',
'https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5d5d7e4236e80dcdd0559944ff51a4a1&auto=format&fit=crop&w=1350&q=80',
'https://images.unsplash.com/photo-1516440713609-67f2c5b4a188?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b322a023343e53bc9a84aa845c5e01bf&auto=format&fit=crop&w=1350&q=80'
];
slider.createSlider();
七、js實現輪播圖描述
在實現一個輪播圖時，我們需要考慮以下關鍵點:
- 輪播圖的目的和風格：從廣告橫幅到產品展示，每個應用程序的輪播圖都有一個不同的目的和風格。在構建輪播圖時要考慮這些因素。
- 圖片的大小：如果在輪播圖中使用的圖片尺寸不一致，可能會導致輪播圖出現問題。在構建輪播圖時，必須要使用相同大小的圖片。
- 自動輪播時間：默認的自動輪播時間間隔是3000ms。這個值可以根據需要進行更改。
- 樣式與布局：可以使用CSS對輪播圖進行樣式和布局。這樣可以確保輪播圖與您的網站或應用程序的整體外觀相一致。
八、js實現輪播圖最簡代碼
下面是一個非常簡單的輪播圖代碼：
$(document).ready(function() {
setInterval(function() {
$('.slides img:first-child').fadeOut().next('img').fadeIn().end().appendTo('.slides');
}, 2000);
});
九、js實現輪播圖翻頁的效果
下面是實現輪播圖翻頁效果的代碼:
$(document).on('ready', function() {
var slideCount = $('.slider ul.slides li').length;
var slideWidth = $('.slider ul.slides li:first-child').width();
var slideHeight = $('.slider ul.slides li:first-child').height();
var slideUlWidth = slideCount * slideWidth;
$('.slider').css({ width: slideWidth, height: slideHeight });
$('.slider ul.slides').css({ width: slideUlWidth, marginLeft: - slideWidth });
$('.slider ul.slides li:last-child').prependTo('.slides ul');
function moveLeft() {
$('.slider ul.slides').animate({
left: + slideWidth
}, 500, function() {
$('.slider ul.slides li:last-child').prependTo('.slider ul.slides');
$('.slides ul.slides').css('left', '');
});
};
function moveRight() {
$('.slider ul.slides').animate({
left: - slideWidth
}, 500, function() {
$('.slider ul.slides li:first-child').appendTo('.slider ul.slides');
$('.slider ul.slides').css('left', '');
});
};
$('a.control_prev').click(function() {
moveLeft();
});
$('a.control_next').click(function() {
moveRight();
});
});
在上面的代碼中，每次需要顯示下一張或上一張輪播圖時，輪播圖會向左或向右滑動，並將最後一張或第一張圖移到下一次滑動的位置。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/194828.html
微信掃一掃 
支付寶掃一掃 