h5轮播组件 Yslider

Posted on   |   In   |  

本文主要介绍一款简单的h5 slider –Yslider, 采用原生js书写，使用于任何js框架
支持视频播放
slider

Yslider 参数

Yslider 参数以对象形式传入
1、target: Slier 容器 DOM 的 id 属性， 必填， 类型 string
2、interval: 图片切换间隔时间， 非必填， 类型 number, 单位 s(秒)， defualt 3s
3、showCircle: 是否显示圆点导航， 非必填， 类型 boolean, default true
4、circleColor： 圆点颜色， 非必填， 类型 颜色(string)， default ‘#00F5FF’
5、imgArray: 图片列表， 必填， 类型 array

  • redirect: 点击图片跳转地址， 非必填， 类型 url(string), 播放视频时为视频地址
  • url: 图片地址， 必填， 类型 url(string)
  • type: 类型(string), 选填, 默认按图片处理, 如果是播放视频, type 为 video
  • detail: 图片介绍， 放在 alt 属性中， 非必填，类型 string

Yslider 使用

注意： 推荐使用 yslider 3.x 版本， 3.x 版本需要依赖组件 video.js， 更好支持视频播放
1、在html 标签中定一个 slider 元素用于容纳图片列表, 并定义好slider容器的尺寸

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.page-wrap .slider {  //
    height: 25rem; //定义容器高度，
    width: 100%; //容器宽度
    overflow: hidden;  //超出不显示
}
</style>
//yslider 3.x 版本需要 video-js.min.css
<link rel="stylesheet" href="{{ STATIC_URL }}js/video/video-js.min.css" />
<div class="page-wrap">
    <div id="slider" class="slider">  //slider 容器标签 一定包含id 属性
    </div>
</div>
//yslider 3.x 版本需要 video.js
<script src="{{ STATIC_URL }}js/video/video.min.js"></script>
//引入 yslider
<script src="/static/common/slider/slider-1.0.js"></script> <!--引入 slider-->

2、使用slider

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
(function(win) {
    imgArray = [
        {redirect: '', url: '/static/images/slider1.jpg', detail: 'img1'},
        {redirect: '', url: '/static/images/slider2.jpg', detail: 'img2'},
        {redirect: '', url: '/static/images/slider3.jpg', detail: 'img3'},
        {redirect: 'http://www.runoob.com/try/demo_source/movie.mp4', url: '/static/images/slider4.jpg', type: "video", detail: 'img4'}
    ]  //准备图片列表， redirect 为点击图片跳转链接， url 为图片下载地址， detail: 为图片说明
     Yslider({  //初始化 yslider
        target: 'slider',  //slider 容器id
        interval: 2,  //图片切换间隔时间, 单位s, default 3s
        imgArray: imgArray, //图片列表
        showCircle: true,  //是否显示圆点导航
        circleColor: '#00C5CD', //圆点导航颜色
     })
  })(window);
</script>

Yslider 源码

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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
/**
 * author: feifeiyu
 * version: 2.3
 * Yslider is a simple images slider for h5
 * @param target //slider container id
 * @param interval  // images change interval, s, default 3s
 * @param imgArray // images list, include properties: redirect, type, url, detail
 * @param showCircle //show circle nav, dafault true
 * @param circleColor: //circle background-color
 * yslider blog: https://feifeiyum.github.io/2016/10/30/yslider/
 */
