html轮播图京东效果,js实现京东轮播图效果

Title

body,ul,li{padding:0;margin:0;}

li{list-style-type:none;}

.wrap{

position:relative;

width:480px;

height:260px;

margin:100px auto;

}

.wrap>ul>li{position:absolute;display:none;}

/*隐藏所有的li*/

.wrap img{width:480px;height:260px;}

.wrap li:first-child{display:block;}/*显示第一个*/

.arrow{

width:480px;

height:60px;

position:absolute;

top:50%;

margin-top:-30px;

display:none;

}

.arrow>span{

font-size:24pt;

line-height:60px;

display:inline-block;

width:36px;

background-color:#CEE5E8;

text-align:center;

cursor:pointer;

opacity:0.5;

border-radius:5px;/*显示圆框*/

-webkit-border-radius:5px;

-moz-border-radius:5px;

color:black;

}

.wrap:hover .arrow{

display:block;

}

.arrow>span:last-child{

float:right;

}

• 

• 

• 

• 

<

>

$(function(){

var count = 0;

function change() {

count++;

if( count == $(".wrap>ul>li").length){

count = 0;

}

$(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();

}

var myTimer = setInterval(change,4000);

function reRun(){

myTimer = setInterval(change,4000);

}

/*注意jquery中setInterval函数不要加引号和(),否则会报缺少对象*/

$(".arrow>span").eq(0).click(function(){

clearInterval(myTimer);

/*清除计时器，目的在于不会因点击按钮时setInterval事件仍旧执行*/

count--;

if( count == -1){

count = $(".wrap>ul>li").length - 1;

} $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();

setTimeout(reRun,0);

/*重新启动计时器，保证不点击按钮是能正常切换*/

});

$(".arrow>span").eq(1).click(function(){

clearInterval(myTimer);

count++;

if( count == $(".wrap>ul>li").length){

count = 0;

} $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();

setTimeout(reRun,0);

});

});