直接上代码(请自行引入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);
});
})
1
<
>
2
<
>
3
<
>
4
<
>
1234
