<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>

</style>

</head>

<body>

<div id="pivot_slider">

<div>

<h1>first image</h1>

<img src="image-1.png">

<p>this is image-1</p>

</div>

<div>

<h1>second image</h1>

<img src="image-2.png">

<p>this is image-2</p>

</div>

<div>

<h1>third image</h1>

<img src="image-3.png">

<p>this is image-3</p>

</div>

<div>

<h1>fourth image</h1>

<img src="image-4.png">

<p>this is image-4</p>

</div>

</div>

<script>

jQuery.fn.pivot = function(options){

var $target = $(this);

var $items = $target.children();

var $container = $target.wrap('<div></div>').parent();

var option = {width: 500, height:450};

$.extend(option, options);

$target.css({

width:$items.length * option.width,

height: option.height,

position: 'absolute'

});

$items.css({

float:'left',

width: option.width,

height: option.height

});

$container.css({

overflow: 'hidden',

position: 'relative',

width: option.width,

height: option.height

});

var originalLeft = 0;

var oldLeft = 0;

var nowPosition = 0;

var isDown = false;

$target.on('mousedown', function(event){

oldLeft = originalLeft = event.clientX;

isDown = true;

event.preventDefault();

});

$target.on('mousemove', function(){

if(isDown){

var distance = oldLeft - event.clientX;

oldLeft = event.clientX;

$target.animate({left:'-=' + distance}, 0);

$target.stop(true);

}

event.preventDefault();

});

$target.on('mouseup', function(){

function movePosition(direction){

var changePosition = nowPosition + direction;

if(0 <= changePosition && changePosition < $items.length){

nowPosition = changePosition;

}

}

if(originalLeft - event.clientX > option.width/4){

movePosition(+1);

}else if(originalLeft - event.clientX < -option.width/4){

movePosition(-1);

}

$target.animate({'left':-nowPosition * option.width}, 'fast');

isDown = false;

event.preventDefault();

});

}

</script>

<script>

$(function(){

$('#pivot_slider').pivot({

width: 700,

height: 800

})

})

</script>

</body>

</html>


출처 : 모던 웹을 위한 Javascript jQuery 입문

'Javascript & HTML & CSS > jQuery' 카테고리의 다른 글

jQuery pivot plugin  (0) 2017.01.05
이벤트 발생시 this  (0) 2016.12.07
jquery 이벤트전달 막기 + 기본이벤트 제거 방법  (0) 2016.12.06
jquery 이벤트 막기  (0) 2016.12.06
dialog, datepicker 플러그인  (0) 2016.12.04
jquery 최신 cdn  (0) 2016.08.11