<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.slider_main {
width: 790px;
height: 340px;
margin: 20px auto;
position: relative;
overflow: hidden;
}
.slider_list {
margin: 0;
padding: 0;
height: 340px;
position: absolute;
}
.item {
list-style: none;
float: left;
}
.item:first-child {
display: block;
}
.item a {
font-size: 0;
}
.circle_dot {
position: absolute;
left: 50%;
bottom: 20px;
margin: auto;
font-size: 0;
padding: 4px 8px;
border-radius: 12px;
background-color: hsla(0, 0%, 100%, .3);
z-index: 1;
transform: translateX(-50%);
}
.dot {
display: inline-block;
margin: 0 5px;
width: 12px;
height: 12px;
border-radius: 100%;
background-color: #fff;
cursor: pointer;
}
.dot.active {
background-color: #db192a;
}
.arrow {
display: none;
position: absolute;
z-index: 1;
top: 50%;
margin-top: -30px;
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, .1);
line-height: 60px;
text-align: center;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.arrow:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.arrow_left {
left: 0;
}
.arrow_right {
right: 0;
}
.fl {
float: left;
}
</style>
</head>
<body>
<div class="slider_main">
<ul class="slider_list">
<li class="item fl">
<a href="#">
<img class="item_img" src="img/1.jpg" />
</a>
</li>
<li class="item fl">
<a href="#">
<img class="item_img" src="img/2.jpg" />
</a>
</li>
<li class="item fl">
<a href="#">
<img class="item_img" src="img/3.jpg" />
</a>
</li>
<li class="item fl">
<a href="#">
<img class="item_img" src="img/4.jpg" />
</a>
</li>
<li class="item fl">
<a href="#">
<img class="item_img" src="img/5.jpg" />
</a>
</li>
<li class="item fl">
<a href="#">
<img class="item_img" src="img/6.jpg" />
</a>
</li>
<li class="item fl">
<a href="#">
<img class="item_img" src="img/7.jpg" />
</a>
</li>
<li class="item fl">
<a href="#">
<img class="item_img" src="img/8.jpg" />
</a>
</li>
</ul>
<!--指示器-->
<div class="circle_dot">
</div>
<!--箭头-->
<div class="arrow_left arrow"><</div>
<div class="arrow_right arrow">></div>
</div>
</body>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var $wrap = $(".slider_main");
var $list = $wrap.find(".slider_list");
var $item = $list.find('.item');
var $dotBox = $wrap.find(".circle_dot");
var $arrowLeft = $wrap.find(".arrow_left");
var $arrowRight = $wrap.find(".arrow_right");
var step = $item.width();
var timer;
var i = 0; //默认显示第i张
//生成圆点
$item.each(function(i) {
$dotBox.append('<div class="dot"></div>');
});
//计算宽度
$list.width($item.outerWidth() * $item.length);
$list.prepend($item.last().clone());
$list.append($item.first().clone());
console.log($item.length)
stop();
setActiveDot(i);
clearInterval(timer);
var timer = setInterval(function() {
move();
}, 2000);
function move() {
//i++;
var left = parseFloat($list.css("left"));
left = left - step;
$list.stop().animate({
left: left
});
//stop();
setActiveDot(i);
play();
if(i == $li.length) {
i = 0;
$list.css({
left: 0
});
};
}
function stop() {
clearInterval(timer);
}
//设置定时器
function play() {
clearInterval(timer);
timer = setInterval(function() {
$arrowRight.trigger("click");
}, 2000);
}
play();
function setActiveDot(i) {
$dotBox.find('.dot').removeClass("active").eq(i).addClass("active");
}
$dotBox.on("mouseenter", '.dot', function() {
i = $(this).index();
stop();
move(i);
});
$dotBox.on("mouseleave", '.dot', function() {
play();
});
$wrap.hover(function() {
stop();
$arrowLeft.fadeIn();
$arrowRight.fadeIn();
}, function() {
play();
$arrowLeft.fadeOut();
$arrowRight.fadeOut();
});
$arrowRight.click(function() {
console.log(i);
if(i == $item.length) {
i = 1;
$list.animate({
left: '0'
}, 1)
i = 0;
} else {
i++;
}
move(i);
});
$arrowLeft.click(function() {
console.log(i);
if(i == 0) {
$list.css({
left: '0'
})
i = $item.length - 1;
} else {
i--;
}
move(i);
})
</script>
</html>
浙公网安备 33010602011771号