原生js轮播图（php）

小杨得努力

于 2023-05-26 15:02:06 发布

阅读量177

点赞数

文章标签： javascript php

本文链接：https://blog.csdn.net/weixin_49670278/article/details/130887069

版权

这是一个使用原生JavaScript实现的轮播图，结合PHP，展示商品的QC图片。用户可以查看图片并进行确认或重新拍摄的决策。页面包含商品名称、订单号、尺码等详细信息，同时提供了移动端适配的布局和交互功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<html>

<head>

<title>QC Review - {{ optional($order_item_first->shopyy_orders)->itemno }} - {{ $order_item_first->goods_name }}</title>

</head>

<body>

@if (!empty(request('qc_confirm_id')))

@else

@endif

@if (!empty($store_first->qc_header))

{!! $store_first->qc_header !!}

{{-- <div class="header">

<a href="{{ $store_first->domain }}" target="_blank"><img src='{{ $order_item_first->logo_img }}' style="width: 260px; height: 55px;"></a>

</div>

<li>

<a href="javascript:;">New Releases</a>

</li>

<li>

</li>

<li>

<a href="javascript:;">Jordan</a>

</li>

<li>

<a href="javascript:;">Yeezy</a>

</li>

<li>

</li>

<li>

<a href="javascript:;">StockPro|SP</a>

</li>

<li>

<a href="javascript:;">Retail Batch</a>

</li>

<li>

</li>

<li>

<a href="javascript:;">Others</a>

</li>

<li>

<a href="javascript:;">promotions</a>

</li>

<li>

<a href="javascript:;">2022 TOP SETTING</a>

</li>

</ul>

</div>

</div> --}}

@else

<a href="{{ $store_first->domain }}" target="_blank"><img src='{{ $order_item_first->logo_img }}' style="width: 260px; height: 55px;"></a>

<a href="{{ $store_first->domain }}" target="_blank"><span style="font-size: 28px; font-weight: 700; margin-left: 100px; color: #1e9fff;">Go Back To Home</span></a>

</div>

@endif

<a href="{{ $store_first->domain }}"> home > </a>

{{-- <a href="javascript:;"> Air jordan > </a>

<a href="javascript:;"> Air jordan1 > </a>

<a href="javascript:;"> jordan height > </a> --}}

<span class="productname" style="font-size:17px"> QC Pictures</span>

</div>

@forelse ($order_item_first->qc_goods_images_json as $infos)

@if ($loop->iteration == 1)

</div>

@endif

@endforeach

@forelse ($order_item_first->qc_goods_images_json as $infos)

@empty

<p>No QC Pictures</p>

@endforelse

</li>

</ul>

</div>

<p class="productName"> Product name

</p>

<p class="article"><span>{{ $order_item_first->goods_name }}</span></p>

<p class="productName">Order number</p>

<p class="article"><span>{{ optional($order_item_first->shopyy_orders)->itemno }}</span></p>

@php

$sku_one = interceptStringBehind($order_item_first->sku_value, "SIZE:");

$sku_one_A = interceptStringFront(interceptStringBehind($order_item_first->sku_value, "SIZE:"), '<br />');

$sku_two = interceptStringBehind($order_item_first->sku_value, "Size:");

$sku_two_A = interceptStringFront(interceptStringBehind($order_item_first->sku_value, "Size:"), '<br />');

echo (strpos($order_item_first->sku_value, 'SIZE:') !== false || strpos($order_item_first->sku_value, 'Size:') !== false) ? (($sku_one || $sku_two) ? ($sku_one ? ($sku_one_A ? $sku_one_A : $sku_one) : ($sku_two ? ($sku_two_A ? $sku_two_A : $sku_two) : $sku_two)) : $order_item_first->sku_value) : $order_item_first->sku_value;

@endphp

</span></p>

<p class="productName">Member name </p>

<p p class="article"><span>{{ optional($order_item_first->shopyy_orders)->user_name }}</span></p>

</div>

@if (($order_item_first->qc_goods_status === 1 || $order_item_first->qc_goods_status === 5) && $order_item_first->qc_goods_status !== 2 && $order_item_first->qc_goods_status !== 3)

<button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal confirm_qc btn1" style="line-height: 20px;">Satisfied</button>

@endif

