html轮播jquery,史上最简单jquery轮播图

直接上代码：

序号

body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#666666;margin:0px;padding:0px;background:#fff;}

p,from,h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;}

ul,ol,li{margin:0px;padding:0px;list-style:none;}

img{border:none;}

a{color:#333333;text-decoration:none;}

a:hover{color:#666666;text-decoration:none;}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.clearfix{display:inline-table}

#box{width:320px;height:480px;position:relative;overflow:hidden;}

#box li{width:320px;height:480px; background:#ccc; text-align:center; line-height:480px;}

#box ol{position:absolute;width:320px;z-index:99;left:0;bottom:10px; text-align:center;}

#box ol li{display:inline-block; text-align:center; width:24px; height:24px; line-height:24px; border:solid 1px #3F8AE3; cursor:pointer;}

#box ol li.current{background:#3F8AE3; color:#fff;}

$(document).ready(function () {

var index =0;

var timer = setInterval(function(){ //自动

index = (index == 0) ? 0 : index + 1;

$("#box ul li").hide().eq(index).show();

$('#box ol li').eq(index).addClass('current').siblings().removeClass('current');

}, 3000);

$("#box ol li").mouseover(function(){

var index = $(this).index();

$("#box ul li").eq(index).show().siblings().hide();

$(this).addClass('current').siblings().removeClass('current');

})

})

• 1
• 2
• 3