无缝轮播图/文字

前言

还记得有一回面试，面试官让我上机用jQuery实现轮播图。当时我内心是崩溃的，想着现在不都使用插件吗？谁还自己实现轮播图（其实，是我自己不会。）。最近，又碰到文字的轮播，所以还是有必要自己写写相关代码的。

这里以文字轮播为例

一、左右无缝轮播

想要实现的效果如图所示：

1.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 * {  padding: 0;  margin: 0;  }
 body {  font: 16px/1 arial, "Microsoft yahei";  }
 ol, ul {  list-style: none;  }
 li {  list-style-type: none;  }
 a {  text-decoration: none;  list-style: none;  }
 .wrap {
      width: 660px;
      height: 40px;
      position: relative;
      margin: 100px auto;     
 }
 .swiper-container {
      height: 40px;
      width: 600px;
      overflow: hidden;
      line-height: 40px;
      font-size: 24px;
      position: relative;
      margin: auto;
  }
.swiper-content {
      height: 100%;
      width: 8000%;
      position: absolute;
      top: 0;
      left: 0;
  }
 .swiper-content li {
      width: 600px;
      float: left;
  }
 .arrow {
      position: absolute;
      top: 0;
      font-size: 30px;
      width: 30px;
      height: 40px;
      line-height: 40px;
   }
  .arrow-left {
      left: 0;
   }
  .arrow-right {
      right: 0;
      text-align: right;
  }

2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="wrap">
    <div class="swiper-container">
        <ul class="swiper-content">
            <li>
                <a href="#">1.这里的鲜花都是最新鲜的，质量也是最好的！</a>
            </li>
            <li>
                <a href="#">2.公告：9月15日起增开夜间21点-24点交易场次</a>
            </li>
            <li>
                <a href="#">3.花期365</a>
            </li>
        </ul>
    </div>
    <a href="#" class="arrow-left"> < </a>
    <a href="#" class="arrow-right"> > </a>
</div>

3.JavaScript说明

思维步骤：

1.克隆第一个li追加到ul最后面；

2.自动向左轮播时，设置一个参数index表示li的索引，通过index来计算ul的偏移量left，向左轮播一个li，index+1；

3.自动向左轮播到最后一张图片时，ul的偏移量left= (li的个数-1)*显示区域的宽度，如图所示；

4.要想实现无缝向左轮播，其实就是当index = li的个数-1时，将ul的偏移量瞬时改为0，又回到初始状态（这个过程我们看不见）。由于下一次轮播时，index先加1，所以直接显示第二个li的内容，如图所示：

5.点击右边的箭头，实现原理和自动向左轮播一样；

6.点击左边的箭头，就是让ul向右轮播，同样的使用index作为li的索引值，向右轮播一次index-1；

7.无缝向右轮播，其实就是当index = 0 时，点击箭头时，让index = li的个数-2，让ul的偏移量瞬时为(li的个数-1)*显示区域的宽度；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
$(function () {
        var swiperContainer = $(".swiper-container");
        var swiperContent = $(".swiper-content");
  		//  将第一个li标签克隆到ul最后面
        $(".swiper-content li:eq(0)").clone(true).appendTo(swiperContent);
        var perWidth = swiperContainer.width();    //  获取每一个li的宽度
        var timer = 0;  //  设置定时器全局变量的目的是实现点击左右同步
        var liNum = swiperContent.find("li").length;  // li标签的个数（包括克隆的li）
        var index = 0; // index指的是每个li的索引
        var clickEndFlag = true ; //  立一个flag，规定每张走完才能再点击
        function scroll() {  // 滚动函数
//        动画函数： 600为动画的速度
//                  回调函数为animate 函数执行完之后，要执行的函数。
//                       animate执行完之后，设置clickEndFlag为true，说明一个完整的li已经完全走完；
//         				 当index= li的个数-1时，让left重置为0，实现无缝轮播；
//                       最后注意将li的索引充值为0，重新开始轮播。
            swiperContent.stop().animate({
                left: -index*perWidth
            },600,function () {
                clickEndFlag = true;
                if(index == liNum - 1){
                    swiperContent.css({
                        left: 0
                    })
                    index  = 0;
                }
            })
        }
  		//点击右边箭头，切换到下一张
        $(".arrow-right").on("click",function () {
            if(clickEndFlag){
                next();
                clickEndFlag = false;
            }
        })
        function next() {
            index++;
            scroll();
        }

        //点击左边箭头，切换到上一张
        $(".arrow-left").on("click",function () {
            if(clickEndFlag){
                prev();
                clickEndFlag = false;
            }
        })
        function prev() {
            index--;
            if(index < 0){
                index = liNum - 2;
                swiperContent.css({
                    "left": -(liNum-1)*perWidth
                })

            }
            scroll();
        }
		//  自动轮播
        timer = setInterval(next,3000);

		//  鼠标放在ul上时，取消定时器
        swiperContent.on("mouseover",function () {
            clearInterval(timer);
        })
		//  鼠标离开ul时，设置定时器
        swiperContent.on("mouseout",function () {
            timer = setInterval(next,3000);
        })

		//   鼠标放到左右方向时关闭定时器
        $(".arrow-left,.arrow-right").hover(function () {
            clearInterval(timer);
        },function () {
            timer = setInterval(next,3000);
        })
    })