@if (($order_item_first->qc_goods_status === 1 || $order_item_first->qc_goods_status === 5) && $order_item_first->qc_goods_status !== 2 && $order_item_first->qc_goods_status !== 3)

<button type="button" style="line-height: 20px;" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-danger remake_qc btn2">Please retake QC</button>

@endif

</div>

</div>

<a class="logo" href="{{ $store_first->domain }}" target="_blank"><img src='{{ $order_item_first->logo_img }}' style="width: 160px; height: 30px;"></a>

</div>

<div class="proname" style="margin-left:-20px"><a href="{{ $store_first->domain }}" target="_blank"><span style="font-size:15px;font-weight:700;padding-left:30px; color: #1e9fff;">Go Back To Home</span></a></div>

</div>

<li class="slider"><a href=""> @forelse ($order_item_first->qc_goods_images_json as $infos)

<img class="bannerimg" style="display:inline-block;overflow:hidden;width: 100%;height:auto;margin-left:-3px;

" οnclick="return false;" src="{{ $infos }}" alt="">

@empty

<p>No QC Pictures</p>

@endforelse

</a>

</li>

</ul>

@forelse ($order_item_first->qc_goods_images_json as $infos)

@if ($loop->iteration == 1)

<div id="outerdiv" style="position:fixed;top:0;left:0;background:#fff;z-index:99999999;width:768px;

height:100%;display:none;">

</span>

</div>

</div>

@endif

@endforeach

</div>

<p class="title1" style="font-size: 30px;margin: 0 auto;height: 40px;line-height: 40px;text-align: center;margin-top: 20px;font-weight:700;">QC Pictures</p>

<p class="productName"> Product name

</p>

<p class="article1"><span>{{ mb_strlen($order_item_first->goods_name) >= 55 ? (mb_substr($order_item_first->goods_name, 0, 55) . "....") : $order_item_first->goods_name }}</span></p>

<p class="productName">Order number</p>

<p class="article1"><span>{{ optional($order_item_first->shopyy_orders)->itemno }}</span></p>

@php

$sku_one = interceptStringBehind($order_item_first->sku_value, "SIZE:");

$sku_one_A = interceptStringFront(interceptStringBehind($order_item_first->sku_value, "SIZE:"), '<br />');

$sku_two = interceptStringBehind($order_item_first->sku_value, "Size:");

$sku_two_A = interceptStringFront(interceptStringBehind($order_item_first->sku_value, "Size:"), '<br />');

@endphp

</span></p>

<p class="productName">Member name </p>

<p p class="article1"><span>{{ optional($order_item_first->shopyy_orders)->user_name }}</span></p>

</div>

<br>

@if (($order_item_first->qc_goods_status === 1 || $order_item_first->qc_goods_status === 5) && $order_item_first->qc_goods_status !== 2 && $order_item_first->qc_goods_status !== 3)

<button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal confirm_qc btn1">Satisfied</button>

@endif

@if (($order_item_first->qc_goods_status === 1 || $order_item_first->qc_goods_status === 5) && $order_item_first->qc_goods_status !== 2 && $order_item_first->qc_goods_status !== 3)

<button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-danger remake_qc btn2">Please retake QC</button>

@endif

</div>

<div class="bottom

" style=" width:100%; background-color: #393939;">

</div>

<br>

// 获取当前屏幕的宽度

