另一个方法是使用脚本JS，在JS中写入播放歌曲的代码，在所有的网页中调用。
var p = CurrentStyle(this._container).position
p == "relative" || p == "absolute" || (this._container.style.position = "relative")
this._container.style.overflow = "hidden"
this._slider.style.position = "absolute"
如果没有设置Change切换参数属性，会自动根据滑动对象获取：
this.Change = this.options.Change ? this.options.Change :
this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count
执行Run方法就会开始进入切换，其中有一个可选参数用来重新设置要切换的图片索引：
index == undefined &&(index = this.Index)
index <0 &&(index = this._count - 1) || index >= this._count &&(index = 0)
之后就到设置使用tween缓动时需要的参数了，
包括_target(目标值)、_t(时间)、_b(初始值)和_c(变化量)：
Code
还有Duration(持续时间)是自定义属性。
参数设置好后就执行Move程序开始移动了。
里面很简单，首先判断_c是否有值（等于0表示不需要移动）和_t是否到达Duration，
未满足条件就继续移动，否则直接移动到目标值并进行下一次切换：
Code
使用说明
实例化需要3个参数，分别是容器对象，滑动对象和切换数量，之后可以直接执行Run方法运行：
new SlideTrans("idContainer", "idSlider", 3).Run()
还有以下可选属性：
Vertical: true,//是否垂直方向（方向不能改）
Auto: true,//是否自动
Change: 0,//改变量
Duration: 50,//滑动持续时间
Time: 10,//滑动延时
Pause: 2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){},//完成转换时执行
Tween: Tween.Quart.easeOut//tween算子
其中Vertical初始化后就不能修改，Tween算子可参照这里的缓动效果选择（实例中选了其中3个）。
还有提供了以下方法：
Next: 切换下一个
Previous: 切换上一个
Stop: 停止自动切换
还有上面说到的Run
程序代码
Code
推荐使用ckplayer，
最新更新日期：2018-01-10
修正了不能播放部分rtmp视频的bug
增加了删除缓动的api
升级方法
替换ckplayer.swf及ckplayer.js中112行!(function() {以下的内容
在ckplayer.js及ckplayer.xml中搜索“addCallback”属性节点，列表中增加deleteAnimate属性
最新更新日期：2017-12-14
调用播放器初始化时增加了一个属性playerID，可以在同页面多播放器时用来区分不同的播放器发出的监听事件
修正了一些无关紧要的bug
增加了h5部分对于控制栏的限制以及相对应的api
统一了flashplayer和h5的右键设置
增加了播放器动作按钮点击的监听函数clickEvent
升级方法
替换ckplayer.swf及ckplayer.js中112行!(function() {以下的内容
更新日期：2017-12-08
修正了h5字幕文件显示样式控制不了的bug
增加了控制控制栏显示/隐藏的接口
升级方法
替换ckplayer.swf及ckplayer.js中113行!(function() {以下的内容
搜索ckplayer.js以及ckplayer.xml中的addCallback属性，在其最后添加：“,changeControlBarShow”
更新日期：2017-11-24
修正了html5环境中视频出错时播放器上方不显示错误提示的bug
升级方法
替换ckplayer.swf及ckplayer.js中113行!(function() {以下的内容
更新日期：2017-11-23
1：增加了flashplayer中调用视频地址包含逗号时出错的bug
2：修正了当删除ckplayer.js的配置logo被删除后html5环境出错的bug
3：修正了html5中缓冲图标没有动画效果的bug
升级方法，1:替换ckplayer.swf、2：替换ckplayer.js中112行!(function() {以下的内容、3：在ckplayer.js中找到“m3u8MaxBufferLength: 30,”，在该行下面增加“split:',',”、4：在ckplayer.xml中找到“<m3u8MaxBufferLength>30</m3u8MaxBufferLength>”，在该行下面增加“<split>,</split>”
更新日期：2017-11-16
1：修复了ipad不能播放m3u8的bug
2：修改移动端默认不使用ckplayer自定义风格
3：html5风格中增加了倍速播放按钮列表
4：html5环境中增加了倍速播放api
升级方法，只需要替换ckplayer.swf以及ckplayer.js中112行!(function() {以下的内容
更新日期：2017-11-10
HTML5环境支持视频的旋转和缩放，修改的文件为ckplayer.js，修改的内容是videoRotation()函数和videoZoom()函数
更新日期：2017-11-07，更新内容（如果你不是使用的rtmp则无需更新）：
1：html5播放器统一使用ckplayerConfig()函数里指定的logo图片做为logo
2：修正了部分rtmp直播流无法播放的bug
3：修正了一些其它bug
ckplayer X版本升级说明，2017-11-01
一：重构代码
1：完全重构了ckplayer.js、ckplayer.xml，配置规则标准化。不再使用同一个属性定义多个值的形式进行配置。ckplayer.js中的html5部分采用自定义风格的功能。
2：完全重构了language.xml，语言包进行了可扩展升级。
3：完全重构了风格文件。不再采用以前版本的压缩包形式，而是仅采用style.xml进行配置，图片文件全部转化成base64使用，并且支持加密。保护您的插件。并且支持自定义按钮，图片或swf的功能。
二：功能方面的升级
1：广告部分增加了新的广告形式，插入广告，结尾广告，其它类型的广告（如横幅，角标等自定义显示时间），保留原来的前置广告，暂停广告。增加了广告展示监听，广告点击监听功能。
2：播放部分升级了对m3u8格式的内部支持，不再使用外部插件播放。
3：增加了flashplayer环境对m3u8文件的加密支持。
4：内置了清晰度支持功能，以及m3u8清晰度自动选择及显示的支持。
5：内置了d幕显示功能，多种缓动效果。可以制作出多种d幕显示效果。并且支持d幕和播放器的互动，以前和js的互动。
6：重构了播放器的API
三：其它说明
本次升级是一次非常大的升级行为，跟之前版本基本毫无联系。调用播放器的代码更加简单高效智能化。
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.imgview {
width: 255px
height: 402px
margin: 50px auto
border: 10px solid red
overflow: hidden
}
.imgview img {
width: 255px
height: 402px
}
.imgview-nav {
width: 255px
margin: 10px auto
border: 1px solid red
list-style-type: none
}
.imgview-nav li {
float: left
width: 15px
height: 15px
border: 1px solid blue
margin: 10px
}
span {
display: inline-block
width: 50px
height: 50px
background: #CFC
border-radius: 50%
}
</style>
</head>
<body>
<div class="wrap">
<div class="imgview" id="imgView">
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/1.jpg" alt=""></td>
<td><img src="img/2.jpg" alt=""></td>
<td><img src="img/3.jpg" alt=""></td>
<td><img src="img/4.jpg" alt=""></td>
<td><img src="img/5.jpg" alt=""></td>
<td><img src="img/6.jpg" alt=""></td>
</tr>
</table>
</div>
<ul class="imgview-nav" id="imgviewNav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<span>左边</span>
<span>右边</span>
</div>
<script>
var imgView = document.getElementById('imgView'),
imgWidth = imgView.getElementsByTagName('img'),
btn = document.getElementsByTagName('li'),
len = btn.length,
imgNum = 0,
endPos = 0,
timer = null,
timer2 = null,
conSpan = document.getElementsByTagName('span')
conSpan[0].onclick = function (){
if (timer) {
clearInterval(timer)
}
if (timer2) {
clearInterval(timer2)
}
imgNum--
if (imgNum <0 ) {
imgNum = len
}
timer = setInterval(move, 16)
timer2 = setInterval(autoMove, 3000)
}
conSpan[1].onclick = function (){
if (timer) {
clearInterval(timer)
}
if (timer2) {
clearInterval(timer2)
}
imgNum++
if (imgNum == len ) {
imgNum = 0
}
timer = setInterval(move, 16)
timer2 = setInterval(autoMove, 3000)
}
//绑定事件。添加移动效果
for (var i = 0i <leni++) {
btn[i].index = i
btn[i].onmouseover = function(){
clearInterval(timer2)
imgNum = this.index
if (timer) {
clearInterval(timer)
}
timer = setInterval(move, 16)
}
btn[i].onmouseout = function(){
timer2 = setInterval(autoMove, 2000)
}
}
//图片缓动效果，原理是保持步数不变，改变距离的同时改变速度
function move(){
var starPos = imgView.scrollLeft,
speed
endPos = imgNum * imgWidth[0].offsetWidth
speed = (endPos - starPos) / 20
if (speed == 0) {
clearInterval(timer)
} else if(speed >0){
speed = Math.ceil(speed)
} else {
speed = Math.floor(speed)
}
imgView.scrollLeft = starPos + speed
}
//控制图片的自动滚动，通过控制索引值来控制图片的自动滚动
function autoMove(){
imgNum++
if(imgNum == len) {
imgNum = 0
}
timer = setInterval(move, 20)
}timer2 = setInterval(autoMove, 2000)
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）