쿠팡을 참고하여 제작함.
<!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">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
*{box-sizing: border-box;}
.slidewrap{width: 1920px; margin: auto; position: relative;}
.nav{position:absolute; left:50%; margin-left: 300px; top:50%;transform: translateY(-50%); width: 180px; }
.nav li{height:60px; box-shadow: 0 0 5px #333; background: #fff; display: flex;}
.nav li a{margin: auto; display: block;}
.nav li a.on{border: 1px solid blue;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('.nav li a').mouseenter(function(){ //mouseenter=hover
var img = $(this).attr('href')
$('.slider img').attr({'src':img})
$('.nav li a').removeClass('on') // .nav li a에서 클래스를 지워라 .on을
$(this).parent('li').addClass('on') 그 부모인 li에 클래스를 더해라 .on을
});
});
</script>
</head>
<body>
<div class="slidewrap">
<div class="slider"><img src="img/slider1.jpg"></div> <!-- 기본으로 보여질 이미지 -->
<ul class="nav"> <!-- 화면에서 마우스가 올라갈 li들 -->
<li class="on"><a href="img/slider1.jpg">청자켓</a></li>
<li><a href="img/slider2.jpg">물</a></li>
<li><a href="img/slider3.jpg">오븐</a></li>
<li><a href="img/slider4.jpg">티비</a></li>
<li><a href="img/slider5.jpg">다우니</a></li>
<li><a href="img/slider6.jpg">쿠폰</a></li>
</ul>
</div>
</body>
</html>
'얼렁뚱땅코드 > jquery' 카테고리의 다른 글
| 클릭하면 다른 이미지와 다른 글씨들이 보이게 하기:호텔농심참고 (0) | 2019.09.26 |
|---|---|
| 0926 첫수업 (0) | 2019.09.26 |
| 190924 두번째 수업 (0) | 2019.09.24 |
| 제이쿼리 이펙트 (0) | 2019.09.19 |
| 190919 첫수업 (0) | 2019.09.19 |