两种用jq实现的轮播图（向左右滑动和淡出效果）

1、首先是左右滑动效果

html：

<div class="slider-left" >
<ul class="slider-left-main">
<li class="slider-left-panel"><a><img src="/images/banner1.jpg"/></a> </li>
<li class="slider-left-panel"><a><img src="/images/banner2.jpg"></a></li>
<li class="slider-left-panel"><a><img src="/images/banner3.jpg"></a></li>
</ul>
<div class="slider-left-extra">
<ul class="slider-left-nav">
<li class="slider-left-item">1</li>
<li class="slider-left-item">2</li>
<li class="slider-left-item">3</li>
</ul>
<div class="slider-left-page">
<a class="slider-left-pre" href="javascript:return;"></a>
<a class="slider-left-next" href="javascript:return;"></a>
</div>
</div>
</div>

css：

a {  text-decoration: none;  }
ul {  list-style: outside none none;  }
.slider-left  .slider-left-panel img, .slider-left-extra {  width: 100%;  height: 440px;  }
.slider-left-panel {width: 1519.2px;  height: 440px; }
.slider-left-panel img {width: 100%;  height: 440px; }
.slider-left-main {width: 4557.6px;  height: 440px;     position: absolute;}
.slider-left {  text-align: center;  position: relative;  overflow: hidden; }
.slider-left-panel {      position: relative;  float: left;  display: inline;  z-index: 8;  }
.slider-left-panel img {  border: none;  }
.slider-left-extra {  position: relative;  }
.slider-left-nav {z-index: 999; margin-left: -51px;  position: absolute;  left: 50%;  bottom: 4px;  }
.slider-left-nav li {  background: #3e3e3e;  border-radius: 50%;  color: #fff;  cursor: pointer;  margin: 0 2px;  overflow: hidden;  text-align: center;  display: inline-block;  height: 18px;  line-height: 18px;  width: 18px;  }
.slider-left-nav .slider-item-selected {  background: blue;  }
.slider-left-page a{z-index: 999; background: rgba(0, 0, 0, 0.2);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);  color: #fff;  text-align: center;  display: block;  font-family: "simsun";  font-size: 22px;  width: 28px;  height: 62px;  line-height: 62px;  margin-top: -31px;  position: absolute;  top: 50%;  }
.slider-left-page a:HOVER {  background: rgba(0, 0, 0, 0.4);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  }
.slider-left-next {  left: 100%;  margin-left: -28px;  }

js：

function () {
/*判断是否可以循环*/
var hasStarted = false;
var interval = false;
var currentIndex = 0;
var width = 1519.2;
/*循环时间*/
var t = 3000;
var length = $(".slider-left-item").length;
/*给默认的图片*/

$(".slider-left-item:not(:first)").removeClass("slider-item-selected");
$(".slider-left-item:first").addClass("slider-item-selected");
$(".slider-left-page").hide();
start();

/*面面item标签事件*/
$(".slider-left-item").hover(function (e) {
stop();
var currentIndex = $(this).index();
$(".slider-left-item").removeClass("slider-item-selected");
$(".slider-left-item").eq(currentIndex).addClass("slider-item-selected");
$(".slider-left-page").show();
goto(currentIndex);

},function (e) {
$(".slider-left-page").hide();
start();
});

/*banner图片停止轮播*/
$(".slider-left-panel, .slider-left-page, .slider-left-pre, .slider-left-next").hover(function (e) {
$(".slider-left-page").show();
clearInterval(interval);
stop();
},function (e) {
$(".slider-left-page").hide();
start();

11a8d
});
/*前一页*/
$(".slider-left-pre").click(function () {
pre();
});
/*后一页*/
$(".slider-left-next").click(function () {
next();
});
/*开始运行*/
function start() {
if(!hasStarted){
hasStarted = true;
interval = setInterval(function () {
currentIndex = (++currentIndex+length)%length;
var offset = width*currentIndex;
$(".slider-left-item").removeClass("slider-item-selected");
$(".slider-left-item").eq(currentIndex).addClass("slider-item-selected");

$(".slider-left-main").animate({marginLeft:"-"+offset+"px"});
},3000);
}
}
/*停止轮播*/
function stop() {
clearInterval(interval);
hasStarted = false;
}
function goto(current) {
var offset = current*width;
$(".slider-left-item").removeClass("slider-item-selected");
$(".slider-left-item").eq(current).addClass("slider-item-selected");
$(".slider-left-main").animate({marginLeft:"-"+offset+"px"});
}
function pre() {
currentIndex = (--currentIndex+length)%length;
goto(currentIndex);
}
function next() {
currentIndex = (++currentIndex+length)%length;
goto(currentIndex);
}
}
}

