原创！！jquery左右轮播-白红宇

原创！！jquery左右轮播

阅读量：7091 次

发布时间：2019-06-28

本文共 4324 字，大约阅读时间需要 14 分钟。

<!DOCTYPE html>

<html>

<head>

<title>carousel</title>

*{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>

</ul>

</div>

</body>

</html>

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

})