슬라이드 버튼 질문입니다.. 왕초보ㅠㅠ
본문
<!DOCTYPE html>
<head>
<script src="jquery-3.3.1.js"></script>
<style>
* {margin: 0; padding: 0}
li {list-style: none}
</style>
<script>
$(document).ready(function () {
var length = $(".viewport li").length
var width = 1024
var height = 385
$(".viewport").css({
width: width,
height: height,
overflow: "hidden"
})
$(".viewport ul").css({
width: width * length
})
$(".viewport li").css({
width: width,
height: height,
float: "left"
})
var moveTo = function (index) {
// 매개변수를 보완합니다.
if(!index) { index = 0 }
index = index % length
// 애니메이션으로 이동합니다.
$(".viewport ul").animate({
marginLeft:-width * index
})
}
for (var i = 0; i < length; i++) {
(function (i) {
$("<div></div>")
.css({
backgroundImage: "url(bg.slider-nav.png",
width: 12,
height: 12,
backgroundPosition: "-40px 0",
float: "left",
marginRight: 5
})
.attr("data-index", i)
.click(function () {
moveTo(i)
})
.appendTo("body")
})(i)
}
var currentIndex = 0
setInterval(function(){
currentIndex += 1
moveTo(currentIndex)
}, 1000 * 5)
moveTo(0)
window.moveslider = moveTo
})
</script>
</head>
<body>
<div class="viewport">
<ul>
<li><a href="#"><img src="a.png"/></a></li>
<li><a href="#"><img src="b.png"/></a></li>
<li><a href="#"><img src="c.png"/></a></li>
<li><a href="#"><img src="d.png"/></a></li>
<li><a href="#"><img src="e.png"/></a></li>
<li><a href="#"><img src="f.png"/></a></li>
</ul>
<div>
</body>
</html>
현재 이렇게 코드를 짰어요! 예제보고 짜서 만들긴 했는데
가로로 배열된 버튼을
위 이미지의 붉은 자리에 배치하고 싶어요.. div 포지션 값을 줘야할거같은데
제가 왕초보라 도움이 필요합니다 ㅠㅠ
답변 3
상단 스크립트에 추가
var width2 = 150px
var height = 50px
$(".icon_box").css({
display: "block", margin: 0 auto, width: width2, height: height2, margin-top: "200px"
})
$(".icon_box ul").css({
list-style-type: "none", -webkit-padding-start: "0px", padding-left:0
})
$(".icon_box li").css({
position:"relative", float:"left"; width:"100px", text-align:"center"
})
body 안에 태그추가
<div class="icon_box">
<ul>
<li><a href="#"><img src="icon1.png"/></a></li>
<li><a href="#"><img src="icon2.png"/></a></li>
<li><a href="#"><img src="icon3.png"/></a></li>
</ul>
<div>
정말 감사합니다 ㅠㅠㅠㅠㅠㅠ
바디 안에 추가한 아이콘은 icon1.png 이렇게 주셨는데
제가 올린 내용에 버튼은 제이쿼리 안에 url로 bg.slider-nav.png 이렇게 넣었어요
그러면 li로 분할한거에 어떻게 해야하나요? 아예 이미지를 새로 분할해서 넣어야 되나요?
귀찮으실텐데 왕초보 질문에 답변해주셔서 감사합니다 ㅠ
버튼이 구성된 div와 ul 을 추가하고 상단 스크립트에 css설정해 줍니다.
예를 들면 전 css파일에 바로 적었지만 질문자님은 스크립트에 하시면 되구요.
.icon_box {display:block; margin:0 auto; width:300px; height:100px; margin-top:200px;}
.icon_box ul { list-style-type: none; -webkit-padding-start: 0px; padding-left:0;}
.icon_box ul li {position:relative; float:left; width:100px; text-align:center; }
li 안에 이미지를 넣어 링크연결하는 방식 많이 씁니다.
.icon_box 의 위치는
여기서는 가운데 잡기가 편해서 position을 그냥 relative로 했지만
absolute를 사용하는 경우도 많이 있습니다. 이런 경우 가운데 오게 하는 방법은 left:50% ; margin-left:
-가로너비값의 반만큼 가령 -100px 마이너스값임; top도 정해줘야 함.
제가 예제 보면서 따라한거라서요 ㅠㅠ 어떻게 추가해야할지 감이 안와요...
아 죄송합니다. 제가 slide-nav.png 를 잘못 봤네요.
결론적으로 의도를 잘 파악하지 못한 것 같습니다.
나열된 li 이미지들이 슬라이드 이미지인줄 알았고 그 위에 아이콘들을 넣는 것으로 파악했었네요.
그리고 스크립트로 css구성하는 것에 익숙하지 않아서 제대로 답변해 드리지 못했습니다.
더 잘 알고 계신 분들이 도움을 주시도록 채택을 푸시길 바랍니다.
저도 더 알아보도록 할께요.