注意：要想animate动画函数起作用，那么这个对象必须是绝对定位的。

二、上下无缝轮播

想要实现的效果如图所示：

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../demo/jquery-2.2.3.min.js"></script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .wrap{
            position: relative;
            width: 600px;
            margin: 100px;
        }
        .swiper-container{
            width: 600px;
            height: 40px;
            overflow: hidden;
            position: relative;
        }
        .swiper-content{
            position: absolute;
            top:0;
            left:0;
            line-height: 40px;
            font-size: 20px;
            width: 600px;
        }
        .swiper-content li{
            height: 40px;
        }
        .arrow{
            position: absolute;
            top:50px;
            right: 0;
            margin: auto;
            width: 40px;
            height:40px;
            font-size: 40px;
        }
        .arrow-up{
            left: -40px;
        }
        .arrow-down{
            left: 40px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="swiper-container">
        <ul class="swiper-content">
            <li>
                <a href="#">1.这里的鲜花都是最新鲜的，质量也是最好的！</a>
            </li>
            <li>
                <a href="#">2.公告：9月15日起增开夜间21点-24点交易场次</a>
            </li>
            <li>
                <a href="#">3.花期365</a>
            </li>
        </ul>
    </div>
    <a href="#" class="arrow arrow-up"> △ </a>
    <a href="#" class="arrow arrow-down"> ▽ </a>
</div>
<script>
    $(function () {
        var swiperContainer = $(".swiper-container");
        var swiperContent = $(".swiper-content");
        $(".swiper-content li:eq(0)").clone(true).appendTo(swiperContent);
        var perHeight = swiperContainer.height();
        console.log(perHeight);
        var liNum = swiperContent.find("li").length;
        var index = 0;
        var timer = 0;
        var flag = true;
        function scroll() {
            swiperContent.stop().animate({
                top: -perHeight*index
            },600,function () {
                flag = true;
                if( index == liNum-1){
                    swiperContent.css({
                        top: 0
                    })
                    index = 0;
                }
            })
        }
//        向上轮播
        $(".arrow-up").on("click",function () {
           if(flag){
               next();
               flag = false;
           }
        })
        function next() {
            index++;
            scroll();
        }
//        向下轮播
        $(".arrow-down").on("click",function () {
            if(flag){
                prev();
                flag = false;
            }
        })
        function prev() {
            index--;
            if(index < 0 ){
                index = liNum -2;
                swiperContent.css({
                    top: -(liNum-1)*perHeight
                })
            }
            scroll();
        }
        timer = setInterval(next,3000);
        $(".swiper-content,.arrow-up,.arrow-down").on("mouseover",function () {
            clearInterval(timer);
        })
        $(".swiper-content,.arrow-up,.arrow-down").on("mouseout",function () {
            timer = setInterval(next,3000);
        })
    })
</script>
</body>
</html>
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Whittney <br>我就是我，不一眼的烟火！*_*<br><br>