主要是 要元旦了 事情多 所以就先发了 有不足的地方 请多指出。
1、HTML
<div class="slideBox" id="slideBox">
<div class="btn">
<span class="left"><</span>
<span class="right">></span>
</div>
<div class="slide slide01">
<a href="javascript:" class="pic"><img src="images/01.jpg"></a>
<span class="txt"><a href="#">酷跑11111111111</a></span>
</div>
<div class="slide slide02">
<a href="javascript:" class="pic"><img src="images/02.jpg"></a>
<span class="txt"><a href="#">酷跑2222222222</a></span>
</div>
<div class="slide slide03">
<a href="javascript:" class="pic"><img src="images/03.jpg"></a>
<span class="txt"><a href="#">酷跑33333333333</a></span>
</div>
<div class="slide slide04">
<a href="javascript:" class="pic"><img src="images/04.jpg"></a>
<span class="txt"><a href="#">酷跑44444444444</a></span>
</div>
<div class="slide slide05">
<a href="javascript:" class="pic"><img src="images/05.jpg"></a>
<span class="txt"><a href="#">酷跑55555555555</a></span>
</div>
<ul class="btns">
<li class="current"><a href="javascript:">1</a></li>
<li><a href="javascript:">2</a></li>
<li><a href="javascript:">3</a></li>
<li><a href="javascript:">4</a></li>
<li><a href="javascript:">5</a></li>
</ul>
</div>
2、CSS
<style type="text/css">
* {margin: 0; padding: 0;}
a, a:link, a:visited {color:#333;}
img {border: 0;}
.slideBox {position: relative; margin: 0 auto; margin-top: 50px; width: 500px; height: 200px;}
.slideBox .slide,
.slideBox .slide a.pic,
.slideBox .slide a.pic img {width: 500px; height: 200px;}
.slideBox .slide {position: absolute; z-index: 0;}
.slideBox .slide01 {z-index: 1;}
.slideBox .slide a.pic,
.slideBox .slide span.txt {display: block;}
.slideBox .slide img {}
.slideBox .slide span.txt {position: absolute; bottom: 0; left: 0; width: 500px; height: 40px; background: #000; filter: alpha(opacity: 60); background: rgba(0, 0, 0, 0.6); text-indent: 20px; line-height: 38px;}
.slideBox .slide span.txt a {text-decoration: none; color: #fff; font: 16px arial;}
.slideBox .slide span.txt a:hover {text-decoration: underline;}
.slideBox .btns {position: absolute; list-style: none; bottom: 11px; right: 5px; z-index: 99999999;}
.slideBox .btns li {float: left; margin-right: 5px; width: 18px; height: 18px; border: 0px solid #ccc; background: #666; text-align: center; font: 12px/20px arial;}
.slideBox .btns li.current {background: #f33;}
.slideBox .btns li a {text-decoration: none; display: block; color: #fff;}
.slideBox .btn {z-index: 999;position: absolute;width: 500px;}
.slideBox .btn span {background-color: #ccc;color: #ffffff;padding: 5px 12px;opacity: 0.5;}
.slideBox .btn span.left {position: absolute;left: 0;top: 70px;}
.slideBox .btn span.right {position: absolute;right: 0px;top: 70px;}
.slideBox .btn span:hover{cursor: pointer;opacity: 0.8;color: #464646;}
</style>
jquery
<script type="text/javascript">
$(function(){
function slide() {
var aSlides = $("#slideBox .slide");
/* 获取每一个img */
var aBtns = $("#slideBox .btns li");
/*获取 每个li*/
var timer = null;
aBtns.each(function(index){
aBtns[index].onmouseover = function () {
clearInterval(timer); /* 清除 clearInterval */
for (var j = 0; j < aSlides.length; j++) {
aSlides[j].style.zIndex = 0;
aBtns[j].className = "";
}
/* 循环 全部 zIndex 为 0 没有css */
aBtns[index].className = "current";
aSlides[index].style.zIndex = 1;
/* 给鼠标移入时 添加 zIndex和css */
}
aBtns[index].onmouseout = function () {
autoSlide(index); /* 传值下标 */
}
});
function autoSlide(index){
var index = index||0;
/*判断 有没有 index ， 有就赋值从赋值开始 、没有为0 为最开始下标 */
timer = setInterval(function () {
if (index >= aBtns.length) {
index = 0;
}
/* 页面加载就轮播 index下标 大于等于 li 的长度时重置*/
for (var i = 0, j = 0; i < aBtns.length, j < aSlides.length; i++, j++) {
aBtns[i].className = "";
aSlides[j].style.zIndex = 0;
}
aBtns[index].className = "current";
aSlides[index].style.zIndex = 1;
index++;
}, 2000);
}
autoSlide();
}
slide();
});
还有左右切换 由于时间问题和技术问题 没有解决就没有上传（解决了在上传）、或者有哪位帮忙写一下。谢谢