jQuery实现查看图片功能
作者：从入门to入万
这篇文章主要为大家详细介绍了jQuery实现查看图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现查看图片的具体代码，供大家参考，具体内容如下
HTML
<!-- 放缩略图的div -->
<div class="sl">
<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
</div>
<!-- 实现关灯的div -->
<div class="gd"></div>
<div class="yt">
<!-- 左翻按钮 -->
<div class="left">
<img src="images/left.png" alt="" width="100">
</div>
<div class="tp">
<!-- 展示原图 -->
<img src="images/1.jpg" class="show" />
<!--放开始和结束图片的盒子 -->
<div class="ss" style="display: none;">
<img src="images/start.png" alt="" width="50" class="start">
</div>
</div>
<!-- 右翻按钮 -->
<div class="right">
<img src="images/right.png" alt="" width="100">
</div>
</div>
CSS
html,body{
padding: 0;
margin: 0;
}
.sl img {
width: 300px;
}
.gd {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
z-index: 900;
display: none;
top: 0;
left: 0;
}
.sl {
position: absolute;
z-index: 888;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.sl>img {
width: 25%;
}
.yt {
z-index: 990;
position: absolute;
display: none;
left: 500px;
top: 200px;
}
.tp {
margin: 0 20px;
}
.yt>div {
display: inline-block;
}
.left,
.right {
position: relative;
top: -110px;
cursor: pointer;
}
.ss {
position: relative;
width: 50px;
height: 50px;
left: 270px;
}
.start {
z-index: 990;
position: absolute;
}
JS
var max = $(".sl img").length;
$(function (e) {
var width = $(window).width();
var height = $(window).height();
$(".gd").css({
"height": height,
"width": width
});
//左翻按钮动画
$(".left").hover(
function () {
$(this).animate({
"left": "-10"
});
},
function () {
$(this).animate({
"left": "0"
});
}
);
//右翻按钮动画
$(".right").hover(
function () {
$(this).animate({
"right": "-10"
});
},
function () {
$(this).animate({
"right": "0"
});
}
);
//被点击的缩略图
$(".sl>img").click(function (e) {
$(".gd").show(500);
$(".yt").fadeIn(800);
var index = $(this).index(); //当前被点击图片的索引
$(".tp>img").attr("src", "images/" + (index + 1) + ".jpg");
//左翻
$(".left").click(function (e) {
if (index - 1 < 0) {
index = max - 1;
} else {
index = index - 1;
}
$(".tp>img").attr("src", "images/" + (index + 1) + ".jpg");
});
//右翻
$(".right").click(function (e) {
if (index == max - 1) {
index = 0;
} else {
index = index + 1;
}
$(".tp>img").attr("src", "images/" + (index + 1) + ".jpg");
});
//隐藏和显示播放按钮
$(".tp").hover(
function () {
$(".ss").fadeIn(500);
$(this).animate({
"opacity": "0.7"
}, 700);
},
function () {
$(".ss").fadeOut(500);
$(this).animate({
"opacity": "1"
}, 700);
}
);
//点击开始播放 再次点击结束播放
let flag = true;
$(".start").click(function () {
if (flag == true) {
time = setInterval(function () {
if (index == max - 1) {
index = 0;
} else {
index = index + 1;
}
$(".tp>img").attr("src", "images/" + (index + 1) + ".jpg");
}, 2000);
flag = false;
$(".start").attr("src", "images/stop.png");
} else {
clearInterval(time);
flag = true;
$(".start").attr("src", "images/start.png");
}
});
let h = $(".tp>img").height();
$(".ss").css({
"top": -h / 2 - 25
});
//隐藏关灯效果
$(".gd").click(function () {
$(".gd").hide(800);
$(".yt").fadeOut(500);
});
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。