html轮播图3d翻转,jQuery自适应-3D旋转轮播图

var slideNumber; //轮播图片的数量

var miniSlideBtn = true; //miniSlideBtn=true为开启滚动按钮

var isableTouch = true; //是否可以触摸滑动切换

var isAutoPlay = true; //是否可以自动轮播

//窗口大小改变时改变轮播图宽高

$(window).resize(function() {

$(".slide").height($(".slide").width() * 0.56);

});

$(function() {

$("#slide").height($("#slide").width() * 0.56); //调整轮播图的高度

slideNumber = $("#slide img").length; //轮播图数量

for (let i = 0; i < slideNumber; i++) { //给每个div,而不是img,添加自定义属性编号

$("#slide .pic").eq(i).attr('data-img-id', i);

}//根据轮播图片数量添加图片位置对应的样式

//还有 if(slideNumber=1,=2,=3,=4,>5)

if (slideNumber = 5) {for (let i = 0; i < slideNumber; i++) {

$("#slide .pic").eq(i).addClass('p' + (i + 1));

}

}//根据图片数量设置轮播图按钮

if(miniSlideBtn) {for (let i = 0; i < slideNumber; i++) {

$("#slide .btn").append("");

}

$("#slide .btn").width(slideNumber * 34);

$("#slide .btn").css('margin-left', '-' + slideNumber * 17 + 'px'); //调整margin-left 负值使按钮居中

}//自动切换

if (isAutoPlay) { setInterval(() => { right(); }, 3000) }//触摸切换

if(isableTouch) { slideTouch(); }

imgClickChange();//点击图片左右切换图片

currentBtn();//当前轮播按钮的选中状态

});

$(".btn-prev").click(function () { //点击按钮翻上一页

left();

})

$(".btn-next").click(function () { //点击按钮翻下一页

right();

})/*下一张图片，右边的图向左走，注意:第一个变成最后一个，最后一个变成倒数第二个*/

functionright() {

let temp= newArray();for (let i = 0; i < slideNumber; i++) {

temp[i]= $("#slide .pic[data-img-id=" + i + "]").attr('class'); //临时数组获取class是pic p1,pic p2,pic p3...

}for (let i = 0; i < slideNumber; i++) {if (i == 0) { //如果编号为第一张图片，它将变成最后一个

$("#slide .pic[data-img-id=" + i + "]").attr('class', temp[slideNumber - 1]);

}else{

$("#slide .pic[data-img-id=" + i + "]").attr('class', temp[i - 1]);

}

}

imgClickChange();//点击图片左右切换图片

currentBtn();//当前轮播按钮的选中状态

}/*上一张图片, 左边的图向右走，注意:最后一张会变成第一张，第一个图变成第二个*/

functionleft() {

let temp= newArray();for (let i = 0; i < slideNumber; i++) {

temp[i]= $("#slide .pic[data-img-id=" + i + "]").attr('class'); //临时数组获取class pic p1,pic p2...

}for (let i = 0; i < slideNumber; i++) {if (i == slideNumber - 1) { //如果编号为最后一张图片，它将变成

$("#slide .pic[data-img-id=" + i + "]").attr('class', temp[0]);

}else{

$("#slide .pic[data-img-id=" + i + "]").attr('class', temp[i + 1]);

}

}

imgClickChange();//点击图片本身切换图片

currentBtn();//当前轮播按钮的选中状态

}/*点击图片左右切换图片*/

functionimgClickChange() {//$("#slide .p2").click(function(){ prevImg();});//为什么这种写法无效

//$("#slide .p4").click(function(){ nextImg();});//为什么这种写法无效

$('#slide .pic').removeAttr('onclick');

$("#slide .p2").attr('onclick', 'left()');

$("#slide .p4").attr('onclick', 'right()');

}/*当前轮播按钮的选中状态*/

functioncurrentBtn() {var cur = parseInt($("#slide .p3").attr('data-img-id'));//取.p3的当前img-id

$("#slide .btn span").removeClass('on');

$("#slide .btn span[data-minibtn-id=" + cur + "]").addClass('on');

}/*jquery写法 slideTouch(),触摸滑动切换*/

/*function slideTouch() {

let _start = 0, _end = 0;

$("#slide").on('touchstart', (e) => {

_start = e.originalEvent.targetTouches[0].pageX;

});

$('#slidd').on('touchmove', (e) => {

// _end = (_start - e.originalEvent.targetTouches[0].pageX);

_end = e.originalEvent.targetTouches[0].pageX;

});

$('#slide').on('touchend', (e) => {

if ((_start - _end) < -100) { //【起点-终点】的绝对值 >100,故 x100

left();

_end = 0;

} else if ((_start - _end) > 100) {

right();

_end = 0;

}

});

}*/

/*js原生写法 slideTouch(),作用完全同上,触摸滑动切换*/

functionslideTouch() {

let _start= 0, _end = 0,

_ele= document.getElementById('slide');

_ele.addEventListener('touchstart', touchStart, false);

_ele.addEventListener('touchmove', touchMove, false);

_ele.addEventListener('touchend', touchEnd, false);functiontouchStart(e) {

_start= e.targetTouches[0].pageX;

}functiontouchMove(e) {

_end= e.targetTouches[0].pageX;

}functiontouchEnd(e) {if ((_start - _end) < -100) { //【起点-终点】的绝对值 >100,故 x100

left();

_end= 0;

}else if ((_start - _end) > 100) {

right();

_end= 0;

}

}

}