JQ 左右切換+索引點按鈕——切換 DIV

時間 2021-01-30

標籤 javascript css java curl ide this url spa 索引欄目 JavaScript 简体版

原文原文鏈接

功能：JQ 左右切換+點擊時索引點按鈕——切換 DIVjavascript

Jquery代碼：css

$(document).ready(function(){curl

var cur = $(".point>li").index($(".point>li.cur"));ide

var total = $("div.tab").length-1;this

$("#left").bind("click",function(){url

cur--;spa

if(cur<0){索引

//returnip

cur = total;

var lft = -total*220;

$("#inner").animate({"left":lft+"px"});

return;

}

$("#inner").animate({"left":"+=220px"});

//$(".tab").eq(cur).toggle("slow").siblings("div.tab:visible").toggle("slow");

var $curli = $(".point>li").eq(cur)

$curli.removeClass($curli.attr("class")).addClass("cur").siblings("li").removeClass($(this).attr("class"));

});

$("#right").bind("click",function(){

cur++;

if(cur>total){

cur = 0;

$("#inner").animate({"left":"0px"});

return;

}

$("#inner").animate({"left":"-=220px"});

var $curli = $(".point>li").eq(cur)

$curli.removeClass($curli.attr("class")).addClass("cur").siblings("li").removeClass($(this).attr("class"));

});

$(".point>li").bind("click",function(){

cur = $(".point>li").index($(this));

if(cur>total){

cur = 0;

}else if(cur<0){

cur = total

}

var lft = -220*(cur);

$("#inner").animate({"left":lft+"px"});

//$(".tab").eq(cur).toggle("slow").siblings("div.tab:visible").toggle("slow");

$(this).removeClass($(this).attr("class")).addClass("cur").siblings("li").removeClass($(this).attr("class"));

})

</script>

HTML代碼：

<body>

<p>

</ul>

</p>

</div>

</div>

</div>

</body>

CSS代碼：

.tab {

float: left;

height: 50px;

width: 200px;

border: 1px solid #dedede;

margin: 10px;

}

.point {

list-style-type: none;

margin:0;

padding:0;

float:left;

}

.point li{

width:6px;

height:6px;

background-p_w_picpath: url(no.gif);

background-repeat: no-repeat;

float:left;

margin:5px;

}

.point .cur{

background-p_w_picpath: url(yes.gif);

background-repeat: no-repeat;

}

.outer{

width:230px;

height:70px;

overflow:hidden;

position:relative;

}

#inner{

width:auto;

height:70px;

position:absolute;

overflow:hidden;

}

</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。