javascript之js实现简单的无缝轮播图（可调节方向）

本节介绍简单轮播图的做法，效果为，手机端时，向左有滑动一定的距离后，轮播图移动方向改变

需求分析

1 ：实现无缝轮播。即从1-3或者从3-1无限循环
2 ：兼容手机端和pc端；主要是手机端
3 ：手机端时先左滑动一定距离时轮播图开始向左移动，相反，向右滑动一定距离时轮播图开始向右移动
4 ：响应式布局，适用于各种分辨率

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">* {margin: 0;padding: 0;}/* 这里的宽度高度可以动态设置，因为所以的宽度高度都是根据他所设置所以设置之后，所有的元素大小都会随之改变*/#carousel {position: relative;left: 0;right: 0;top: 100px;margin: auto;width: 800px;height: 500px;overflow: hidden;}.carousel_inner {position: absolute;height: 100%;}img {display: block;float: left;}</style></head><body><div id="carousel"><div class="carousel_inner"><img src="img/1.png"><img src="img/2.png"><img src="img/3.png"></div></div><script type="text/javascript">var carousel = document.getElementById("carousel");var inner = document.querySelector('.carousel_inner');var indexTimer = speedTimer = null;var index = 0; //代表的图片页数,即改变index 就换图片var speed = -10; //移动的速度var direction = 'left'; //轮播图初始移动方向var startX, endX, moveX;//需要注意的是,下面这句话要写在变量img上面,不能只能读取三个,且图片不能设置宽度高度// 实现无缝轮播的第一个关键点inner.innerHTML += inner.innerHTML;var img = document.querySelectorAll('img');//以下为动态设置宽度,即实现响应式布局inner.style.width = carousel.offsetWidth * 6 + 'px';for (var i = 0; i < img.length; i++) {img[i].style.width = carousel.offsetWidth + 'px';img[i].style.height = carousel.offsetHeight + 'px';}//在改变分辨率的同时动态设置宽度;window.addEventListener('resize', function() {inner.style.width = carousel.offsetWidth * 6 + 'px';for (var i = 0; i < img.length; i++) {img[i].style.width = carousel.offsetWidth + 'px';img[i].style.height = carousel.offsetHeight + 'px';}})//以下代码开始实现轮播图效果//设置定时器,每几秒换一张图片indexTimer = setInterval(indexFn, 2000);//更换图片移动方向,pc端可以mouseup,down代替//即鼠标向向哪个方向移动一定距离,图片就吵哪个方向移动inner.addEventListener('touchstart', touchStart)inner.addEventListener('touchend', touchEnd)function indexFn() {// 下面实现无缝轮播的第二个要点//向左移动时//当移动到复制图片的第一个图片时(这里是第四个图片，由于是复制 和第一张图片一样)//下一张图片应该是第五张图片(即第二张照片),所以直接跳转到开头,改变speed的正负即改变方向//向右移动时//把复制的所有图片移到左面，呢么当前显示的图片就是滴四张图片(即第一张图片)//因为是向用移动,呢么下一张图片就是第三种图片if (direction == 'left') {speed = -10;if (index == img.length / 2) {inner.style.left = 0;index = 1;} else {index++;}} else {speed = 10;if (index == 0) {inner.style.left = -inner.offsetWidth / 2 + 'px';index = 2} else {index--;}}moveStart(-index * img[0].offsetWidth)}function moveStart(target) {// console.log(target);//清除上一次定时器产生的影响clearInterval(speedTimer);speedTimer = setInterval(function() {//这里最好使用绝对值,我用过等于,但缺点是 如果不为整数的话//呢么这个定时器就会一直执行下去if (Math.abs(target - inner.offsetLeft) < 10) {clearInterval(speedTimer);} else {inner.style.left = inner.offsetLeft + speed + 'px';}}, 10)}function touchStart(e) {startX = e.touches[0].pageX;}function touchEnd(e) {endX = e.changedTouches[0].pageX;moveX = endX - startX;if (moveX > 20) {direction = 'right';clearInterval(indexTimer)indexTimer = setInterval(indexFn, 2000);}if (moveX < -20) {direction = 'left';clearInterval(indexTimer)indexTimer = setInterval(indexFn, 2000);}console.log(direction)}</script></body>
</html>

javascript之js实现简单的无缝轮播图（可调节方向）相关推荐

javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
左右无缝轮播html,JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: 无缝轮播图 *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;h ...
html js轮播图无白链接,JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)...
简介这篇文章主要介绍了JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧,文章约11114字,浏览量505,点赞数3,值得参考! *{ margin:0; pa ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
jquery实现动态左右无缝轮播图
JQ代码实现动态无缝轮播图功能相比之下运用jquery比js原生代码书写更为方便简介通俗易懂以下为代码: <!DOCTYPE html> <html><hea ...
左右无缝轮播图的实现
无缝轮播图: <title>无缝轮播图</title><style>*{margin: 0;padding:0; }ul{list-style: none;}.ba ...
jq 实现无缝轮播图
工作中经常会用到轮播图,这里记载两种轮播图,供大家参考一.自动播放的无缝轮播图(一张图片占满屏) 首先是HTML, <div class='bannerCon'><ul class ...
老徐WEB：最简单详细的轮播图原理和制作过程（一）
老徐利用空闲时间,制作了一个最简单的轮播图,主要介绍轮播图的原理和制作过程,只要大家能认真看完这篇文章,并理解文中内容,就能完全掌握轮播图的制作了.之后工作中碰到复杂的轮播图,自己也能思考制作出来了. ...
html5时间线图片自动轮播,js实现自动播放匀速轮播图
本文实例为大家分享了js实现自动播放匀速轮播图的具体代码,供大家参考,具体内容如下函数封装:( 匀速运动函数) function animate(obj,target,step,speed){ cl ...
html 无缝轮播图完整代码
1,实现轮播效果 2,实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

javascript之js实现简单的无缝轮播图（可调节方向）

需求分析

javascript之js实现简单的无缝轮播图（可调节方向）相关推荐

最新文章

热门文章