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