<style>
.carousel {
width: 100%;
height: 420px;
padding: 0px;
margin: 0 auto;
position: relative;
&:hover{
.carousel-btn-direction{
display: block;
}
}
}
.carousel-imgs {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
list-style: none;
background: white;
}
.carousel-imgs li {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
opacity: 0;
}
.carousel-imgs a {
text-decoration: none;
display: block;
height: 100%;
}
.carousel-imgs img {
width: 100%;
height: 100%;
}
.carousel-btn-direction{
z-index: 50;
position: absolute;
top: 45%;
width: 50px;
height: 50px;
border: 0px;
outline: none;
background: rgba(0, 0, 0, 0.4);
text-align: center;
color: white;
font-size: 34px;
font-family: "consolas";
border-radius: 50%;
cursor: pointer;
display: none;
}
.carousel-btn-left {
left:50px;
}
.carousel-btn-right{
right:50px;
}
.carousel-btns button:hover {
background: rgba(0, 0, 0, 0.5);
}
.carousel-btn-left {
float: left;
}
.carousel-btn-right {
float: right;
}
</style>
<div class="carousel" >
<ul class="carousel-imgs">
<li>
<a href="#"><img src="assets/images/1.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="assets/images/2.jpeg" alt="" /></a>
</li>
<li>
<a href="#"><img src="assets/images/3.jpeg" alt="" /></a>
</li>
</ul>
<button type="button" class="carousel-btn-direction carousel-btn-left">></button>
<button type="button" class="carousel-btn-direction carousel-btn-right"><</button>
</div>
<script>
$(function(){
carousel();
})
function carousel() {
/* 获取元素对象 */
var $carousel = $(".carousel");
var $imgs = $(".carousel-imgs li");
var $btnL = $(".carousel-btn-left");
var $btnR = $(".carousel-btn-right");
/* 创建导航按钮 */
var $item_group = $("<ul></ul>");
$item_group.attr("class", "carousel-items");
$imgs.each(function() {
$item_group.append("<li></li>");
});
$carousel.append($item_group);
/* 样式初始化 */
$item_group.css({
"padding": "0px",
"margin": "0px",
"list-style": "none",
"width": "auto",
"z-index": "50",
"position": "absolute",
"bottom":"30px"
});
$item_group.children().css({
"width": "40px",
"height": "3px",
"padding": "0px",
"margin": "5px",
"background": "#fff",
"opacity": "0.6",
"cursor": "pointer",
"float": "left"
});
/* 初始展示位置 */
var index = 0;
var $items = $(".carousel-items li");
$items.eq(index).css("background", "rgba(0, 0, 0, 0.4)");
$imgs.eq(index).css("opacity", "1");
$imgs.eq(index).css("z-index", "20");
var $w=$(window).width();
var $nowWidth=$(".carousel-items").width();
var $nowCenter=($w-$nowWidth)/2;
$item_group.css("left",$nowCenter);
/* 按钮点击动作 */
$btnL.click(function() {
imgAnimator(false);
});
$btnR.click(function() {
imgAnimator(true);
});
$items.click(function() {
imgAnimator(true, $items.index($(this)));
});
setInterval(imgAnimator(true, index++), 3000);
/* 图像动画 */
function imgAnimator(toNext, select) {
if(select != null) {
index = select;
} else if(toNext == true) {
index = ($imgs.length + index + 1) % $imgs.length;
} else if(toNext == false) {
index = ($imgs.length + index - 1) % $imgs.length;
}
$items.css("background", "white");
$items.eq(index).css("background", "rgba(0, 0, 0, 0.4)");
$imgs.eq(index).css("z-index", 20);
/*淡入淡出*/
$imgs.eq(index).animate({
"opacity": "1"
}, "slow", function() {
$imgs.css("z-index", "0");
$imgs.css("opacity", "0");
$imgs.eq(index).css("z-index", 10);
$imgs.eq(index).css("opacity", "1");
});
}
}
</script>