大图滚动（面向对象版）

来源：互联网发布：数控编程和程序员编辑：程序博客网时间：2024/06/05 17:54

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<title>面向对象版</title>

<styletype="text/css">

margin:0;

padding:0;

}

#wrap{

width:700px;

height:500px;

overflow:hidden;

position:relative;

}

.icon{

position:absolute;

bottom:10px;

left:50%;

}

.circle{

width:8px;

height:8px;

float:left;

margin:5px;

border:1px solid yellow;

border-radius:4px;

}

#middle{

position:absolute;

width:9999px;

left:0;

height:500px;

transition:all 1.5s;

}

#middleimg {

float:left;

height:100%;

width:700px;

}

.selected{

background-color: red;

}

</style>

</head>

<body>

<divid="wrap">

<divid="middle">

<imgsrc="img/a84.jpg" alt="" />

<imgsrc="img/a91.jpg" alt="" />

<imgsrc="img/a89.jpg" alt="" />

<imgsrc="img/a88.jpg" alt="" />

</div>

<divclass="icon">

<spanclass="circle"></span>

</div>

<divid="nav">

<inputtype="button" name="btn1" id="last"value="上一张" />

<inputtype="button" name="btn2" id="next"value="下一张" />

</div>

<scriptsrc="js/jquery-2.1.3.min.js"type="text/javascript" charset="utf-8"></script>

<scripttype="text/javascript">

$(function(){

varcurrentIndex = 0;

$("span").eq(0).addClass("selected");

vartab = {

left:function(){

if(currentIndex == 0) {

currentIndex= 4;

}

currentIndex--;

$("#middle").css({

left:-currentIndex* 700

})

$("span").removeClass("selected");

$("span").eq(currentIndex).addClass("selected");

right:function(){

if(currentIndex == 3) {

currentIndex= -1;

}

currentIndex++;

$("#middle").css({

left:-currentIndex* 700,

})

$("span").removeClass("selected");

$("span").eq(currentIndex).addClass("selected");

change:function(index){

currentIndex= index;

$("span").removeClass("selected");

$("span").eq(index).addClass("selected");

$("#middle").css({

left:-currentIndex* 700,

})

}

$("#last").on("click",function(){

tab.left();

})

$("#next").on("click",function(){

tab.right();

})

$("span").on("click",function(){

tab.change($(this).index());

})

</script>

</body>

</html>

0 0