<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<h1>Slider Fade</h1>
<img alt="" src="./images/p1.jpg">
<img alt="" src="./images/p2.jpg">
<img alt="" src="./images/p3.jpg">
<p>Slider 키를 좌우로 움직이면, 이미지의 투명도를 조절 할 수 있습니다</p>
<div id="slider1" style="width: 250px"></div>
<p id="opacity"></p>
<script type="text/javascript">
$(function () {
//슬라이더 생성
$('#slider1').slider({
animate: true,
range: "min",
value: 100,
slide: function (event, ui) {
//투명도 조절
$("img").css("opacity", ui.value/10);
//투명도 조절에 따른 숫자 0~100까지
$("#opacity").text(ui.value);
}
});
});
</script>
</body>
</html>
