jquery轮播图 

<!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>&lt;</button>
        <button>&gt;</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>

 

posted @ 2022-06-28 10:14  _心之所向便是光  阅读(37)  评论(0)    收藏  举报