303 lines
12 KiB
HTML
303 lines
12 KiB
HTML
<!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>" +
|
||
"<div style='top:5px;position: relative'><a href='#'><img src='"+val.picture+"' alt='' onclick='previewImg('+val.picture+')'></a><div></li>");
|
||
}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：当我们点击了某个li就拿到当前li的索引号给num
|
||
// 解决bug2：当我们点击了某个li 就把li的索引号给yuan
|
||
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);
|
||
}
|
||
|
||
function previewImg (imgsrc) {
|
||
window.location.href = imgsrc;
|
||
}
|
||
|
||
//});
|
||
</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'><</a>
|
||
<a href="javascript:;" class='arrow-r'>></a>
|
||
<!-- 图片用li来装--核心滚动区域 -->
|
||
<ul class='focus'></ul>
|
||
<!-- 底部小点点 -->
|
||
<ol class='circle'>
|
||
|
||
</ol>
|
||
</div>
|
||
</body>
|
||
</html>
|