<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
<title>jquery实现列表上下无缝循环轮播</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
* div.wrap {
width: 600px;
height: 400px;
border: 1px solid #000;
margin: 20px auto;
position: relative;
overflow: hidden;
}
* div.wrap ul {
width: 3000px;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
* div.wrap ul li {
width: 600px;
height: 400px;
float: left;
background-color: lightblue;
}
* div.wrap ul li img {
width: 100%;
height: 100%;
}
* div.wrap p {
width: 100%;
height: 20px;
font-size: 0;
position: absolute;
bottom: 20px;
left: 0;
text-align: center;
}
* div.wrap p span {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
margin: 0 5px;
}
* div.wrap p span.active {
background: red;
}
* div.wrap button {
width: 50px;
height: 75px;
font-size: 35px;
text-align: center;
line-height: 75px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
border: none;
outline: none;
color: #fff;
background: rgba(0, 0, 0, 0.3);
transition: all 1s;
}
* div.wrap button:last-child {
right: 0;
}
* div.wrap button:hover {
background: rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>1</li>
</ul>
<p>
<span class="active"></span> <span></span>
</p>
<button><</button>
<button>></button>
</div>
<script>
// 第一行第一个字符
;
(function ($) {
$.fn.extend({
lunbo: function (time) {
time = time ? time : 3000;
// 存一下
var that = this;
// 1. 自动轮播
var n = 0;
var timer = setInterval(auto, time);
// 2. 划上划下
$(this).hover(function () {
clearInterval(timer);
}, function () {
timer = setInterval(auto, time);
});
// 3. 点击右箭头
$(this).find('button:last-child').click(auto);
$(this).find('button').eq(0).click(function () {
n -= 2;
auto();
});
// 4. 小圆点
$(this).find('p span').click(function () {
n = $(this).index() - 1;
auto();
});
function auto() {
// console.log($(that));
n++;
if (n == $(that).find('li').length) {
n = 0;
$(that).find('ul').css('left', 0);
n = 1;
}
if (n == -1) {
n = $(that).find('li').length - 1;
$(that).find('ul').css('left', -n * $(that).find('li').width());
n = $(that).find('li').length - 2;
}
// 动画会队列
$(that).find('ul').stop().animate({
left: $(that).find('li').width() * (-n)
}, 600);
// 设置小圆点
$(that).find('p span').eq(n == $(that).find('span').length ? 0 : n).addClass(
'active').siblings().removeClass(
'active');
}
}
});
})(jQuery);
$('.wrap').lunbo(2000);
</script>
</body>
</html>
