<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../../jquery-3.4.1.min.js"></script>
<style>
#container {
}
#inner {
width: 700px;
height: 400px;
margin: 0 auto;
position: relative;
z-index: 2;
}
#inner img {
width: 700px;
height: 400px;
position: absolute;
display: none;
}
#container #inner ul {
list-style: none;
position: absolute;
opacity: 0.6;
left: 220px;
bottom: 30px;
z-index: 1;
cursor: pointer;
border-radius:20px;
text-align: center;
}
/*#container #inner ul li {*/
.li_style {
float: left;
width: 35px;
height: 5px;
margin: 0.5px;
border: 1px solid #a3a3a3;
background: #a3a3a3;
}
.lis {
background: #0f0f0f;
border: 1px solid #0f0f0f;
width: 50px;
opacity: 1;
}
#left {
position: absolute;
top: 150px;
left: 0;
width: 50px;
height: 80px;
background: linear-gradient(90deg, gray, white);
opacity: 0.5;
text-align: center;
font-size: 40px;
font-weight: bold;
line-height: 70px;
cursor: pointer;
display: none;
}
#left:hover {
background: linear-gradient(90deg, #a3a3a3, #727d8f);
}
#right {
position: absolute;
top: 150px;
right: 0;
width: 50px;
height: 80px;
background: linear-gradient(90deg, white, gray);
opacity: 0.5;
text-align: center;
font-size: 40px;
font-weight: bold;
line-height: 70px;
cursor: pointer;
display: none;
}
#right:hover {
background: linear-gradient(90deg, #727d8f, #a3a3a3);
}
</style>
</head>
<body>
<div id="container">
<div id="inner">
<img index="0" src="../../../img/1.jpg">
<img index="1" src="../../../img/2.jpg">
<img index="2" src="../../../img/3.jpg">
<img index="3" src="../../../img/4.jpg">
<img index="4" src="../../../img/5.jpg">
<div id="left"><</div>
<div id="right">></div>
<ul>
<li class="li_style" index="0"> </li>
<li class="li_style" index="1"> </li>
<li class="li_style" index="2"> </li>
<li class="li_style" index="3"> </li>
<li class="li_style" index="4"> </li>
</ul>
</div>
</div>
<script>
$(document).ready(function () {
$('li:first').addClass('lis');
$('div#inner img:eq(0)').show();
//定时轮播
let idx = 0;
let t = "";
const $img = $('img');
const $li = $('li');
function ok() {
idx++;
if (idx > 4) idx = 0;
if (idx < 0) {
idx = 4
}
// var img = document.querySelectorAll('#inner img');
// //每个img都设置display为none
// for (var i=0;i<img.length;i++){
// img[i].style.display ='none';
// }
//
// img[idx].style.display = 'block';
// console.log(img[idx])
$img.each(function (index, element) {
$(this).css({display: 'none'});
$('li')
.css({
float: 'left',
width: '35',
height: '5',
margin: '0.5',
border: '1px solid #a3a3a3',
background: '#a3a3a3',
borderRadius:'20'
})
});
$img[idx].style.display = 'block';
$li[idx].style.background = '#0f0f0f';
$li[idx].style.opacity = '1';
$li[idx].style.border = '2px solid #0f0f0f';
$li[idx].style.width = '50px';
$li[idx].style.borderRadius = '20px'
}
t = setInterval(ok, 1500);
//鼠标触碰图片和ul停止轮播并出现左右点击按钮,离开恢复
$('img,ul,#left,#right').on('mouseover', function () {
clearInterval(t);
$('#left,#right').show();
}).on('mouseout', function () {
t = setInterval(ok, 1000);
$('#left,#right').hide();
});
//左右案件点击切换图片 md没做完现状，只能点一次换图，换完原先的那张图鼠标移除时直接跳过。md fack c c c
//不能获取点击后获取的img的index值在此上运算
let r = 0;
$('#left').on('mousedown', function () {
r = $img[idx].attributes.index.value;//当前图片的index值
console.log($img[idx].attributes.index.value);
r--;
console.log(r);
$img.css({display: 'none'});
$('img[index=' + r + ']').css({display: 'block'});
$li.css({
float: 'left',
width: '35',
height: '5',
margin: '0.5',
border: '1px solid #a3a3a3',
background: '#a3a3a3',
borderRadius:'20'
});
$('li[index=' + r + ']').css({
background: '#0f0f0f',
opacity: '1.0',
border: '2px solid #0f0f0f',
width: '50px',
borderRadius:'20'
})
});
$('#right').on('mousedown', function () {
r = $img[idx].attributes.index.value;
r++;
console.log(r);
$img.css({display: 'none'});
$('img[index=' + r + ']').css({display: 'block'});
$li.css({
float: 'left',
width: '35',
height: '5',
margin: '0.5',
border: '1px solid #a3a3a3',
background: '#a3a3a3',
borderRadius:'20'
});
$('li[index=' + r + ']').css({
background: '#0f0f0f',
opacity: '1.0',
border: '2px solid #0f0f0f',
width: '50px',
borderRadius:'20'
})
});
//li点击切换图片 进度：很ok
$li.on('mousedown', function () {
const id = $(this).attr('index');
idx = id;//让鼠标移开后图片播放接着当前位置
$img.css({display: 'none'});
$('img[index=' + id + ']').css({display: 'block'});
$li.css({
float: 'left',
width: '35',
height: '5',
margin: '0.5',
border: '1px solid #a3a3a3',
background: '#a3a3a3',
borderRadius:'20'
});
$(this).css({
background: '#0f0f0f',
opacity: '1.0',
border: '2px solid #0f0f0f',
width: '50px',
borderRadius:'20'
})
});
});
</script>
</body>
</html>
