Html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="jquery3.min.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
}
body{
background: orange;
}
#container {
width: 800px;
height: 200px;
border: 3px solid #eee;
position: relative;
overflow: hidden;
margin: 20px auto;
cursor: pointer;
}
#list {
position: absolute;
width: 3200px;
height: 200px;
}
#list img {
float: left;
width: 400px;
height: 200px;
transition: 0.3s;
}
#buttons {
position: absolute;
z-index: 2;
bottom: 5px;
left: 50%;
margin-left: -34px;
}
#buttons span {
display: block;
width: 10px;
height: 10px;
background-color: #333;
border: 1px solid #fff;
margin-right: 5px;
border-radius: 50%;
float: left;
cursor: pointer;
}
#buttons .on {
background: orangered;
}
.arrow {
display: block;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 36px;
text-align: center;
position: absolute;
color: #fff;
z-index: 3;
top: 50%;
margin-top: -20px;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
a:hover {
background-color: #23222259;
}
.svip{
width: 100%;
height: 100%;
position: absolute;
background:rgba(0, 0, 0, 0.5);
left: 50%;
transform: translateX(-50%);
top: 0px;
/* display: none; */
}
.zhanshi{
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 300px;
background: url('https://ww2.sinaimg.cn/large/005BYqpgly1g162eej3sej30y20cstdu.jpg') round;
display: inline-block;
top: 30%;
}
span{
color: #fff;
font-size: 40px;
cursor: pointer;
transition: 0.3s;
}
span:hover{
color:orange;
}
.prev{
position: absolute;
top: 320px;
left: 237px;
}
.next{
position: absolute;
top: 320px;
left: 1096px;
}
b{
width: 50px;
height: 50px;
margin-left: 90%;
margin-top: 5%;
display: inline-block;
color: #fff;
border-radius:50%;
background: rgba(0, 0, 0, 0.3) ;
font-size: 20px;
text-align: center;
line-height: 50px;
cursor: pointer;
transition: 0.3s;
}
b:hover{
background: rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left:0px">
<img
src="https://ww2.sinaimg.cn/large/005BYqpgly1g162eej3sej30y20cstdu.jpg"
alt="1"
/>
<img
src="https://ww2.sinaimg.cn/large/005BYqpgly1g162ev1d8xj30y20cs0xy.jpg"
alt="2"
/>
<img
src="https://ww2.sinaimg.cn/large/005BYqpgly1g162f7080cj30y20cs79p.jpg"
alt="3"
/>
<img
src="https://ww2.sinaimg.cn/large/005BYqpgly1g162fk1v8bj30y20cswij.jpg"
alt="4"
/>
<img
src="https://ww2.sinaimg.cn/large/005BYqpgly1g162eej3sej30y20cstdu.jpg"
alt="1"
/>
<img
src="https://ww2.sinaimg.cn/large/005BYqpgly1g162ev1d8xj30y20cs0xy.jpg"
alt="2"
/>
<img
src="https://ww2.sinaimg.cn/large/005BYqpgly1g162f7080cj30y20cs79p.jpg"
alt="3"
/>
<img
src="https://ww2.sinaimg.cn/large/005BYqpgly1g162fk1v8bj30y20cswij.jpg"
alt="4"
/>
</div>
</div>
<div class="svip" style="display:none;">
<span class="prev"><</span>
<i class="zhanshi"></i>
<span class="next">></span>
<b>X</b>
</div>
</body>
</html>
JS部分
<script>
//四张图片实现无缝轮播 布局需要用到两套图 一共8张
var score = 0;//全局变量left的值
var index = 0;//用来接收 全局变量img的下标
var jsq = null;//计时器初始化
function move() {//定义自动播放函数
score = score - 1;//每次left减掉1px
$("#list").css("left", score + "px");//执行left变化的语句
if (score <= -1600) {//如果大于我的四张图片总宽度
score = 0;//使他回到第一套图的第一张 造成视觉差
}
}
jsq = setInterval(move, 1);//让他自己循环播放
$("img").hover(//定义鼠标进入图片区域函数
function () {
clearInterval(jsq);//让定时器停止
$(this).css("opacity", "0.7");//鼠标选中的图片透明图发生变化
},
function () {//鼠标移出图片区域
jsq = setInterval(move, 1);//计时器继续
$("img").css("opacity", "1");//让所有发生透明图改变的图片恢复到初始值
}
);
$('b').click(function () {//定义删除按钮函数
$(".svip").css('display', 'none');//让弹出的一层none掉
$('#container').css('filter','');//清除图片部分毛玻璃效果
})
$('img').click(function () {//定义图片被点击函数
$('.svip').css("display", 'block');//让覆盖层显示出来
$('#container').css('filter','blur(10px');//让图片部分呈现毛玻璃效果
$('.zhanshi').css("background", 'url(' + $(this).attr('src') + ')round');//让覆盖层展示部分图片src地址对应到鼠标点击的图片src
index = $(this).index();//将鼠标点击的图片的下标返回出去用index接受
})
$('.prev').click(function () {//定义上一张按钮函数
index--;//下标自减
if (index < 0) {//判断左边界
index = $('img').length - 5;//满足条件进来让index的值为8张图片的长度减掉5就是3，既最后一张
}
$('.zhanshi').css("background", 'url(' + $('img').eq(index).attr('src') + ')round');//覆盖层展示图片的背景图src变化语句
})
$('.next').click(function () {//定义下一张按钮
index++;//下标自加
if (index > $('img').length - 5) {//$('img').length - 5既第一套图最后一张
index = 0;//让下标对应第一张
}
$('.zhanshi').css("background", 'url(' + $('img').eq(index).attr('src') + ')round');//覆盖层展示图片的背景图src变化语句
})
</script>
在线测试
