슬라이드 자동이동 및 화살표 클릭시 옆으로 이동

웹디자인

슬라이드 자동이동 및 화살표 클릭시 옆으로 이동

깽아네 2018. 12. 11. 16:00

안녕하세요. 오늘은 자동으로 이미지가 슬라이드 되면서 화살표를 클릭시 옆으로 이동하는 이미지 배너소스를 알려드릴께요.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<style type="text/css">
.con_mini {width:100%; height:622px; background:url("../images/radger_mini05.jpg") no-repeat center center;}
.con_bb {width:1200px; height:360px; margin:0 auto; padding-top:180px; overflow: hidden; position:relative; }
.left {float:left; width:50px; margin-top:110px;}
.right {float:right; width:50px; margin-top:110px;}
.rolling_panel {float:left; position: relative; width: 1100px; height: 320px; margin: 0; padding: 0; overflow: hidden; }
.rolling_panel ul { position: absolute; margin: 5px; padding: 0; list-style: none; }
.rolling_panel ul li { float: left; width: 360px; height: 320px;}
</style>
</head>
<body>
<div class="con_s">
<div class="con_bb">
<div class="left"><a href="javascript:void(0)" id="prev"><img src="/images/btn_left1.png"></a></div>
<div class="rolling_panel">
<ul>
<li><img src="/images/sl01.png" alt="거치대"></li>
<li><img src="/images/sl02.png" alt="mg이어폰이어셋"></li>
<li><img src="/images/sl03.png" alt="유선이어폰"></li>
<li><img src="/images/sl04.png" alt="ppt버튼"></li>
<li><img src="/images/sl05.png" alt="주먹마이크"></li>
</ul>
</div>
<div class="right"><a href="javascript:void(0)" id="next"><img src="/images/btn_right2.png"></a></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var $panel = $(".rolling_panel").find("ul");
var itemWidth = $panel.children().outerWidth(); // 아이템 가로 길이
var itemLength = $panel.children().length; // 아이템 수
// Auto 롤링 아이디
var rollingId;
auto();
// 배너 마우스 오버 이벤트
$panel.mouseover(function() {
clearInterval(rollingId);
});
// 배너 마우스 아웃 이벤트
$panel.mouseout(function() {
auto();
});
// 이전 이벤트
$("#prev").on("click", prev);
$("#prev").mouseover(function(e) {
clearInterval(rollingId);
});
$("#prev").mouseout(auto);
// 다음 이벤트
$("#next").on("click", next);
$("#next").mouseover(function(e) {
clearInterval(rollingId);
});
$("#next").mouseout(auto);
function auto() {
// 2초마다 start 호출
rollingId = setInterval(function() {
start();
}, 2000);
}
function start() {
$panel.css("width", itemWidth * itemLength);
$panel.animate({"left": - itemWidth + "px"}, function() {
// 첫번째 아이템을 마지막에 추가하기
$(this).append("<li>" + $(this).find("li:first").html() + "</li>");
// 첫번째 아이템을 삭제하기
$(this).find("li:first").remove();
// 좌측 패널 수치 초기화
$(this).css("left", 0);
});
}
// 이전 이벤트 실행
function prev(e) {
$panel.css("left", - itemWidth);
$panel.prepend("<li>" + $panel.find("li:last").html() + "</li>");
$panel.animate({"left": "0px"}, function() {
$(this).find("li:last").remove();
});
}
// 다음 이벤트 실행
function next(e) {
$panel.animate({"left": - itemWidth + "px"}, function() {
$(this).append("<li>" + $(this).find("li:first").html() + "</li>");
$(this).find("li:first").remove();
$(this).css("left", 0);
});
}
});
</script>
</body>
</html>

저작자표시 비영리 동일조건