可以通过左右滑动和点击小按钮来实现图片的轮播
2017-10-13 17:42
756 查看
这个轮播实现的功能有：
1.支持通过isLoop 来控制是否循环轮播；
2.支持通过触摸屏幕的左右滑动来循环切换图片；
3.支持点击图片下的小圆点，来切换当前显示第几张图片；
4.支持上一张(prev()) 下一张(next())实现图片的切换。
全部代码如下；本地测试时，需要自己提供1-4.jpg的图片。
如有问题，欢迎指出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style>
body{
margin: 0;
padding: 0;
}
#container{
overflow: hidden;
position: relative;
}
.slider{
width: 100%;
transition-duration: 0ms;
}
a{
float: left;
}
img{
width: 100%;
}
.icons{
text-align: center;
position: absolute;
width: 100%;
bottom: 12px;
}
.icons span{
width: 10px;
height: 10px;
display: inline-block;
background: #fff;
border-radius: 50%;
margin: 0 4px;
}
.icons span.active{
background: #555;
}
</style>
</head>
<body>
<div id="container">
<div class="slider">
<a>
<img src="./1.jpg">
</a>
<a>
<img src="./2.jpg">
</a>
<a>
<img src="./3.jpg">
</a>
<a>
<img src="./4.jpg">
</a>
</div>
<div class="icons">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script>
var sliderEle = document.querySelector('.slider');
var iconEle = document.querySelector('.icons');
var sliderContainer = document.querySelector('#container');
var sliderWidth = sliderContainer.clientWidth;
var imgs = sliderEle.children;
var icons = iconEle.children;
var imageLength = imgs.length;
var currentIndex = 1;
var animateTime = '400';
var isLoop = true;
var timer = 0;
var startX = 0;
var startY = 0;
var deltaX = 0;
function initSlider() {
var width = 0;
//复制最后一张图片和第一张图片分别作为slider的第一个和最后一个元素
if(imgs.length > 0) {
sliderEle.insertBefore(imgs[imageLength - 1].cloneNode(true), imgs[0]);
sliderEle.appendChild(imgs[1].cloneNode(true));
}
//定义容器高度
for(var i = 0, len = imgs.length; i < len; i++){
imgs[i].style.width = sliderWidth + 'px';
width += sliderWidth;
}
sliderEle.style.width = width + 'px';
//将图片定位到第一张
sliderEle.style.transform = `translate(-${sliderWidth}px, 0)`;
icons[0].className = 'active';
}
function changImg(index) {
var left = 0;
index += 1;
left = index * sliderWidth;
sliderEle.style.transform = `translate(-${left}px, 0)`;
sliderEle.style.transitionDuration = animateTime + 'ms';
currentIndex = index;
if(index > imageLength) {
//如果滑动到最后一张图片，
setTimeout(function(){
currentIndex = 1;
sliderEle.style.transform = `translate(-${sliderWidth}px, 0)`;
sliderEle.style.transitionDuration = '0ms';
changIcon(index - 1);
}, animateTime)
}
if(index == 0) {
//如果滑动到第一张图片，
setTimeout(function(){
currentIndex = imageLength;
left = currentIndex * sliderWidth;
sliderEle.style.transform = `translate(-${left}px, 0)`;
sliderEle.style.transitionDuration = '0ms';
changIcon(icons.length - 1);
}, animateTime)
}
}
function initTimer() {
timer = setInterval(function(){
changIcon(currentIndex);
changImg(currentIndex);
}, 4000);
}
/*
初始化小圆点icons的点击事件
*/
function initIconEvent() {
for(var i = 0; i < icons.length; i++) {
icons[i].onclick = (function(i){
return function(){
changIcon(i);
clearInterval(timer);
changImg(i);
initTimer();
}
})(i);
}
}
/*
向前滑动图片
*/
function prev() {
clearInterval(timer);
if(currentIndex == 1) {
currentIndex = -1;
changImg(currentIndex);
changIcon(imageLength - 1);
}else{
changImg(currentIndex - 2);
changIcon(currentIndex - 1);
}
initTimer();
}
/*
向后滑动图片
*/
function next() {
clearInterval(timer);
changIcon(currentIndex);
changImg(currentIndex);
initTimer();
}
/*
初始化图片左右滑动的事件
*/
function initSliderEvent() {
sliderContainer.addEventListener('touchstart',touch, false);
sliderContainer.addEventListener('touchmove',touch, false);
sliderContainer.addEventListener('touchend',touch, false);
function touch (event){
switch(event.type){
case "touchstart":
clearInterval(timer);
var touch = event.touches[0];
startX = touch.pageX;
startY = touch.pageY;
break;
case "touchmove":
var touch = event.touches[0];
deltaX = touch.pageX - startX;
var deltaY = touch.pageY - startY;
//如果是垂直方向滑动大于水平方向则忽略
if(Math.abs(deltaY) > Math.abs(deltaX)) {
return;
}
//滑动的最大宽度不能超过屏幕的宽度
var offsetWidth = Math.max(Math.min(deltaX, sliderWidth), -sliderWidth);
//重新计算当前移动的距离
var left = -(sliderWidth * currentIndex) + offsetWidth;
sliderEle.style.transform = `translate(${left}px, 0)`;
sliderEle.style.transitionDuration = '0ms';
break;
case "touchend":
if(Math.abs(deltaX) > 30) {
if(deltaX <= 0) {
next();
}else{
prev();
}
}else{
changIcon(currentIndex - 1);
changImg(currentIndex - 1);
initTimer();
}
break;
}
}
}
function changIcon(index) {
for(var i = 0; i < icons.length; i++) {
icons[i].className = '';
}
if(index == icons.length) {
index = 0;
}
icons[index].className = 'active';
}
window.onload = function(){
initSlider();
initIconEvent();
initSliderEvent();
if(isLoop) {
initTimer()
}
}
</script>
</html>
1.支持通过isLoop 来控制是否循环轮播；
2.支持通过触摸屏幕的左右滑动来循环切换图片；
3.支持点击图片下的小圆点，来切换当前显示第几张图片；
4.支持上一张(prev()) 下一张(next())实现图片的切换。
全部代码如下；本地测试时，需要自己提供1-4.jpg的图片。
如有问题，欢迎指出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style>
body{
margin: 0;
padding: 0;
}
#container{
overflow: hidden;
position: relative;
}
.slider{
width: 100%;
transition-duration: 0ms;
}
a{
float: left;
}
img{
width: 100%;
}
.icons{
text-align: center;
position: absolute;
width: 100%;
bottom: 12px;
}
.icons span{
width: 10px;
height: 10px;
display: inline-block;
background: #fff;
border-radius: 50%;
margin: 0 4px;
}
.icons span.active{
background: #555;
}
</style>
</head>
<body>
<div id="container">
<div class="slider">
<a>
<img src="./1.jpg">
</a>
<a>
<img src="./2.jpg">
</a>
<a>
<img src="./3.jpg">
</a>
<a>
<img src="./4.jpg">
</a>
</div>
<div class="icons">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script>
var sliderEle = document.querySelector('.slider');
var iconEle = document.querySelector('.icons');
var sliderContainer = document.querySelector('#container');
var sliderWidth = sliderContainer.clientWidth;
var imgs = sliderEle.children;
var icons = iconEle.children;
var imageLength = imgs.length;
var currentIndex = 1;
var animateTime = '400';
var isLoop = true;
var timer = 0;
var startX = 0;
var startY = 0;
var deltaX = 0;
function initSlider() {
var width = 0;
//复制最后一张图片和第一张图片分别作为slider的第一个和最后一个元素
if(imgs.length > 0) {
sliderEle.insertBefore(imgs[imageLength - 1].cloneNode(true), imgs[0]);
sliderEle.appendChild(imgs[1].cloneNode(true));
}
//定义容器高度
for(var i = 0, len = imgs.length; i < len; i++){
imgs[i].style.width = sliderWidth + 'px';
width += sliderWidth;
}
sliderEle.style.width = width + 'px';
//将图片定位到第一张
sliderEle.style.transform = `translate(-${sliderWidth}px, 0)`;
icons[0].className = 'active';
}
function changImg(index) {
var left = 0;
index += 1;
left = index * sliderWidth;
sliderEle.style.transform = `translate(-${left}px, 0)`;
sliderEle.style.transitionDuration = animateTime + 'ms';
currentIndex = index;
if(index > imageLength) {
//如果滑动到最后一张图片，
setTimeout(function(){
currentIndex = 1;
sliderEle.style.transform = `translate(-${sliderWidth}px, 0)`;
sliderEle.style.transitionDuration = '0ms';
changIcon(index - 1);
}, animateTime)
}
if(index == 0) {
//如果滑动到第一张图片，
setTimeout(function(){
currentIndex = imageLength;
left = currentIndex * sliderWidth;
sliderEle.style.transform = `translate(-${left}px, 0)`;
sliderEle.style.transitionDuration = '0ms';
changIcon(icons.length - 1);
}, animateTime)
}
}
function initTimer() {
timer = setInterval(function(){
changIcon(currentIndex);
changImg(currentIndex);
}, 4000);
}
/*
初始化小圆点icons的点击事件
*/
function initIconEvent() {
for(var i = 0; i < icons.length; i++) {
icons[i].onclick = (function(i){
return function(){
changIcon(i);
clearInterval(timer);
changImg(i);
initTimer();
}
})(i);
}
}
/*
向前滑动图片
*/
function prev() {
clearInterval(timer);
if(currentIndex == 1) {
currentIndex = -1;
changImg(currentIndex);
changIcon(imageLength - 1);
}else{
changImg(currentIndex - 2);
changIcon(currentIndex - 1);
}
initTimer();
}
/*
向后滑动图片
*/
function next() {
clearInterval(timer);
changIcon(currentIndex);
changImg(currentIndex);
initTimer();
}
/*
初始化图片左右滑动的事件
*/
function initSliderEvent() {
sliderContainer.addEventListener('touchstart',touch, false);
sliderContainer.addEventListener('touchmove',touch, false);
sliderContainer.addEventListener('touchend',touch, false);
function touch (event){
switch(event.type){
case "touchstart":
clearInterval(timer);
var touch = event.touches[0];
startX = touch.pageX;
startY = touch.pageY;
break;
case "touchmove":
var touch = event.touches[0];
deltaX = touch.pageX - startX;
var deltaY = touch.pageY - startY;
//如果是垂直方向滑动大于水平方向则忽略
if(Math.abs(deltaY) > Math.abs(deltaX)) {
return;
}
//滑动的最大宽度不能超过屏幕的宽度
var offsetWidth = Math.max(Math.min(deltaX, sliderWidth), -sliderWidth);
//重新计算当前移动的距离
var left = -(sliderWidth * currentIndex) + offsetWidth;
sliderEle.style.transform = `translate(${left}px, 0)`;
sliderEle.style.transitionDuration = '0ms';
break;
case "touchend":
if(Math.abs(deltaX) > 30) {
if(deltaX <= 0) {
next();
}else{
prev();
}
}else{
changIcon(currentIndex - 1);
changImg(currentIndex - 1);
initTimer();
}
break;
}
}
}
function changIcon(index) {
for(var i = 0; i < icons.length; i++) {
icons[i].className = '';
}
if(index == icons.length) {
index = 0;
}
icons[index].className = 'active';
}
window.onload = function(){
initSlider();
initIconEvent();
initSliderEvent();
if(isLoop) {
initTimer()
}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js实现点击左右按钮轮播图片效果实例
- JavaScript实现简单的图片轮播（通过点击左右焦点切换）
- 通过jquery的animate实现可以左右点击的轮播
- 点击轮播图片左右按钮，实现轮播效果
- js实现点击左右按钮轮播图片效果实例
- 【实践】纯jquery实现图片滑动无缝轮播，带左右按钮及控制按钮
- 简单通过点击左右按钮来改变图片轮播
- js各种图片轮播滑动插件 上下，左右缩略图按钮点击图
- PC端、移动端都可以用的图片轮播（左右滑动切换）插件及使用
- Android实现图片自动轮播并且支持手势左右无限滑动
- 基于jquery实现左右按钮点击的图片切换效果
- 点击轮播图片左右button，实现轮播效果
- jQuery实现点击缩略图显示大图片并带有左右滑动
- 基于jquery实现点击左右按钮图片横向滚动
- 在页面中，我们经常看到，一个button按钮，如果属标点击，就会触发一个窗口的显示，如果二次点击并可以隐藏，那么如何通过JAVA配合html来实现这一功能呢？
- dreamweaver实现图片超链接(点击图片按钮实现下载指定apk功能，可以用于在静态网页里做公司宣传页等)
- 简单的JS 通过点击按钮实现DIV左右移动
- 使用jQuery实现鼠标点击左右按钮滑动切换
- JavaScript实现简单的图片轮播（通过点击数字切换）
- Android通过ViewPager实现左右滑动切换图片