移动端实现文字轮播_js实现移动端轮播图

本文实例为大家分享了js实现移动端轮播图的具体代码，供大家参考，具体内容如下

这是结构

Document

这是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.οnresize=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");

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。