2023-06-14 18:01:39 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document< / title >
< link rel = "stylesheet" href = "../commons/css/awsui.css" >
< script type = 'text/javascript' src = '../commons/js/jquery/scripts/jquery.js' > < / script >
< script type = "text/javascript" src = "../commons/js/jquery/scripts/jquery-migrate.js" > < / script >
< script type = "text/javascript" src = "../commons/js/awsui.js" > < / script >
< script type = "text/javascript" src = "../commons/js/jquery/scripts/ui/aws.util.js" > < / script >
< script type = 'text/javascript' src = '../commons/js/public.js' > < / script >
< script type = "text/javascript" >
const filePaths = < #filePaths>;
//$(document).ready(function () {
window.addEventListener('load', function () {
//拼接图片或视频
$.each(filePaths, function(index, val) {
if(val.video == undefined ){
$(".focus").append("< li > < div > < h3 id = 'picTitle' > "+val.picTitle+"< / h3 > < / div > " +
2023-08-30 12:31:14 +08:00
"< div style = 'top:5px;position: relative' > < a href = '#' > < img src = '"+val.picture+"' alt = '' onclick = 'previewImg(' + val . picture + ' ) ' > < / a > < div > < / li > ");
2023-06-14 18:01:39 +08:00
}else{
$(".focus").append("< li > < div > < h3 id = 'picTitle' > "+val.picTitle+"< / h3 > < / div > " +
"< div style = 'top:5px;position: relative' > < video width = '500' height = '280' controls > < source src = "+val.video+" type = 'video/mp4' > 您的浏览器不支持 video 标签。< / video > < / div > < / li > ");
}
});
// 1.
var arrowl = document.querySelector('.arrow-l');
var arrowr = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
// 2.
// 效果1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
focus.addEventListener('mouseenter', function () {
arrowl.style.display = 'block';
arrowr.style.display = 'block';
// clearInterval(timer);
// timer = null; //清除定时器变量
})
focus.addEventListener('mouseleave', function () {
arrowl.style.display = 'none';
arrowr.style.display = 'none';
/* timer = setInterval(function () {
// 手动调用点击事件
arrowr.click();
}, 3000);*/
})
// 3.底部的小圆圈根据有几张图就有几个小圆圈来实行
var ul = document.querySelector('.focus');
var lis = focus.querySelectorAll('li');
var circle = document.querySelector('.circle');
var li = focus.querySelector('li');
var liWidth = li.offsetWidth;
// console.log(lis);只能得到4个节点
//console.log(focus.children.length); //这样才能得到focus的孩子的长度有几个
// 先对图片进行循环得到有几张图片
for (var i = 0; i < lis.length ; i + + ) { / / 第一个for循环是创建li
var li = document.createElement('li');
// 记录小圆圈的索引号，通过自定义属性来做
li.setAttribute('index', i);
// 把上面增加的li添加到ol中去
circle.appendChild(li);
li.addEventListener('click', function () {
for (var i = 0; i < circle.children.length ; i + + ) {
//创建的ol中的li进行遍历获取
// 排他思想
circle.children[i].className = '';
}
this.className = 'current'; //一定写成this
// 想要效果：点击小圆点，移动图片 移动的是ul
// 别移动的距离=小圆圈的索引号*图片的宽度（注意是负值从右往左走）
// 当我们点击某个小li就获取到li的索引号
var index = this.getAttribute('index');
var li = focus.querySelector('li');
// 解决bug1：
// 解决bug2：
num = index;
yuan = index;
var liWidth = li.offsetWidth;
animate(ul, -liWidth * index); //ul移动
})
}
//把第一个li的背景变为白色
circle.children[0].className = 'current';
// 克隆第一张图片li放到ul最后
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 当点击左右按钮可以有轮播图切换效果
var num = 0;
// 效果：底部小圆圈跟随右侧按钮一起变化 设置一个全局变量计数（在点击事件外面定义）
var yuan = 0;
// flag节流阀
var flag = true;
// 右侧按钮
arrowr.addEventListener('click', function () {
if (flag) {
// flag = false; //关闭节流阀
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0; //无缝滚动效果 最后num=0回到起点第一张图
}
num++;
animate(ul, -num * liWidth, function () {
flag = true; //打开节流阀
});
// 效果：底部小圆圈跟随右侧按钮一起变化
yuan++; //这个变量是控制小圆圈的播放
// 如果yuan==4说明走到最后我们克隆的这张图片 我们就复原
if (yuan == circle.children.length) {
yuan = 0;
}
// 先清除其余小圆圈的current类名
for (var i = 0; i < circle.children.length ; i + + ) {
circle.children[i].className = '';
}
circle.children[yuan].className = 'current';
}
})
// 左侧按钮
arrowl.addEventListener('click', function () {
debugger;
if (flag) {
// flag = false;
if (num == ul.children.length - 1) {
num = ul.children.length - 1;
//无缝滚动效果 最后num=0回到起点第一张图
ul.style.left = num * liWidth + 'px';
}
if(num < = 0){
return;
}
num--;
animate(ul, -num * liWidth, function () {
flag = true;
});
// 效果：底部小圆圈跟随右侧按钮一起变化
yuan--; //这个变量是控制小圆圈的播放
// 如果yuan< 0说明第一张图片 ， 则小圆圈要改为第四个小圆圈 （ 3 ）
if (yuan < 0 ) {
yuan = circle.children.length - 1;
}
// 先清除其余小圆圈的current类名
for (var i = 0; i < circle.children.length ; i + + ) {
circle.children[i].className = '';
}
circle.children[yuan].className = 'current';
}
})
/* // 自动播放轮播图
var timer = setInterval(function () {
// 手动调用点击事件
arrowr.click();
}, 10000);*/
})
function animate(obj, target,callback) {
//让元素只有一个定时器在执行，需要清除以前的定时器
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
//停止动画 本质是停止定时器
clearInterval(obj.timer);
//回调函数写到定时器结束位置
if (callback) {
callback();
}
}
//把每次加1这个步长值改为一个慢慢变小的值
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
2023-08-30 12:31:14 +08:00
function previewImg (imgsrc) {
window.location.href = imgsrc;
}
2023-06-14 18:01:39 +08:00
//});
< / script >
< style >
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul li {
list-style-type: none;
}
ol li {
list-style-type: none;
}
.wrap {
overflow: hidden;
position: relative;
margin: 10px auto;
width: 500px;
height: 300px;
background-color: rgba(255, 192, 203, 0.09);
}
#picTitle{
position: relative;
top: 0;
left: 0;
width: 500px;
text-align: center;
color: #00b800;
}
.wrap ul {
position: absolute;
left: 0;
width: 500%;
/* 给ul盒子大一点就可以让li浮动起来 */
}
.wrap ul li {
float: left;
/* margin-right: 10px; */
width: 500px;
height: 280px;
}
.wrap ul li img {
width: 100%;
height: 100%;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 38%;
text-align: center;
width: 24px;
height: 40px;
line-height: 40px;
color: #00B83F;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
}
.arrow-r {
position: absolute;
top: 38%;
right: 0px;
}
.circle {
position: absolute;
bottom: 0;
left: 39%;
height: 20px;
width: 200px;
/* background-color: skyblue; */
}
.circle li {
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 6px;
background: rgba(0, 0, 0, .3);
}
.circle .current {
background-color: #fff;
}
< / style >
< / head >
< body >
< div class = "wrap" >
<!-- 左右箭头按钮 -->
< a href = "javascript:;" class = 'arrow-l' > & lt< / a >
< a href = "javascript:;" class = 'arrow-r' > & gt< / a >
<!-- 图片用li来装 - - 核心滚动区域 -->
< ul class = 'focus' > < / ul >
<!-- 底部小点点 -->
< ol class = 'circle' >
< / ol >
< / div >
< / body >
< / html >
