5 changed files with 447 additions and 135 deletions
@ -0,0 +1,54 @@ |
|||||
|
/*定义css变量*/ |
||||
|
:root{ |
||||
|
--mywidth: 500px; |
||||
|
--myheight: 100%; |
||||
|
} |
||||
|
|
||||
|
*{ |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
ul{ |
||||
|
list-style: none; |
||||
|
} |
||||
|
.carousel-contentSite{ |
||||
|
width: var(--mywidth); |
||||
|
height: var(--myheight); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
border-radius:10px; |
||||
|
} |
||||
|
.carouselSite{ |
||||
|
height: var(--myheight); |
||||
|
position: absolute; |
||||
|
} |
||||
|
.carouselSite li{ |
||||
|
float: left; |
||||
|
} |
||||
|
.carouselSite li,.carouselSite li img{ |
||||
|
width: var(--mywidth); |
||||
|
height: var(--myheight); |
||||
|
} |
||||
|
.img-indexSite{ |
||||
|
position: absolute; |
||||
|
bottom: 8px; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.img-indexSite li{ |
||||
|
float: left; |
||||
|
width: 18px; |
||||
|
height: 18px; |
||||
|
line-height: 18px; |
||||
|
text-align: center; |
||||
|
border-radius: 10px; |
||||
|
background-color: rgba(0,0,0,0.2); |
||||
|
font-size: 12px; |
||||
|
cursor: pointer; |
||||
|
margin: 0 3px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.img-indexSite li.js_indexSite,.img-indexSite li:hover{ |
||||
|
background-color: rgba(0,0,0,0.7); |
||||
|
} |
||||
@ -1,168 +1,201 @@ |
|||||
;(function($){ |
(function ($) { |
||||
$.fn.carousel = function(param){ |
$.fn.carousel = function (param) { |
||||
var carousel = param.carousel,//轮播框架
|
var carousel = param.carousel, //轮播框架
|
||||
indexContainer = param.indexContainer,//下标框架
|
indexContainer = param.indexContainer, //下标框架
|
||||
list = $(carousel).children("li"),//轮播内容
|
list = $(carousel).children("li"), //轮播内容
|
||||
len = list.length,//轮播内容数量
|
len = list.length, //轮播内容数量
|
||||
prev = param.prev,//上翻按钮
|
prev = param.prev, //上翻按钮
|
||||
next = param.next,//下翻按钮
|
next = param.next, //下翻按钮
|
||||
timing = param.timing,//自动轮播间隔时间
|
timing = param.timing, //自动轮播间隔时间
|
||||
animateTime = param.animateTime,//动画时间
|
animateTime = param.animateTime, //动画时间
|
||||
autoPlay = param.autoPlay,//自动播放 true/false
|
autoPlay = param.autoPlay, //自动播放 true/false
|
||||
timer,//定时器
|
timer, //定时器
|
||||
index = 1,//索引值
|
index = 1, //索引值
|
||||
indexList,//下标列表
|
indexList, //下标列表
|
||||
indexClassName = "js_index",//下标高亮类名
|
indexClassName = "js_index", //下标高亮类名
|
||||
action = true,//开始滚动 true/false
|
action = true, //开始滚动 true/false
|
||||
totalWidtn = list.width()*(list.length+2),//轮播框架总宽度
|
totalWidtn = list.width() * (list.length + 2), //轮播框架总宽度
|
||||
direction = param.direction;//滚动方向
|
direction = param.direction; //滚动方向
|
||||
|
|
||||
/*初始化*/ |
/*初始化*/ |
||||
for(var i = 1;i <= list.length;i++){ |
for (var i = 1; i <= list.length; i++) { |
||||
$(indexContainer).append("<li>"+i+"</li>") |
$(indexContainer).append("<li>" + i + "</li>"); |
||||
} |
} |
||||
$(carousel).width(totalWidtn) |
$(carousel) |
||||
.append($(list[0]).clone()) |
.width(totalWidtn) |
||||
.prepend($(list[list.length-1]).clone()) |
.append($(list[0]).clone()) |
||||
.css("left","-"+list.width()+"px"); |
.prepend($(list[list.length - 1]).clone()) |
||||
|
.css("left", "-" + list.width() + "px"); |
||||
list = $(carousel).children("li"); |
list = $(carousel).children("li"); |
||||
indexList = $(indexContainer).children("li"); |
indexList = $(indexContainer).children("li"); |
||||
$(indexList[index-1]).addClass(indexClassName); |
$(indexList[index - 1]).addClass(indexClassName); |
||||
|
|
||||
/*判断是否自动播放*/ |
/*判断是否自动播放*/ |
||||
if (autoPlay) { |
if (autoPlay) { |
||||
startTiming(); |
startTiming(); |
||||
$(carousel+","+prev+","+next+","+indexContainer).hover(function(){ |
$(carousel + "," + prev + "," + next + "," + indexContainer).hover( |
||||
window.clearInterval(timer); |
function () { |
||||
},function(){ |
window.clearInterval(timer); |
||||
startTiming(); |
}, |
||||
}); |
function () { |
||||
|
startTiming(); |
||||
|
} |
||||
|
); |
||||
} |
} |
||||
|
|
||||
/*计时方法*/ |
/*计时方法*/ |
||||
function startTiming(){ |
function startTiming() { |
||||
/*判断方向*/ |
/*判断方向*/ |
||||
switch (direction) { |
switch (direction) { |
||||
case "right" : |
case "right": |
||||
timer = window.setInterval("$.rightChangeImg();",timing); |
timer = window.setInterval("$.rightChangeImg();", timing); |
||||
break; |
break; |
||||
case "left" : |
case "left": |
||||
timer = window.setInterval("$.leftChangeImg();",timing); |
timer = window.setInterval("$.leftChangeImg();", timing); |
||||
break; |
break; |
||||
default: |
default: |
||||
timer = window.setInterval("$.leftChangeImg();",timing); |
timer = window.setInterval("$.leftChangeImg();", timing); |
||||
} |
} |
||||
}; |
} |
||||
|
|
||||
/*切换高亮下标*/ |
/*切换高亮下标*/ |
||||
$.extend({changeIndex:function(index){ |
$.extend({ |
||||
$(indexList).removeClass(indexClassName); |
changeIndex: function (index) { |
||||
$(indexList[index]).addClass(indexClassName); |
$(indexList).removeClass(indexClassName); |
||||
}}); |
$(indexList[index]).addClass(indexClassName); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
/*向左切换图片*/ |
/*向左切换图片*/ |
||||
$.extend({leftChangeImg:function(){ |
$.extend({ |
||||
action = false; |
leftChangeImg: function () { |
||||
if (index==len) { |
action = false; |
||||
index = 0; |
if (index == len) { |
||||
$(carousel).stop(true,true).css("left","0px"); |
|
||||
} |
|
||||
index++; |
|
||||
$(carousel).stop(true,true).animate({ |
|
||||
left : "-="+list.width()+"px" |
|
||||
},animateTime); |
|
||||
setTimeout(function(){ |
|
||||
if (index==len) { |
|
||||
index = 0; |
index = 0; |
||||
$(carousel).stop(true,true).css("left","0px"); |
$(carousel).stop(true, true).css("left", "0px"); |
||||
} |
} |
||||
action = true; |
index++; |
||||
},animateTime); |
$(carousel) |
||||
$.changeIndex(index-1); |
.stop(true, true) |
||||
}}); |
.animate( |
||||
|
{ |
||||
|
left: "-=" + list.width() + "px", |
||||
|
}, |
||||
|
animateTime |
||||
|
); |
||||
|
setTimeout(function () { |
||||
|
if (index == len) { |
||||
|
index = 0; |
||||
|
$(carousel).stop(true, true).css("left", "0px"); |
||||
|
} |
||||
|
action = true; |
||||
|
}, animateTime); |
||||
|
$.changeIndex(index - 1); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
/*向右切换图片*/ |
/*向右切换图片*/ |
||||
$.extend({rightChangeImg:function(){ |
$.extend({ |
||||
action = false; |
rightChangeImg: function () { |
||||
if (index==0) { |
action = false; |
||||
index = len; |
if (index == 0) { |
||||
$(carousel).stop(true,true).css("left","-"+left+"px"); |
|
||||
} |
|
||||
index--; |
|
||||
var left = totalWidtn-list.width()*2; |
|
||||
$(carousel).stop(true,true).animate({ |
|
||||
left : "+="+list.width()+"px" |
|
||||
},animateTime); |
|
||||
setTimeout(function(){ |
|
||||
if (index==0) { |
|
||||
index = len; |
index = len; |
||||
$(carousel).stop(true,true).css("left","-"+left+"px"); |
$(carousel) |
||||
|
.stop(true, true) |
||||
|
.css("left", "-" + left + "px"); |
||||
} |
} |
||||
action = true; |
index--; |
||||
},animateTime); |
var left = totalWidtn - list.width() * 2; |
||||
if (index == 0) { |
$(carousel) |
||||
$.changeIndex(len-1); |
.stop(true, true) |
||||
}else{ |
.animate( |
||||
$.changeIndex(index-1); |
{ |
||||
} |
left: "+=" + list.width() + "px", |
||||
}}); |
}, |
||||
|
animateTime |
||||
|
); |
||||
|
setTimeout(function () { |
||||
|
if (index == 0) { |
||||
|
index = len; |
||||
|
$(carousel) |
||||
|
.stop(true, true) |
||||
|
.css("left", "-" + left + "px"); |
||||
|
} |
||||
|
action = true; |
||||
|
}, animateTime); |
||||
|
if (index == 0) { |
||||
|
$.changeIndex(len - 1); |
||||
|
} else { |
||||
|
$.changeIndex(index - 1); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
/*下翻点击处理*/ |
/*下翻点击处理*/ |
||||
$(next).on("click",function(){ |
$(next).on("click", function () { |
||||
var nowLeft = Math.abs(parseInt($(carousel).css("left"))); |
var nowLeft = Math.abs(parseInt($(carousel).css("left"))); |
||||
var left = totalWidtn-list.width()*2; |
var left = totalWidtn - list.width() * 2; |
||||
if (action) { |
if (action) { |
||||
if (nowLeft == left) { |
if (nowLeft == left) { |
||||
index = 0; |
index = 0; |
||||
$(carousel).stop(true,true).css("left","0px"); |
$(carousel).stop(true, true).css("left", "0px"); |
||||
} |
} |
||||
$.leftChangeImg(); |
$.leftChangeImg(); |
||||
} |
} |
||||
}); |
}); |
||||
|
|
||||
/*上翻点击处理*/ |
/*上翻点击处理*/ |
||||
$(prev).on("click",function(){ |
$(prev).on("click", function () { |
||||
var nowLeft = Math.abs(parseInt($(carousel).css("left"))); |
var nowLeft = Math.abs(parseInt($(carousel).css("left"))); |
||||
var left = totalWidtn-list.width()*2; |
var left = totalWidtn - list.width() * 2; |
||||
if (action) { |
if (action) { |
||||
if (nowLeft == 0) { |
if (nowLeft == 0) { |
||||
index = len; |
index = len; |
||||
$(carousel).stop(true,true).css("left","-"+left+"px"); |
$(carousel) |
||||
|
.stop(true, true) |
||||
|
.css("left", "-" + left + "px"); |
||||
} |
} |
||||
$.rightChangeImg(); |
$.rightChangeImg(); |
||||
} |
} |
||||
}); |
}); |
||||
|
|
||||
/*下标点击处理*/ |
/*下标点击处理*/ |
||||
indexList.on("click",function(){ |
indexList.on("click", function () { |
||||
var no = $(this).index()+1; |
var no = $(this).index() + 1; |
||||
if (action) { |
if (action) { |
||||
if (no > index) { |
if (no > index) { |
||||
$.changeIndex(no-1); |
$.changeIndex(no - 1); |
||||
action = false; |
action = false; |
||||
var left = (no - index)*list.width(); |
var left = (no - index) * list.width(); |
||||
index = no; |
index = no; |
||||
$(carousel).stop(true,true).animate({ |
$(carousel) |
||||
left : "-="+left+"px" |
.stop(true, true) |
||||
},animateTime); |
.animate( |
||||
setTimeout(function(){ |
{ |
||||
|
left: "-=" + left + "px", |
||||
|
}, |
||||
|
animateTime |
||||
|
); |
||||
|
setTimeout(function () { |
||||
action = true; |
action = true; |
||||
},animateTime); |
}, animateTime); |
||||
}else if (no < index) { |
} else if (no < index) { |
||||
$.changeIndex(no-1); |
$.changeIndex(no - 1); |
||||
action = false; |
action = false; |
||||
var left = (index - no)*list.width(); |
var left = (index - no) * list.width(); |
||||
index = no; |
index = no; |
||||
$(carousel).stop(true,true).animate({ |
$(carousel) |
||||
left : "+="+left+"px" |
.stop(true, true) |
||||
},animateTime); |
.animate( |
||||
setTimeout(function(){ |
{ |
||||
|
left: "+=" + left + "px", |
||||
|
}, |
||||
|
animateTime |
||||
|
); |
||||
|
setTimeout(function () { |
||||
action = true; |
action = true; |
||||
},animateTime); |
}, animateTime); |
||||
} |
} |
||||
|
|
||||
} |
} |
||||
}); |
}); |
||||
} |
}; |
||||
})(jQuery); |
})(jQuery); |
||||
|
|||||
@ -0,0 +1,201 @@ |
|||||
|
(function ($) { |
||||
|
$.fn.carouselSite = function (param) { |
||||
|
var carouselSite = param.carousel, //轮播框架
|
||||
|
indexContainer = param.indexContainer, //下标框架
|
||||
|
list = $(carouselSite).children("li"), //轮播内容
|
||||
|
len = list.length, //轮播内容数量
|
||||
|
prev = param.prev, //上翻按钮
|
||||
|
next = param.next, //下翻按钮
|
||||
|
timing = param.timing, //自动轮播间隔时间
|
||||
|
animateTime = param.animateTime, //动画时间
|
||||
|
autoPlay = param.autoPlay, //自动播放 true/false
|
||||
|
timer, //定时器
|
||||
|
index = 1, //索引值
|
||||
|
indexListSite, //下标列表
|
||||
|
indexClassName = "js_indexSite", //下标高亮类名
|
||||
|
action = true, //开始滚动 true/false
|
||||
|
totalWidtn = list.width() * (list.length + 2), //轮播框架总宽度
|
||||
|
direction = param.direction; //滚动方向
|
||||
|
/*初始化*/ |
||||
|
for (var i = 1; i <= list.length; i++) { |
||||
|
$(indexContainer).append("<li>" + i + "</li>"); |
||||
|
} |
||||
|
$(carouselSite) |
||||
|
.width(totalWidtn) |
||||
|
.append($(list[0]).clone()) |
||||
|
.prepend($(list[list.length - 1]).clone()) |
||||
|
.css("left", "-" + list.width() + "px"); |
||||
|
list = $(carouselSite).children("li"); |
||||
|
indexListSite = $(indexContainer).children("li"); |
||||
|
$(indexListSite[index - 1]).addClass(indexClassName); |
||||
|
|
||||
|
/*判断是否自动播放*/ |
||||
|
if (autoPlay) { |
||||
|
startTiming(); |
||||
|
$(carouselSite + "," + prev + "," + next + "," + indexContainer).hover( |
||||
|
function () { |
||||
|
window.clearInterval(timer); |
||||
|
}, |
||||
|
function () { |
||||
|
startTiming(); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/*计时方法*/ |
||||
|
function startTiming() { |
||||
|
/*判断方向*/ |
||||
|
switch (direction) { |
||||
|
case "right": |
||||
|
timer = window.setInterval("$.rightChangeImg();", timing); |
||||
|
break; |
||||
|
case "left": |
||||
|
timer = window.setInterval("$.leftChangeImg();", timing); |
||||
|
break; |
||||
|
default: |
||||
|
timer = window.setInterval("$.leftChangeImg();", timing); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/*切换高亮下标*/ |
||||
|
$.extend({ |
||||
|
changeIndexSite: function (index) { |
||||
|
$(indexListSite).removeClass(indexClassName); |
||||
|
$(indexListSite[index]).addClass(indexClassName); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
/*向左切换图片*/ |
||||
|
$.extend({ |
||||
|
leftChangeImg: function () { |
||||
|
action = false; |
||||
|
if (index == len) { |
||||
|
index = 0; |
||||
|
$(carouselSite).stop(true, true).css("left", "0px"); |
||||
|
} |
||||
|
index++; |
||||
|
$(carouselSite) |
||||
|
.stop(true, true) |
||||
|
.animate( |
||||
|
{ |
||||
|
left: "-=" + list.width() + "px", |
||||
|
}, |
||||
|
animateTime |
||||
|
); |
||||
|
setTimeout(function () { |
||||
|
if (index == len) { |
||||
|
index = 0; |
||||
|
$(carouselSite).stop(true, true).css("left", "0px"); |
||||
|
} |
||||
|
action = true; |
||||
|
}, animateTime); |
||||
|
$.changeIndexSite(index - 1); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
/*向右切换图片*/ |
||||
|
$.extend({ |
||||
|
rightChangeImg: function () { |
||||
|
action = false; |
||||
|
if (index == 0) { |
||||
|
index = len; |
||||
|
$(carouselSite) |
||||
|
.stop(true, true) |
||||
|
.css("left", "-" + left + "px"); |
||||
|
} |
||||
|
index--; |
||||
|
var left = totalWidtn - list.width() * 2; |
||||
|
$(carouselSite) |
||||
|
.stop(true, true) |
||||
|
.animate( |
||||
|
{ |
||||
|
left: "+=" + list.width() + "px", |
||||
|
}, |
||||
|
animateTime |
||||
|
); |
||||
|
setTimeout(function () { |
||||
|
if (index == 0) { |
||||
|
index = len; |
||||
|
$(carouselSite) |
||||
|
.stop(true, true) |
||||
|
.css("left", "-" + left + "px"); |
||||
|
} |
||||
|
action = true; |
||||
|
}, animateTime); |
||||
|
if (index == 0) { |
||||
|
$.changeIndexSite(len - 1); |
||||
|
} else { |
||||
|
$.changeIndexSite(index - 1); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
/*下翻点击处理*/ |
||||
|
$(next).on("click", function () { |
||||
|
var nowLeft = Math.abs(parseInt($(carouselSite).css("left"))); |
||||
|
var left = totalWidtn - list.width() * 2; |
||||
|
if (action) { |
||||
|
if (nowLeft == left) { |
||||
|
index = 0; |
||||
|
$(carouselSite).stop(true, true).css("left", "0px"); |
||||
|
} |
||||
|
$.leftChangeImg(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
/*上翻点击处理*/ |
||||
|
$(prev).on("click", function () { |
||||
|
var nowLeft = Math.abs(parseInt($(carouselSite).css("left"))); |
||||
|
var left = totalWidtn - list.width() * 2; |
||||
|
if (action) { |
||||
|
if (nowLeft == 0) { |
||||
|
index = len; |
||||
|
$(carouselSite) |
||||
|
.stop(true, true) |
||||
|
.css("left", "-" + left + "px"); |
||||
|
} |
||||
|
$.rightChangeImg(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
/*下标点击处理*/ |
||||
|
indexListSite.on("click", function () { |
||||
|
var no = $(this).index() + 1; |
||||
|
if (action) { |
||||
|
if (no > index) { |
||||
|
$.changeIndexSite(no - 1); |
||||
|
action = false; |
||||
|
var left = (no - index) * list.width(); |
||||
|
index = no; |
||||
|
$(carouselSite) |
||||
|
.stop(true, true) |
||||
|
.animate( |
||||
|
{ |
||||
|
left: "-=" + left + "px", |
||||
|
}, |
||||
|
animateTime |
||||
|
); |
||||
|
setTimeout(function () { |
||||
|
action = true; |
||||
|
}, animateTime); |
||||
|
} else if (no < index) { |
||||
|
$.changeIndexSite(no - 1); |
||||
|
action = false; |
||||
|
var left = (index - no) * list.width(); |
||||
|
index = no; |
||||
|
$(carouselSite) |
||||
|
.stop(true, true) |
||||
|
.animate( |
||||
|
{ |
||||
|
left: "+=" + left + "px", |
||||
|
}, |
||||
|
animateTime |
||||
|
); |
||||
|
setTimeout(function () { |
||||
|
action = true; |
||||
|
}, animateTime); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
})(jQuery); |
||||
Loading…
Reference in new issue