$(document).ready(function() {

let width = document.body.clientWidth;

if (width < 525) {

$('#pc').hide()

$('#mobile').show()

// 轮播图(MOBILE)

var li = document.querySelector('.slider');

var lis = li.querySelectorAll('.bannerimg');

// console.log(lis, 'lis.length');

// 1.图片滚动

// 获取banner宽度

var w = lis[0].offsetWidth;

var index = 0;

var timer = setInterval(function() {

index++;

var translatex = -index * w;

li.style.transition = 'all .2s';

li.style.transform = 'translateX(' + translatex + 'px)';

}, 2000);

// 2.无缝滚动

// 等图片过渡完成之后，再去判断监听过渡完成的事件

li.addEventListener('transitionend', function() {

if (index >= lis.length) {

index = 0;

// 去掉过渡，让ul快速跳到目标位置

li.style.transition = 'none';

//利用最新的索引号乘以宽度继续滚动图片

var translatex = -index * w;

li.style.transform = 'translateX(' + translatex + 'px)';

} else if (index < 0) {

index = 1;

li.style.transition = 'none';

//利用最新的索引号乘以宽度继续滚动图片

var translatex = -index * w;

li.style.transform = 'translateX(' + translatex + 'px)';

}

})

// 4. 手指滑动轮播图

// 触摸元素touchstart：获取手指初始坐标

var startX = 0;

var moveX = 0; // 后面会使用这个移动距离，所以要定义为全局变量

var flag = false; //用来标志手指是否真的移动，还是只是点击

li.addEventListener('touchstart', function(e) {

startX = e.targetTouches[0].pageX;

// 手指触摸的时候就停止定时器

clearInterval(timer);

});

// 移动手指touchmove：计算手指的滑动距离，并且移动盒子

li.addEventListener('touchmove', function(e) {

// 计算移动距离

// e.targetTouches[0]为第一个手指，[1]表示第二个手指

moveX = e.targetTouches[0].pageX - startX;

// 移动盒子：盒子原来的位置 + 手指移动的距离

var translateX = -index * w + moveX;

// 手指拖动的时候，不需要动画效果，所以要取消过渡效果

li.style.transition = 'none';

li.style.transform = 'translateX(' + translateX + 'px)';

flag = true;

e.preventDefault(); //组织滚动屏幕的行为

});

// 手指离开，根据移动距离去判断是回弹还是播放上一张或者下一张

li.addEventListener('touchend', function(e) {

// 只有手指移动过了，才执行下面的代码

if (flag) {

//（1）如果移动距离大于50像素，则播放上一张或者下一张

if (Math.abs(moveX) > 50) {

// 如果是右滑就是播放上一张，moveX是正值

if (moveX > 0) {

index--;

} else {

// 如果是左滑就是播放下一张，moveX是负值

index++;

}

// 用最新的index乘以宽度

var translateX = -index * w;

li.style.transition = 'all .3s';

li.style.transform = 'translateX(' + translateX + 'px)';

} else {

//（2）如果移动距离小于50像素就回弹

var translateX = -index * w;

li.style.transition = 'all .1s';

li.style.transform = 'translateX(' + translateX + 'px)';

}

// 手指离开的时候就重新开启定时器

// 注意：开启定时器之前要先清空之前的定时器，保证当前只有一个定时器在执行

clearInterval(timer);

timer = setInterval(function() {

index++;

var translateX = -index * w;

// 添加动画效果

li.style.transition = 'all .3s';

li.style.transform = 'translateX(' + translateX + 'px)';

}, 2000);

});

$('.close').css({

'top':6 + 'px',

'left': $(window).width()-30 +'px'

})

// 移动端图片预览放大功能

$(function() {

$(".bannerimg").click(

function() {

var _this = $(this); //将当前的元素作为_this传入函数

imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);

//移动端手指移动事件,如果不需要移动端手指事件,这一部分内容可以不加,只要上面两行代码以及imgShow()事件

var eleImg = document.querySelector('#innerdiv');

var store = {

scale: 1

};

//定义移动端的初始位置

var position_top, position_left, pageX, pageY;

// 缩放事件的处理

//事件开始

eleImg.addEventListener('touchstart', function(event) {

event.preventDefault(); //阻止默认事件，防止底部内容滚动

//在触屏设备下，要判断是单指还是多指操作，可以通过event.touches数组对象的长度判断。

var touches = event.touches;

var events = touches[0]; //单指

var events2 = touches[1]; //双指

if (touches.length == 1) { //单指操作

pageX = Number(events.pageX);

pageY = Number(events.pageY);

store.moveable = true;

var _obj = $('#innerdiv');

// .css获取的值是字符串

position_left = parseFloat(_obj.css('left')

.split('px'));

position_top = parseFloat(_obj.css('top')

.split('px'));

} else {

// 第一个触摸点的坐标

store.pageX = events.pageX;

store.pageY = events.pageY;

store.moveable = true;

if (events2) {

store.pageX2 = events2.pageX;

store.pageY2 = events2.pageY;

}

store.originScale = store.scale || 1;

}

}, {

passive: false

}); //passive: false必须加上,否则控制台报错

//开始移动

document.addEventListener('touchmove', function(event) {

// event.preventDefault();//阻止默认事件，防止底部滚动

if (!store.moveable) {

return;

}

var touches = event.touches;

var events = touches[0];

var events2 = touches[1];

if (touches.length == 1) {

var pageX2 = Number(events.pageX);

var pageY2 = Number(events.pageY);

//控制图片移动

$('#innerdiv').css({

'top': position_top + pageY2 - pageY + 'px',

"left": position_left + pageX2 - pageX + 'px'

})

} else {

// 双指移动

if (events2) {

// 第2个指头坐标在touchmove时候获取

if (!store.pageX2) {

store.pageX2 = events2.pageX;

}

if (!store.pageY2) {

store.pageY2 = events2.pageY;

}

// 获取坐标之间的距离

var getDistance = function(start, stop) {

//用到三角函数

return Math.hypot(stop.x - start.x,

stop.y - start.y);

};

// 双指缩放比例计算

var zoom = getDistance({

x: events.pageX,

y: events.pageY

}, {

x: events2.pageX,

y: events2.pageY

}) / getDistance({

x: store.pageX,

y: store.pageY

}, {

x: store.pageX2,

y: store.pageY2

});

// 应用在元素上的缩放比例

var newScale = store.originScale * zoom;

// 最大缩放比例限制

if (newScale > 3) {

newScale = 3;

}

// 记住使用的缩放值

store.scale = newScale;

// 图像应用缩放效果

eleImg.style.transform = 'scale(' +

newScale + ')';

}

}, {

passive: false

});

document.addEventListener('touchend', function() {

store.moveable = false;

delete store.pageX2;

delete store.pageY2;

});

document.addEventListener('touchcancel', function() {

store.moveable = false;

delete store.pageX2;

delete store.pageY2;

});

//移动端手指页面结束

});

//遮罩层图片位置（预览banner图层（放大拖拽））

function imgShow(outerdiv, innerdiv, bigimg, _this) {

//这是刚才判断是否PC端的函数事件

var flag = IsPC();

console.log(flag);

var src = _this.attr("src"); //获取当前点击的pimg元素中的src属性

$(bigimg).attr("src", src); //设置#bigimg元素的src属性

/*获取当前点击图片的真实大小，并显示弹出层及大图*/

$("<img/>").attr("src", src).load(function() {

//注意在使用这种方法获取窗口高度和宽度的时候,

//务必在html页面最上方加上一句<!DOCTYPE html>,否则获取屏幕高度时会出问题

var windowW = $(window).width(); //获取当前窗口宽度

var windowH = $(window).height(); //获取当前窗口高度

var realWidth = this.width; //获取图片真实宽度

var realHeight = this.height; //获取图片真实高度

var imgWidth, imgHeight;

var scale = 3; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

if (realHeight > windowH * scale) { //判断图片高度

imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放

imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度

if (imgWidth > windowW * scale) { //如宽度扔大于窗口宽度

imgWidth = windowW * scale; //再对宽度进行缩放

}

} else if (realWidth > windowW * scale) { //如图片高度合适，判断图片宽度

imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放

imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度

} else { //如果图片真实高度和宽度都符合要求，高宽不变

if (flag == false) {

imgWidth = realWidth;

imgHeight = realHeight;

} else if (realWidth >= 1000) { //这里我怕图片太大又做了个判断

imgWidth = realWidth;

imgHeight = realHeight;

} else {

imgWidth = realWidth * 2;

imgHeight = realHeight * 2;

}

$(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放

var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距

var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距

$(innerdiv).css({

"top": h,

"left": w

}); //设置#innerdiv的top和left属性

$(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg

});

$(outerdiv).click(function() { //再次点击淡出消失弹出层

$(outerdiv).fadeOut("fast");

});

$('.closeBtn').click(function() { //再次点击淡出消失弹出层

$(outerdiv).fadeOut("fast");

});

};

function IsPC() {

var sUserAgent = navigator.userAgent;

if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('Symbian') > -1) {

return false;

} else {

return true;

}

} else {

$('#pc').show()

$('#mobile').hide()

// PC JS

// pc头部导航栏

const topnavul = document.querySelector('.bread')

//console.log(topnavul, '2top31232123123123');

topnavul.addEventListener('mouseenter', function(e) {

if (e.target.tagName === 'A') {

// console.log(e.target.tagName, '213123123123');

e.target.parentNode.style.borderBottom = "2px solid #4bb2ff"

}

})

// pc端预览图层

const small = document.querySelector('.small')

const middle = document.querySelector('.middle')

const large = document.querySelector('.large')

let smallPicBox = document.querySelectorAll('.smallPicBox')

smallPicBox[0].style.border = "2px solid #4bb2ff"

// 切换图片

small.addEventListener('click', function(e) {

if (e.target.tagName === 'IMG') {

// console.log(e, 123213213213213213213);

middle.querySelector('img').src = e.target.src

large.style.backgroundImage = `url(${e.target.src})`

e.target.style.backgroundColor = '#4bb2ff'

e.target.parentNode.style.border = "2px solid #4bb2ff"

const anotherParent = $(e.target.parentNode).siblings()

for (var j = 0; j < anotherParent.length; j++) {

anotherParent[j].style.border = ''

}

})

// 显示隐藏大图弹层

let timerId = null

const show = function() {

clearTimeout(timerId)

large.style.display = 'block'

}

const hide = function() {

clearTimeout(timerId)

timerId = setTimeout(function() {

large.style.display = 'none'

}, 20)

}

middle.addEventListener('mouseenter', show)

middle.addEventListener('mouseleave', hide)

// 鼠标进入大图（隐藏背景图）

large.addEventListener('mouseenter', hide)

large.addEventListener('mouseleave', hide)

// 移动遮罩层和大图预览

const layer1 = middle.querySelector('.layer1')

document.addEventListener('mousemove', function(e) {

const position = middle.getBoundingClientRect()

const x = e.pageX - position.left,

y = e.pageY - position.top - document.documentElement.scrollTop

// 获取当前图片的高

let img = document.getElementById("myImage");

let height = img.height;

if (x >= 0 && x <= 700 && y >= 0 && y <= height) {

let mx = 0,

my = 0;

if (x <= 200) mx = 0

if (x > 200 && x < 500) mx = x - 100

if (x >= 500) mx = 500

if (y <= 200) my = 0

if (y > 200 && y < height - 100) my = y - 100

if (y >= height - 100) my = height - 200

layer1.style.left = mx + 'px'

layer1.style.top = my + 'px'

large.style.backgroundPositionX = -2 * mx + 'px'

large.style.backgroundPositionY = -2 * my + 'px'

}

})

middle.addEventListener('mouseenter', function() {

layer1.style.display = 'block'

})

middle.addEventListener('mouseleave', function() {

layer1.style.display = 'none'

})

}

});

//按钮（公共功能）

$(".confirm_qc").click(function(e) {

var qc_confirm_id = $("#qc_confirm_id").val();

e.stopPropagation();

e.preventDefault();

//{{ config('app.api_url') }}

var url = "/api/qc_confirm/confirm_qc";

var tip;

if (e.currentTarget.title == undefined || e.currentTarget.title == '') {

tip = 'Are you sure you want to confirm QC？';

} else {

tip = e.currentTarget.title;

}

//询问框

layer.confirm(tip, {

title: "Tips",

skin: 'layui-layer-black',

icon: 7,

btn: ['Determine', 'Cancel'] //按钮

}, function() {

layer.closeAll();

$.post(url, {

qc_confirm_id: qc_confirm_id

}, function(data) {

if (data.code == 100) {

location.reload();

} else {

layer.msg(data.msg);

}

}, 'json')

});

$(".remake_qc").click(function(e) {

var qc_confirm_id = $("#qc_confirm_id").val();

e.stopPropagation();

e.preventDefault();

var url = "/api/qc_confirm/remake_qc";

var tip;

if (e.currentTarget.title == undefined || e.currentTarget.title == '') {

tip = 'Are you sure you want to reshoot QC？';

} else {

tip = e.currentTarget.title;

}

//询问框

layer.confirm(tip, {

title: "Tips",

skin: 'layui-layer-black',

icon: 7,

btn: ['Determine', 'Cancel'] //按钮

}, function() {

layer.closeAll();

$.post(url, {

qc_confirm_id: qc_confirm_id

}, function(data) {

if (data.code == 100) {

location.reload();

} else {

layer.msg(data.msg);

}

}, 'json')

});

</script>

</body>

</html>

小杨得努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