2、第二种方法是在网上找的，但是我忘记了网址了

html：

<div class="slider" >
<ul class="slider-main">
<li class="slider-panel"><a><img src="/images/banner1.jpg"/></a> </li>
<li class="slider-panel"><a><img src="/images/banner2.jpg"></a></li>
<li class="slider-panel"><a><img src="/images/banner3.jpg"></a></li>
</ul>
<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
</ul>
<div class="slider-page">
<a class="slider-pre" href="javascript:return;"></a>
<a class="slider-next" href="javascript:return;"></a>
</div>
</div>
</div>

css：

a {  text-decoration: none;  }
ul {  list-style: outside none none;  }
.slider  .slider-panel img, .slider-extra {  width: 100%;  height: 440px;  }
.slider-panel {width: 100%;  height: 440px; }
.slider-panel img {width: 100%;  height: 440px; }
.slider-main {width: 100%;  height: 440px;     position: absolute;}
.slider {  text-align: center; position: relative;  }
.slider-panel, .slider-nav, .slider-pre, .slider-next {  position: absolute;  z-index: 8;  }
.slider-panel {  position: absolute;  }
.slider-panel img {  border: none;  }
.slider-extra {  position: relative;  }
.slider-nav {  margin-left: -51px;  position: absolute;  left: 50%;  bottom: 4px;  }
.slider-nav li {  background: #3e3e3e;  border-radius: 50%;  color: #fff;  cursor: pointer;  margin: 0 2px;  overflow: hidden;  text-align: center;  display: inline-block;  height: 18px;  line-height: 18px;  width: 18px;  }
.slider-nav .slider-item-selected {  background: blue;  }
.slider-page a{  background: rgba(0, 0, 0, 0.2);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);  color: #fff;  text-align: center;  display: block;  font-family: "simsun";  font-size: 22px;  width: 28px;  height: 62px;  line-height: 62px;  margin-top: -31px;  position: absolute;  top: 50%;  }
.slider-page a:HOVER {  background: rgba(0, 0, 0, 0.4);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  }
.slider-next {  left: 100%;  margin-left: -28px;  }

js：

function () {
var length = 0;
var currentIndex = 0;
var interval = false;
var hasStarted = false; //是否已经开始轮播
var t = 3000; //轮播时间间隔
var length = $('.slider-panel').length;
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
$('.slider-page').hide();
//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop();
$('.slider-page').show();
}, function() {
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e) {
stop();
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
},
function() {
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click', function() {   pre();  });
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {   next();  });
/**   * 向前翻页   */
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
play(preIndex, currentIndex);  }
/**   * 向后翻页   */
function next() {   var preIndex = currentIndex;   currentIndex = ++currentIndex % length;   play(preIndex, currentIndex);  }
/**   * 从preIndex页翻到currentIndex页   * preIndex 整数，翻页的起始页   * currentIndex 整数，翻到的那页   */
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)  .parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');  }
/**   * 开始轮播   */
function start() {   if(!hasStarted) {   hasStarted = true;   interval = setInterval(next, t);   }  }
/**   * 停止轮播   */
function stop() {   clearInterval(interval);   hasStarted = false;  }  //开始轮播  start();

},

3、总结：

总结一下这两个的不同点

（1）元素的布局，前面的是li是float并列排列到ul中的，position都是relative；后面的那个布局中li是覆盖的，li的position是absolute的，这是为了实现li的覆盖

（2）用到的主要js函数的不同，前者是annimate中的marginLeft，后者是用fadeOut和fadeIn方法

希望大家批评指正