<!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>