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