var Yslider = (function() {
    var imgsNode = ''  //图片wrap
    var circlesNode = '' //圆点 dom
    var conWidth = '' // 图片宽度
    var circleColor = '' //圆点颜色
    var interval = ''  //间隔时间
    var intervalFlag = null //setInterval 值
    var currentIndex = 0 //当前页面编号
    var imgLength = ''
    var ysGenDom = function(opt) {
        var container = document.getElementById(opt.target)
        if(!container) {
            throw '[error]: Yslider - can not find slider container DOM'
        }
        conWidth = container.clientWidth //slider width
        imgLength = opt.imgArray.length 
        //检查 imgArray 有效性
        for(var i = 0; i < imgLength; i++) {
            if(!opt.imgArray[i].url) {
                opt.imgArray.splice(i, 1)
                imgLength -= 1
                i -= 1
            }
        }
        
        //生成slider dom 字符串
        var sliderNode = '<div id="yslider-wrap" class="yslider-wrap"'
            + 'style="position: relative; width: 100%; height: 100%; overflow: hidden;">'
            +  '<ul id="yslider-imglist" class="yslider-imglist" style="position: relative;margin: 0; padding: 0; height: 100%; transition: all 0.5s; width: ' +( conWidth * (imgLength * 2) ) + 'px;">'
        var sliderItems = ''
        for(var i = 0; i < 2 * imgLength; i++) {
            var index = i % imgLength
            if(opt.imgArray[index].type === 'video') {
                sliderItems += '<li style="display: inline-block; height: 100%; width: ' + conWidth + 'px;">'
                   + '<img\ v-url="' + opt.imgArray[index].redirect + '" src="' + opt.imgArray[index].url + '"\ alt="' + opt.imgArray[index].detail + '"\ style="width: 100%;">'
                   + '<button class="video-play" v-url="' + opt.imgArray[index].redirect + '" style="position:absolute; top:35%; left:' + conWidth*(i+0.4)+ 'px; border: 2px solid #fff; border-radius: 50%; background: rgba(43, 51, 63, 0.6); height: 60px; width: 60px; "><div v-url="' + opt.imgArray[index].redirect + '" style="position:relative;left:16px;width:0;height:0;transform: rotate(45deg);border:8px solid;border-color: #fff #fff transparent transparent;"></div></button>'
                   + '</li>'
            } else {
                sliderItems += '<li style="display: inline-block; height: 100%; width: ' + conWidth + 'px;">'
                    + (opt.imgArray[index].redirect ? '<a\ href="' + opt.imgArray[index].redirect + '">' : '<a>')
                    + '<img\ src="' + opt.imgArray[index].url + '"\ alt="' + opt.imgArray[index].detail + '"\ style="width: 100%;">'
                    + '</a></li>'
            }
            if(imgLength === 1) {
                break
            }
        }
        sliderNode += sliderItems
        if(opt.showCircle && imgLength > 1) {
            sliderNode += '</ul><ul class="ysclider-circles" style="position: relative; bottom: 30px; margin: auto; width:'+ (18 * imgLength) +'px;">'
            for(var i=0; i<imgLength; i++) {
                sliderNode += '<li style="margin-right: 5px; display: inline-block;">'
                    + '<span class="ysclider-circle" style="display: block; width: 10px; height: 10px; border: 1px solid #ddd; border-radius: 50%; background: transparent;"></span></li>'
            }
        }
        sliderNode += '</ul></div>'
        container.innerHTML = sliderNode
    }
    //初始化函数
    var ysInit = function(cColor, showCircle, inval) {
        imgsNode = document.getElementById('yslider-imglist')
        if(showCircle) {
            circlesNode = document.getElementsByClassName('ysclider-circle')
            circleColor = cColor || '#00F5FF'
            //初始化，第一个园点加上样式
            if(circlesNode.length > 0) {
                circlesNode[0].style.backgroundColor = circleColor
                circlesNode[0].style.borderColor = circleColor
            }
        }
        interval = (inval * 1000) || 3000
    }
    //图片切换函数
    var ysChangeImg = function(index) {
        if(imgLength === 1) {
            return
        }
        if(index == 'next') {
			currentIndex ++
		} else if(index == 'prev') {
			currentIndex --
		} else {
			currentIndex = index
		}
        currentIndex = currentIndex < 0 ? (imgLength * 2 - 1) : (currentIndex % (imgLength * 2))
        var circleIndex = currentIndex % imgLength
        
        //移动图片
        imgsNode.style.marginLeft = '-' + (currentIndex * conWidth) + 'px'
        //圆点
        if(circlesNode) {
            for(var i = 0; i < imgLength; i++) {
                if(circleIndex === i) {
                    circlesNode[i].style.backgroundColor = circleColor
                    circlesNode[i].style.borderColor = circleColor
                } else {
                    circlesNode[i].style.backgroundColor = ''
                    circlesNode[i].style.borderColor = '#ddd'
                }
            }
        }
    }
    //视频播放
    var ysPlayVideo = function(vsrc) {
        var yslider = document.getElementById('yslider-wrap')
        var coverTag, closeTag, videoTag, vSource
        //播放器关闭
        var closeVideo = function() {
            //销毁播放器
            yslider.removeChild(coverTag)
        }
        //生成播放器元素
        var genVTage = function() {
            coverTag = document.createElement('div')
            coverTag.id = 'yslider-cover'
            coverTag.style.cssText = 'position: fixed;'
                + 'top:0;left:0; width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:2000;'
            closeTag = document.createElement('div')
            closeTag.id = 'yslider-closev'
            closeTag.style.cssText = 'position:absolute;'
                + 'margin: 5px;'
                + 'top:0;right:0;height:30px;width:30px;border-radius:50%;background:#fff;color:#000;'
                + 'font-size:20px;text-align:center;font-family:sans-serif;'
            closeTag.innerHTML = 'X'
            videoTag = document.createElement('video')
            videoTag.id = 'yslider-video'
            videoTag.autoplay = 'true'
            videoTag.controls = 'true'
            videoTag.style.cssText = 'position: relative;'
                + 'top:25%;'
                + 'width:' + conWidth + 'px;height:auto;max-height:' + conWidth + 'px;'
            vSource = document.createElement('source') 
            vSource.src = vsrc
            vSource.type = 'video/mp4'
            videoTag.appendChild(vSource)
            coverTag.appendChild(closeTag)
            coverTag.appendChild(videoTag)
            videoTag.play()
            yslider.appendChild(coverTag)
        }
        //播放
        genVTage()
        closeTag.addEventListener('click', closeVideo, false)
        
    }
    //自动播放函数
    var ysAutoPlay = function() {
        intervalFlag = setInterval(function() { ysChangeImg('next')}, interval)
    }
    //手动播放函数
    var ysManualPlay = function() {
        var ySlideroffsetX = 0
        var ySliderStartX = 0
        var touchEvt = function(evt) {
            var e = evt || window.event
            var touch = e.touches[0]
            
            switch(e.type) {
                case 'touchstart':
                    e.preventDefault()
                    ySliderStartX = touch.pageX
                    clearInterval(intervalFlag)
                    break
                case 'touchmove': 
                    e.preventDefault()
                    ySlideroffsetX = touch.pageX - ySliderStartX
                    imgsNode.style.marginLeft = '-' + (currentIndex * conWidth - ySlideroffsetX) + 'px'
                    break
                case 'touchend':
                    e.preventDefault()
                    if(ySlideroffsetX < 3 && ySlideroffsetX > -3) { //点击图片
                        var vsrc = e.target.getAttribute('v-url')
                        if(vsrc) {
                            ysPlayVideo(vsrc)
                        } else {
                            imgsNode.childNodes[currentIndex].childNodes[0].click()
                        }
                    } else if(ySlideroffsetX < -150) {
                        ysChangeImg('next') //左滑下一页
                    } else if(ySlideroffsetX > 150) {
                        ysChangeImg('prev') //右划上一页
                    } else { //滑动距离小，恢复
                        imgsNode.style.marginLeft = '-' + (currentIndex * conWidth) + 'px'
                    }
                    ySlideroffsetX = 0  //清空偏移
                    ySliderStartX = 0 //清空起始坐标
                    ysAutoPlay()  //恢复自动轮播
                    break
                case 'touchcancel':
                    e.preventDefault()
                    if(ySlideroffsetX < 3 && ySlideroffsetX > -3) { //点击图片
                        var vsrc = e.target.getAttribute('v-url')
                        if(vsrc) {
                            ysPlayVideo(vsrc)
                        } else {
                            imgsNode.childNodes[currentIndex].childNodes[0].click()
                        }
                    } else if(ySlideroffsetX < -100) {
                        ysChangeImg('next') //左滑下一页
                    } else if(ySlideroffsetX > 100) {
                        ysChangeImg('prev') //右划上一页
                    } else { //滑动距离小，恢复
                        imgsNode.style.marginLeft = '-' + (currentIndex * conWidth) + 'px'
                    }
                    ySlideroffsetX = 0  //清空偏移
                    ySliderStartX = 0 //清空起始坐标
                    ysAutoPlay()  //恢复自动轮播
                    break
                default:
                    break
            }
        }
        imgsNode.addEventListener('touchstart', touchEvt, false)
        imgsNode.addEventListener('touchmove', touchEvt, false)
        imgsNode.addEventListener('touchend', touchEvt, false)
        imgsNode.addEventListener('touchcancel', touchEvt, false)
    }
    var YS = function(opt) {
        if(!opt.target) {
            throw '[error]: Yslider - slider container DOM id target can not be null'
        }
        if(opt.interval !== undefined && typeof opt.interval !== 'number') {
            throw '[error]: Yslider - type of images change interval is number'
        }
        if(opt.imgArray === undefined) {
            throw '[error]: Yslider - slider\'s imgArray (image list array) can not be null'
        }
        if(opt.imgArray.constructor.toString().indexOf('Array') === -1) {
            throw '[error]: Yslider - type of imgArray is array'
        }
        if(opt.showCircle !== undefined && typeof opt.showCircle !== 'boolean') {
            throw '[error]: Yslider - type of showCircle is boolean'
        }
        //生成 slider DOM
        ysGenDom(opt)
        //初始化参数
        ysInit(opt.circleColor, opt.showCircle, opt.interval)
        //自动播放
        ysAutoPlay()
        //手动播放注册
        ysManualPlay()
    }
    return YS
}())
//如果采用模块化打包的时候加上这句
// module.exports = Yslider

END