直接上代码(请自行引入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}

.main {

position: relative;

width: 500px; height: 350px;

}

.myslide {

float: left; position: absolute; overflow: hidden;

width: 500px; height: 350px;

}

.myslidetwo {

position: absolute;

overflow: hidden;

width: 2000px;

}

.myslidetwo li {

position:relative;

float: left; background:#ccc; text-align:center; line-height:350px; width: 500px; height: 350px;

}

.label{

position: absolute;

bottom: 15px;

left: 210px;

width: 200px;

}

.label li {

float: left;

width:20px;height:20px;line-height:20px;text-align: center;

margin-right: 5px;

border:1px solid #3F8AE3;

font-size: 14px;

background: #fff;

cursor: pointer;

}

.label li.current {

color:#fff;

background: #3F8AE3;

}

.arrows{

position: absolute;

left:0px; top:0px;

color:#666; font-size: 40px;font-weight: bold;

}

.arrows a{

cursor:pointer;

background: rgba(0,0,0,0.2);

display: inline-block;width:30px;height: 70px;text-align: center;line-height: 70px;

}

.arrows a:hover{

background: #3F8AE3;

color:#fff;

}

.arrows .pre{

margin-right: 429px;

}

$(document).ready(function () {

var _now=0;

var oul = $(".myslidetwo");

var numl = $(".label li");

var wid = $(".myslide").eq(0).width();

//数字图标实现

numl.click(function () {

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

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

oul.animate({'left': -wid * index}, 500);

})

//左右箭头轮播

$(".pre").click(function () {

if (_now>=1) _now--;

else _now=3;

ani();

});

$(".next").click(function () {

if (_now == numl.size() - 1) {

_now = 0;

}

else _now++;

ani();

});

//动画函数

function ani(){

numl.eq(_now).addClass("current").siblings().removeClass();

oul.animate({'left': -wid * _now}, 500);

}

//以下代码如果不需要自动轮播可删除

//自动动画

var _interval=setInterval(showTime,5000);

function showTime() {

if (_now == numl.size() - 1) {

_now = 0;

}

else _now++;

ani();

}

//鼠标停留在画面时停止自动动画，离开恢复

$(".myslide").mouseover(function(){

clearTimeout(_interval);

});

$(".myslide").mouseout(function(){

_interval=setInterval(showTime,2000);

});

})