3 changed files with 311 additions and 7 deletions
@ -0,0 +1,54 @@ |
|||
/*定义css变量*/ |
|||
:root{ |
|||
--mywidth: 500px; |
|||
--myheight: 100%; |
|||
} |
|||
|
|||
*{ |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
ul{ |
|||
list-style: none; |
|||
} |
|||
.carousel-contentMy{ |
|||
width: var(--mywidth); |
|||
height: var(--myheight); |
|||
position: relative; |
|||
overflow: hidden; |
|||
border-radius:10px; |
|||
} |
|||
.carouselMy{ |
|||
height: var(--myheight); |
|||
position: absolute; |
|||
} |
|||
.carouselMy li{ |
|||
float: left; |
|||
} |
|||
.carouselMy li,.carouselMy li img{ |
|||
width: var(--mywidth); |
|||
height: var(--myheight); |
|||
} |
|||
.img-indexMy{ |
|||
position: absolute; |
|||
bottom: 8px; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
.img-indexMy 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-indexMy li.js_indexMy,.img-indexMy li:hover{ |
|||
background-color: rgba(0,0,0,0.7); |
|||
} |
|||
@ -0,0 +1,201 @@ |
|||
(function ($) { |
|||
$.fn.carouselMy = function (param) { |
|||
var carouselMy = param.carousel, //轮播框架
|
|||
indexContainer = param.indexContainer, //下标框架
|
|||
list = $(carouselMy).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, //索引值
|
|||
indexListMy, //下标列表
|
|||
indexClassName = "js_indexMy", //下标高亮类名
|
|||
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>"); |
|||
} |
|||
$(carouselMy) |
|||
.width(totalWidtn) |
|||
.append($(list[0]).clone()) |
|||
.prepend($(list[list.length - 1]).clone()) |
|||
.css("left", "-" + list.width() + "px"); |
|||
list = $(carouselMy).children("li"); |
|||
indexListMy = $(indexContainer).children("li"); |
|||
$(indexListMy[index - 1]).addClass(indexClassName); |
|||
|
|||
/*判断是否自动播放*/ |
|||
if (autoPlay) { |
|||
startTiming(); |
|||
$(carouselMy + "," + 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({ |
|||
changeIndexMy: function (index) { |
|||
$(indexListMy).removeClass(indexClassName); |
|||
$(indexListMy[index]).addClass(indexClassName); |
|||
}, |
|||
}); |
|||
|
|||
/*向左切换图片*/ |
|||
$.extend({ |
|||
leftChangeImg: function () { |
|||
action = false; |
|||
if (index == len) { |
|||
index = 0; |
|||
$(carouselMy).stop(true, true).css("left", "0px"); |
|||
} |
|||
index++; |
|||
$(carouselMy) |
|||
.stop(true, true) |
|||
.animate( |
|||
{ |
|||
left: "-=" + list.width() + "px", |
|||
}, |
|||
animateTime |
|||
); |
|||
setTimeout(function () { |
|||
if (index == len) { |
|||
index = 0; |
|||
$(carouselMy).stop(true, true).css("left", "0px"); |
|||
} |
|||
action = true; |
|||
}, animateTime); |
|||
$.changeIndexMy(index - 1); |
|||
}, |
|||
}); |
|||
|
|||
/*向右切换图片*/ |
|||
$.extend({ |
|||
rightChangeImg: function () { |
|||
action = false; |
|||
if (index == 0) { |
|||
index = len; |
|||
$(carouselMy) |
|||
.stop(true, true) |
|||
.css("left", "-" + left + "px"); |
|||
} |
|||
index--; |
|||
var left = totalWidtn - list.width() * 2; |
|||
$(carouselMy) |
|||
.stop(true, true) |
|||
.animate( |
|||
{ |
|||
left: "+=" + list.width() + "px", |
|||
}, |
|||
animateTime |
|||
); |
|||
setTimeout(function () { |
|||
if (index == 0) { |
|||
index = len; |
|||
$(carouselMy) |
|||
.stop(true, true) |
|||
.css("left", "-" + left + "px"); |
|||
} |
|||
action = true; |
|||
}, animateTime); |
|||
if (index == 0) { |
|||
$.changeIndexMy(len - 1); |
|||
} else { |
|||
$.changeIndexMy(index - 1); |
|||
} |
|||
}, |
|||
}); |
|||
|
|||
/*下翻点击处理*/ |
|||
$(next).on("click", function () { |
|||
var nowLeft = Math.abs(parseInt($(carouselMy).css("left"))); |
|||
var left = totalWidtn - list.width() * 2; |
|||
if (action) { |
|||
if (nowLeft == left) { |
|||
index = 0; |
|||
$(carouselMy).stop(true, true).css("left", "0px"); |
|||
} |
|||
$.leftChangeImg(); |
|||
} |
|||
}); |
|||
|
|||
/*上翻点击处理*/ |
|||
$(prev).on("click", function () { |
|||
var nowLeft = Math.abs(parseInt($(carouselMy).css("left"))); |
|||
var left = totalWidtn - list.width() * 2; |
|||
if (action) { |
|||
if (nowLeft == 0) { |
|||
index = len; |
|||
$(carouselMy) |
|||
.stop(true, true) |
|||
.css("left", "-" + left + "px"); |
|||
} |
|||
$.rightChangeImg(); |
|||
} |
|||
}); |
|||
|
|||
/*下标点击处理*/ |
|||
indexListMy.on("click", function () { |
|||
var no = $(this).index() + 1; |
|||
if (action) { |
|||
if (no > index) { |
|||
$.changeIndexMy(no - 1); |
|||
action = false; |
|||
var left = (no - index) * list.width(); |
|||
index = no; |
|||
$(carouselMy) |
|||
.stop(true, true) |
|||
.animate( |
|||
{ |
|||
left: "-=" + left + "px", |
|||
}, |
|||
animateTime |
|||
); |
|||
setTimeout(function () { |
|||
action = true; |
|||
}, animateTime); |
|||
} else if (no < index) { |
|||
$.changeIndexMy(no - 1); |
|||
action = false; |
|||
var left = (index - no) * list.width(); |
|||
index = no; |
|||
$(carouselMy) |
|||
.stop(true, true) |
|||
.animate( |
|||
{ |
|||
left: "+=" + left + "px", |
|||
}, |
|||
animateTime |
|||
); |
|||
setTimeout(function () { |
|||
action = true; |
|||
}, animateTime); |
|||
} |
|||
} |
|||
}); |
|||
}; |
|||
})(jQuery); |
|||
Loading…
Reference in new issue