본문 바로가기

먹고살거/JS(Jquery)

slide 2개씩 보여야할때

$(document).ready(function(){

//slide샘플

var testNum  = 0,

testWidth = $("div.slider ul li").width(),

testLength = $("div.slider ul li").length,

totalWidth = testWidth * testLength;

var guideWidth = $("div.slider div").outerWidth();


if(testLength > 2){

$("div.slider a.left").show();

}

$("div.slider div ul").css("width",totalWidth);


$("div.slider a.left").click(function(){

testNum--;

console.log(testNum);

if (testNum <= "-"+(testLength-1)){

testNum = -(testLength-2);


alert("task의 끝입니다!");

} else {

$("div.slider div ul").animate({left:'-='+testWidth},100);

$("div.slider a.right").show();

}

});

$("div.slider a.right").click(function(){

testNum++;

console.log(testNum);

if (testNum >= 1){

testNum = 0;


alert("task의 시작입니다!");

} else {

$("div.slider div ul").animate({left:'+='+testWidth},100);

$("div.slider a.left").show();

}

});

});


-----------------------------------------------------------------------------


<style type="text/css">

div,ul,li,a {padding:0;margin:0;list-style:none;}

div.slider {position:relative;width:700px;margin:0 auto;}

div.slider > a {display:none;position:absolute;top:20px;padding:10px;border:1px solid #000;background:#eee;}

div.slider a.left {left:0;}

div.slider a.right {right:0;}

div.slider div {overflow:hidden;width:500px;height:60px;padding:20px;margin:0 auto;border:1px solid #000;}

div.slider div ul {position:relative;left:0;}

div.slider div ul:after {content:"";display:block;clear:both;}

div.slider div ul li {float:left;width:260px;height:100px;}

div.slider div ul li:first-child {border-left:0;}

div.slider div ul li a {display:block;width:240px;height:35px;padding:5px;border:1px solid red;}

</style>


-----------------------------------------------------------------------------


<div class="slider">

<a href="#none" class="left">완쪽</a>

<div>

<ul>

<li><a href="#none">화면설계협의1</a></li>

<li><a href="#none">화면설계협의2</a></li>

<li><a href="#none">화면설계협의3</a></li>

<li><a href="#none">화면설계협의4</a></li>

<li><a href="#none">화면설계협의5</a></li>

</ul>

</div>

<a href="#none" class="right">오른쪽</a>

</div>