支持移动端原生js轮播图
直接上代码，自行复制粘贴，本人是新手，欢迎指正。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<style type="text/css">
.container{
width: 500px;
height: 400px;
overflow: hidden;
margin: 50px auto;
position: relative;
}
.list{
width: 2500px;
height: 400px;
position: absolute;
left: 0px;
}
.list img{
float: left;
height: 400px;
width: 500px;
}
.buttons{
position: absolute;
width: 75px;
height: 20px;
bottom: 10px;
left: 50%;
margin-left: -38px;
z-index: 2;
}
.buttons span{
width: 10px;
height: 10px;
margin-right: 5px;
display: inline-block;
border-radius: 5px;
background-color: gray;
opacity: 0.5;
cursor: pointer;
}
.buttons .on{
background-color: rgb(255,50,50);
opacity: 0.8;
}
.arrow{
position: absolute;
background-color: gray;
opacity: 0.5;
height: 40px;
width: 40px;
color: #fff;
text-decoration: none;
line-height: 40px;
font-size: 28px;
font-weight: 800;
text-align: center;
}
#prev{
top:50%;
left: 10px;
margin-top:-20px;
}
#next{
top:50%;
right: 10px;
margin-top:-20px;
}
</style>
</head>
<body>
<div id="container" class="container">
<div id="list" class="list">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
</div>
<div id="buttons" class="buttons">
<span index="0" class="on"></span><!--
--><span index="1"></span><!--
--><span index="2"></span><!--
--><span index="3"></span><!--
--><span index="4"></span>
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a>
</div>
<script type="text/javascript">
window.onload = function(){
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons');
var buttonsItem = buttons.getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 0;
var startX = 0;
var endX = 0;
container.addEventListener('touchend',function(event){
if(event.changedTouches.length==1&&this.getAttribute('disabled')!='disabled'){
var touch = event.changedTouches[0];
endX = touch.pageX;
var offset = endX-startX;
console.log(offset);
if(Math.abs(offset)>=50){
if(offset<0){// 右滑
nextMethod();
}else{
prevMethod();
}
}
}
});
container.addEventListener('touchmove',function(){
event.preventDefault();
})
container.addEventListener('touchstart',function(event){
if(event.targetTouches.length==1&&this.getAttribute('disabled')!='disabled'){
var touch = event.targetTouches[0];
startX = touch.pageX;
}
})
prev.addEventListener('click',function(){
if (this.getAttribute('disabled')=='disabled') {
return false;
}
prevMethod();
});
next.addEventListener('click',function(){
if (this.getAttribute('disabled')=='disabled') {
return false;
}
nextMethod();
});
for(var i=0;i<buttonsItem.length;i++){
buttonsItem[i].onclick = function(){
if (this.getAttribute('disabled')=='disabled') {
return false;
}
var i = this.getAttribute('index');
var length = Math.abs((i-index)*500);
var direction = 'right';
if (length<0) {
direction = 'left';
}
index = i;
document.getElementsByClassName('on')[0].setAttribute('class','');
buttonsItem[index].className = 'on';
animate(direction,1,length);
}
}
function prevMethod(){
if(index==0){
index = 4;
animate('right',40,2000);
}else{
index--;
animate('left',1,500);
}
document.getElementsByClassName('on')[0].setAttribute('class','');
// buttonsItem[index].setAttribute('class','on');
buttonsItem[index].className = 'on';
}
function nextMethod(){
if(index==4){
index = 0;
animate('left',40,2000);
}else{
index++;
animate('right',1,500);
}
document.getElementsByClassName('on')[0].setAttribute('class','');
buttonsItem[index].className = 'on';
}
function animate(direction,speed,length){
var end = length/speed;
var count = 0;
for(var i=0;i<end;i++){
setTimeout(function(){
count++;
var left = list.offsetLeft;
if (direction=='right') {
left -= speed;
}else{
left += speed;
}
list.style.left = left+'px';
if(count<end-1){
disabledButtons();
}else{
resumeButtons();
}
},speed*i);
}
}
function disabledButtons(){
for(var i=0;i<5;i++){
buttonsItem[i].setAttribute('disabled','disabled');
}
prev.setAttribute('disabled','disabled');
next.setAttribute('disabled','disabled');
container.setAttribute('disabled','disabled');
}
function resumeButtons(){
for(var i=0;i<5;i++){
buttonsItem[i].removeAttribute('disabled');
}
prev.removeAttribute('disabled');
next.removeAttribute('disabled');
container.removeAttribute('disabled');
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生JS实现移动端web轮播图详解（结合Tween算法造轮子）
前言 相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是 使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改. 所以我们要尝试去自己造一些轮子, 以适应各种复杂多变的需求; 另外一点, 自己写的代码如果有bug是很容易修复的, 对自身的提高也很大. 在没有阅读swiper源码的过程下,我尝试自己实现一个简易而不失实用的移动端轮播图, 经过几个小时的思考和实践终于还是实现了(如图): 实现移动端的轮播图要
-
Javascript实现视频轮播在pc端与移动端均可
最近客户要求用Javascript实现视频轮播: 有兴趣的同学可以参开一下 下面写了一个程序实现视频轮播,pc端与移动端均可以实现, 但移动端,存在有一点bug; 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <met
-
flexslider.js实现移动端轮播
效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>flexslider.js移动端轮播</title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="
-
js实现移动端轮播图效果
本文实例为大家分享了移动端轮播图效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max
-
利用纯js + transition动画实现移动端web轮播图详解
前言 在上一篇文章中,我们使用 tween算法实现了 ease-out移动效果, 其实更简洁的方法是使用 css3的 transition动画,下面话不多说了,来一起看看详细的介绍吧. 核心点: 在 我们通过代码来移动一段距离的时候, 使用 transion动画;在手指移动的时候,不使用transition动画. 使用 transition实现的动画效果的轮播图js代码不足100行 ~function () { var lastPX = 0; // 上一次触摸的位置x坐标, 需要计算出手指每次移
-
JavaScript实现移动端轮播效果
这个轮播代码不是我自己所写,是偶然游览一个简友的主页看到的,今天刚看了事件,决定来逐行分析一下这个代码.首先,移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为,所以我们要用到js中的与触摸操作有关的新事件.其实我们轮播的原理和以前相同,都是通过改变元素的位置来控制图片的出现,但让我们不是很上手的,是那些用于跟踪触摸的属性. 下面,我简单介绍一下与触摸相关的知识 触摸事件 touchstart:当手指触摸屏幕时触发,一只手指放在屏幕上也会触发 touchmove:当手指在屏幕上滑动时连续触
-
原生js实现移动开发轮播图、相册滑动特效
使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script
-
JS仿京东移动端手指拨动切换轮播图效果
如今,移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的,今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果. 这个效果的主要技术点依托于触屏设备特有的touch事件:好了,接下来就进入主题吧. 首先是html布局: 1. 这里强调的是记得给html加上viewport这个适口属性. 2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,要想达到理想效果,需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张
-
支持移动端原生js轮播图
直接上代码,自行复制粘贴,本人是新手,欢迎指正. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>轮播图</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sca
-
使用Require.js封装原生js轮播图的实现代码
index.html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>require.js封装轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #banner{ width: 830px; he
-
原生JS轮播图插件
代码分两个部分:1.HTML部分,根据注释处理即可:2.play.js插件部分,引到HTML里面即可. 1.HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>/*style标签及其内的内容,在实际项目中可以不要*/ * { margin: 0; p
-
JS原生实现轮播图的几种方法
轮播图 主要思想就是: 在大的容器里,装着一个很长的表,表是容器宽度的整数倍. 然后通过更改列表样式里的left属性来实现左右滑动. 本文旨在控制滑动五张图片,但在html中使用了七张图片,第一张和最后一张是有重复的,至于原因会在下面解释. 通过给容器设定overflow:hidden属性来保证只显示容器视口大小的一张图片. <body> <div id="container"> /*容器*/ <div id="wrap" style=
-
js轮播图之旋转木马效果
本文实例为大家分享了js轮播图之旋转木马效果的具体代码,供大家参考,具体内容如下 思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换 左旋转:将数组第一个数据删除,然后添加到数组的最后 右旋转:将数组最后一个数据删除,然后添加到数组的开头 先附上效果图,再来实现 接下来就是最主要的,封装原生js动画函数 //封装函数获取任意一个元素的任意属性的值(兼容ie8) function getStyle(element, attr) { return window.getComputedStyl
-
简单的JS轮播图代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过
-
js轮播图的插件化封装详解
本文实例为大家分享了js轮播图的插件化封装代码,供大家参考,具体内容如下 具体代码如下: ~function(){ function AutoBanner(curEleId,ajaxURL,interval){ //把之前存储获取元素的变量都作为当前实例的私有属性 this.banner = document.getElementById(curEleId); this.bannerInner = utils.firstChild(this.banner); this.bannerTip = u
-
JS轮播图实现简单代码
本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播
-
Vue.js轮播图走马灯代码实例（全）
话不多说先上效果图,本文引荐链接https://www.jb51.net/article/129112.htm 这个是html, <template> <div> <div class="back_add"> <div class="threeImg"> <div class="Containt"> <div class="iconleft" @click=&q
-
JS轮播图的实现方法
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下 需求: 自动轮播,鼠标移入轮播停止.移出继续,小圆点点击切图,左右箭头切图 效果图: 思路 通过编写过渡动画实现轮播效果,图片的出现动画以及移出动画.显示区的图片移出,切换的图进入分别调用动画,程序关键点:哪张图应该进入,哪张图应该移出. 轮播分为三部分: 自动轮播,左右箭头翻图,底部小圆点点击翻图. 编写程序顺序: 1. 小圆点点击 为什么先做小圆点呢?做小圆点点击功能时,我们能够清晰的知道哪张图片应该切换过来,哪张图片应该移