jquery轮播（自动+下标）

标签：

主要是  要元旦了 事情多 所以就先发了   有不足的地方 请多指出。

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();
});

还有左右切换 由于时间问题和技术问题 没有解决就没有上传（解决了在上传）、或者有哪位帮忙写一下。谢谢

jquery轮播（自动+下标）

标签：

原文地址：http://www.cnblogs.com/gx9401142810/p/5088246.html