js实现移动端轮播图
本文实例为大家分享了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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/jd_phnoe.css" rel="external nofollow" >
<link rel="stylesheet" href="./css/base.css" rel="external nofollow" >
<title>Document</title>
<script src="./js/jd_phnoe.js"></script>
</head>
<body>
<div class="jd_layout">
<div class="jd_banner">
<ul class="jd_bannerimg clearfix">
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l1.jpg" alt="" /> </a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l2.jpg" alt="" /> </a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l3.jpg" alt="" /> </a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l4.jpg" alt="" /> </a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l5.jpg" alt="" /> </a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l6.jpg" alt="" /> </a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l7.jpg" alt="" /> </a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l8.jpg" alt="" /> </a>
</li>
</ul>
<!-- 点标记 -->
<ul class="jd_bannerIndicator clearfix">
<li></li>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
这是CSS
/* 搜索部分 */
.jd_layout{
width: 100%;
max-width: 640px;
min-width: 320px;
height: auto;
margin: 0px auto;
background-color: #ccc;
}
/* 轮播图部分 */
.jd_banner{
width: 100%;
overflow: hidden;
position: relative;
}
.jd_bannerimg{
width: 1000%;
position: relative;
}
.jd_bannerimg > li{
width: 10%;
float: left;
}
.jd_bannerimg>li img{
width: 100%;
/*1.设置为块元素
2.可以将文本的字体大小设置为0
3.vertical-align:bottom*/
display: block;
}
/* 点标记 */
.jd_bannerIndicator{
position: absolute;
left: 50%;
bottom: 5px;
transform: translateX(-50%);
}
.jd_bannerIndicator li{
width: 6px;
height: 6px;
float: left;
border: 1px solid #fff;
border-radius: 50%;
/* opacity: 0.7; */
margin: 0 3px;
/* cursor: pointer; */
}
.jd_bannerIndicator li:first-of-type{
margin-left: 0px;
}
.jd_bannerIndicator >li.active{
background-color: #fff;
}
dase
/*公共样式*/
/*1.样式重置*/
html,body,ul,li,img,a,p,div,form,input,h3{
padding: 0;
margin: 0;
/*设置盒模型*/
box-sizing: border-box;
/*去除移动端特有的点击高亮效果*/
-webkit-tap-highlight-color: transparent;
}
body{
font-family: "微软雅黑",sans-serif;
font-size: 13px;
}
a,
a:hover{
color: #666;
text-decoration: none;
}
ul{
list-style: none;
}
input{
/*1.清除文本框获取焦点时默认的边框阴影*/
outline: none;
/*2.去除边框*/
border: none;
/*3.添加边框*/
border: 1px solid #ccc;
}
/*2.添加新的样式*/
.f_left{
float: left;
}
.f_right{
float: right;
}
.m_left10{
margin-left: 10px;
}
.m_right10{
margin-right: 10px;
}
.m_top10{
margin-top: 10px;
}
.clearfix::before,
.clearfix::after{
content: "";
display: block;
height: 0;
line-height: 0px;
clear: both;
visibility: hidden;
}
js
window.onload = function () {
banner();
}
//轮播图
function banner(){
/*1.设置修改轮播图的页面结构
* a.在开始位置添加原始的最后一张图片
* b.在结束位置添加原始的第一张图片*/
/*1.1.获取轮播图结构*/
var banner=document.querySelector(".jd_banner");
/*1.2.获取图片容器*/
var imgBox=banner.querySelector("ul:first-of-type");
//1.3 获取第一张图片
var first=imgBox.querySelector("li:first-of-type");
//1.4获取最后一张图
var last=imgBox.querySelector("li:last-of-type");
// console.log(first);
// console.log(last);
//克隆添加图片
/*1.5.在首尾插入两张图片 cloneNode:复制一个dom元素*/
imgBox.appendChild(first.cloneNode(true));
/*1.6insertBefore(需要插入的dom元素，位置)*/
imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
//获取对应的样式
//2.1获取li的位置
var lis=imgBox.querySelectorAll("li");
/*2.2 获取li元素的数量*/
var count=lis.length;
/*2.3.获取banner的宽度*/
var bannerWidth=banner.offsetWidth;
/*2.4 设置图片盒子的宽度*/
imgBox.style.width=count*bannerWidth+"px";
/*2.5 设置每一个li(图片)元素的宽度*/
for(var i=0; i < lis.length;i++){
lis[i].style.width=bannerWidth+"px";
}
/*定义图片索引:图片已经有一个宽度的默认偏移*/
var index=1;
/*3.设置默认的偏移*/
imgBox.style.left=-bannerWidth+"px";
/*4.当屏幕变化的时候，重新计算宽度*/
window.onresize=function(){
bannerWidth=banner.offsetWidth+"px";
imgBox.style.width=count*bannerWidth+"px";
for(var i = 0; i < lis.length;i++){
lis[i].style.width=bannerWidth+"px";
}
imgBox.style.left=-index*bannerWidth+"px";
}
//自动轮播
var timerId;
var strtime=function(){
timerId=setInterval(function(){
index++;
//添加过度效果
imgBox.style.transition="left 0.5s ease-in-out"
//设置偏移量
imgBox.style.left=(-index*bannerWidth)+"px";
setTimeout(function(){
//当走到最后一张时候,我就让他等于最后一张
if(index==count-1){
index=1;
// 清除过度效果
imgBox.style.transition="none";
/*偏移到指定的位置*/
imgBox.style.left=(-index*bannerWidth)+"px";
}
},500)
},1500)
}
//自动播放调用
strtime();
//实现手动轮播
var startX,moveX,distanceX;
/*为图片添加触摸事件--触摸开始*/
var isEnd = true;
imgBox.addEventListener("touchstart",function(e){
//停止定时器
clearInterval(timerId);
//console.log(e);
startX=e.targetTouches[0].clientX;
});
//为图片添加触摸过程,滑动图片
imgBox.addEventListener("touchmove",function(e){
if(isEnd==true){
//console.log(123);
/*记录手指在滑动过程中的位置*/
moveX=e.targetTouches[0].clientX;
/*计算坐标的差异*/
distanceX=moveX-startX;
//清除过度效果
imgBox.style.transition="none";
//基于之前轮播图偏移的位置
imgBox.style.left=(-index*bannerWidth + distanceX)+"px";
}
})
/*添加触摸结束事件*/
imgBox.addEventListener("touchend",function(e){
//获取滑动距离,判断是否超过100px
isEnd=false;
if(Math.abs(distanceX) > 50){
//判断滑动方向
if(distanceX > 0){//上一张
index--;
}else{//下一张
index++;
}
//过度效果
imgBox.style.transition="left 0.5s ease-in-out";
//偏移位置
imgBox.style.left=-index*bannerWidth+"px";
}else if(Math.abs(distanceX) > 0){//回弹效果
//过度效果
imgBox.style.transition="left 0.5s ease-in-out";
//偏移位置
imgBox.style.left=-index*bannerWidth+"px";
}
/*将上一次move所产生的数据重置为0*/
startX=0;
moveX=0;
distanceX=0;
});
/*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕的时候，会触发这个事件*/
imgBox.addEventListener("webkitTransitionEnd",function(){
console.log(index,33333);
/*如果到了最后一张(count-1)，回到索引1*/
/*如果到了第一张(0)，回到索引count-2*/
if(index==count-1){
index=1;
imgBox.style.transition="none";
imgBox.style.left=-index*bannerWidth+"px";
}else if(index==0){
index=count-2;
imgBox.style.transition="none";
imgBox.style.left=-index*bannerWidth+"px";
}
yuandian(index);
setTimeout(function () {
isEnd=true;
clearInterval(timerId);
strtime();
},100)
});
// //圆点排他
var yuandian=function (index) {
//先找到所有的li 进行遍历移除所有样式,为自己加上样式
var lis=banner.querySelector("ul:last-of-type").querySelectorAll("li");
for(var i = 0; i < lis.length; i++){
lis[i].classList.remove("active");
}
lis[index-1].classList.add("active");
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现适用于移动端的跑马灯抽奖特效示例
本文实例讲述了jQuery实现适用于移动端的跑马灯抽奖特效.分享给大家供大家参考,具体如下: 图片全部隐私处理 跑马灯抽奖特效难点一:奖品位置排放,如下图 <div class="gift_div"> <div class="gift gift1">奖品1</div> <div class="gift gift2">奖品2</div> <div class="gift g
-
如何封装了一个vue移动端下拉加载下一页数据的组件
前言 简单封装了一个vue下拉加载组件,分享一下,已放到github和前端资源库,欢迎下载! 组件代码 <template> <div class="my-scroll" :class="[scrollState?'prohibit':'allow']" ref="myScroll" @scroll.passive="onScroll($event)" @touchmove="onScroll($e
-
移动端使用CSS或JS判断横屏和竖屏的讲解
在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 首先在head中加入如下代码: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 针对上述viewport标签有如下说明 1).content中的width
-
移动端（微信等使用vConsole调试console的方法
前言 因为最近一直在弄移动端项目,由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼.之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试 使用 废话不多说,说说怎么使用的吧. 首先去下载相关的代码,由于只需要在页面引入一个js文件,直接去下载就可以,地址: 请戳我 或者使用 npm 安装: npm install vconsole 使用webpack,然后js代码中 import VCo
-
利用Vconsole和Fillder进行移动端抓包调试方法
在开发中,有时候我们需要在手机上进行测试,可是如果遇到bug,我们怎么进行抓包调试呢?这里介绍两种方式: Vconsole Fillder 利用Vconsole进行调试 一个轻量.可拓展.针对手机网页的前端开发者调试面板 Vconsole特性: 查看 console 日志 查看网络请求 手动执行 JS 命令行 自定义插件 入门 ①首先需要下载Vconsole,地址https://www.npmjs.com/package/vconsole ② npm install vconsole ③ Imp
-
使用vue开发移动端管理后台的注意事项
独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台),还是有些经验不足,包括对产品的全局思考,对插件的选择等,都有考虑不周的缺点,导致自己中途想换图形界面插件,浪费了点时间,这里记录下,总结下经验,理一下思路. 1.对于项目的一些心得与体会 首先的一点,就是,对于图形界面框架的选型,这个很重要,对于一项目来说,开始动手前就要对项目的设计图有个完整的了解,以便于自己选择插件或者框架: 然后就是,对于交互性操作,比如:上传图片,预览图片啥的,应该选择是否是用图形界面框架来实现还是另选专门的
-
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
本文实例讲述了jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法.分享给大家供大家参考,具体如下: 项目描述:九宫格的跑马灯抽奖特效,抽中奖品1-9的概率分别是2%,2%,4%,1%,12%,1%,8%,70%,概率总计100%,并且每天抽奖次数最多为3次. html部分的代码和css部分的代码和上一节<jQuery移动端跑马灯抽奖特效>一样,没有修改,js部分有修改,增加了概率. 原理很简单,同样是取随机数,判断这个随机数的大小在100的0-2,2-4,4-8,8-9,9-21,
-
详解vue移动端项目代码拆分记录
撸一套vue多端共用,非常适合需要快速且全面上线的项目.但是多端共用一套vue代码,由于平台间的互相限制,每端在某些业务例如支付分享等是完全独立的代码,每个平台的支付方式也会有所差异,造成在这些业务的实现过程中会有太冗余的"if else"判断.所以为了提高代码的复用性.扩展性,可以将代码拆分,以-小程序和App两端举例,一份部署到小程序,一份部署到App(Android&Ios). 首先代码拆分应该保证本地开发的时候只有一套代码,提取所有公共页面,并且分别提取小程序和app的
-
vue插件mescroll.js实现移动端上拉加载和下拉刷新
做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js //不要使用cnpm安装 导入(在哪个页面使用,则在哪个页面导入(这里的话,我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入)): import MescrollVue from 'mescroll.js/mescroll.vue' 注册组件: components: { Mes
-
原生js实现移动端Touch轮播图的方法步骤
Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. /* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的"小圆点"