原创！！jquery左右轮播
<!--------html代码：----------->
<!DOCTYPE html>
<html>
<head>
<title>carousel</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="carousel.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
.carousel-box{width:660px;height: 337px;overflow: hidden;position: relative;margin: 50px auto;}
.carousel-inner{position: relative;display: block;}
.carousel-inner:after{content:"";display: block;width: 0;clear:both;}
.carousel-inner .carousel-list{background-size: 100% 100%;background-repeat: no-repeat;background-position: center center;width: 660px;height: 337px;float: left;}
.carousel-point{position: absolute;left:0;bottom:10px;margin: auto;width: 100%;text-align: center;}
.carousel-point li{display: inline-block;vertical-align: middle;border-radius: 100%;width: 15px;height: 15px;background-color: #fff;margin: 0 3px;cursor:pointer;}
.carousel-point li.on{background-color:#f60; }
.direction{display: inline-block;position: absolute;width: 30px;height: 30px;top: 50%;margin-top: -15px;width:32px;height:32px;background-repeat: no-repeat;background-size: 100% 100%;background-position: center center;}
.direction#prev{left: 10px;background-image: url(img/prev.png);}
.direction#next{right: 10px;background-image: url(img/next.png);}
</style>
</head>
<body>
<div class="main">
<div class="carousel-box">
<ul class="carousel-inner" style="margin-left: 0px;">
<li class="carousel-list" style="background-image:url(img/1.jpg);"></li>
<li class="carousel-list" style="background-image:url(img/2.jpg);"></li>
<li class="carousel-list" style="background-image:url(img/3.jpg);"></li>
<li class="carousel-list" style="background-image:url(img/4.jpg);"></li>
</ul>
</div>
</div>
</body>
</html>
<!------------------------------------------------------------------------------------------------------------------------------------分割线---------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!-------carousel.js:------->
$(function(){
var c_inner = $(".carousel-inner");
var c_list = $(".carousel-list");
//小圆点
var point = $("<ul class='carousel-point'></ul>");
var len = c_list.length;
for(var i=0;i<len;i++){
var pointLi = $("<li></li>");
point.append(pointLi);
}
c_inner.after(point);
//左右按钮
var prevBtn = $("<a href='javascript:void(0)' class='direction' id='prev'></a>");
var nextBtn = $("<a href='javascript:void(0)' class='direction' id='next'></a>");
point.after(prevBtn);
prevBtn.after(nextBtn);
prevBtn.hide();
//外层ul.carousel-inner的宽度
var list_w = c_list.width();
var inner_w = list_w * len;
c_inner.css("width",inner_w+"px");
var $index;//当前页码
point.find("li:first").addClass("on");
var pointCir = point.find("li");
var c_pageNum,leftNum;
pointCir.each(function(){
$(this).on("mouseover",function(){
var _this = $(this);
$index = _this.index();
if($index==0){
prevBtn.fadeOut(700);
nextBtn.fadeIn(700);
}else if($index == len-1){
nextBtn.fadeOut(700);
prevBtn.fadeIn(700);
}else{
nextBtn.fadeIn(700);
prevBtn.fadeIn(700);
}
page($index);
c_inner.animate({"margin-left":"-"+leftNum+"px"},500);
_this.addClass("on").siblings().removeClass("on");
})
if($(this).hasClass("on")){$index = $(this).index();}
})
function page(index){
c_pageNum = $index;//轮播图片页码
leftNum = c_pageNum * parseInt(list_w);
}
function scrollCarousel(target){
page($index);
if(target==prevBtn){
leftNum = leftNum - parseInt(list_w);
c_pageNum--;
$index--;
if($index==0){
target.fadeOut(700);
}
}else if(target==nextBtn){
leftNum = leftNum + parseInt(list_w);
c_pageNum++;
$index++;
if($index == len-1){
target.fadeOut(700);
}
}
c_inner.animate({"margin-left":"-"+leftNum+"px"},500);
pointCir.removeClass("on");
pointCir.eq(c_pageNum).addClass("on");
}
prevBtn.on("click",function(){
nextBtn.fadeIn(700);
scrollCarousel(prevBtn);
})
nextBtn.on("click",function(){
prevBtn.fadeIn(700);
scrollCarousel(nextBtn);
})
})
<!------------------------------------------------------------------------------------------------------------------------------------预览---------------------------------------------------------------------------------------------------------------------------------------------------------------->
