直播平台搭建，javascript轮播图示例
直播平台搭建，javascript轮播图示例
1、先写一个公共的动画方法，保存在animate.js文件里
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
2、html+css+js代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript轮播图示例</title>
<script type="text/javascript" src="js/animate.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
.main{
width: 721px;
height: 455px;
margin: 0 auto;
margin-top: 10px;
}
.focus{
position: relative;
width: 100%;
height: 455px;
overflow: hidden;
}
.fl{
float: left;
}
.focus ul{
position: absolute;
top:0;
left: 0;
width: 600%;
}
.focus ul li{
float: left;
}
.arrow-l,
.arrow-r{
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 18px;
z-index: 2;
}
.arrow-r{
right: 0;
}
.circle{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -20px;
list-style: none;
}
.circle li{
float: left;
width: 8px;
height: 8px;
border: 2px solid rgba(255,255,255,0.5);
margin: 0 3px;
border-radius: 50%;
cursor: pointer;
}
.current{
}
</style>
</head>
<body>
<div class="main">
<div class="focus fl">
<a href="javascript:;" class="arrow-l"><img src="img/arrow-prev.png"/></a>
<a href="javascript:;" class="arrow-r"><img src="img/arrow-next.png"/></a>
<ul>
<li>
<a href="#"><img src="img/focus1.jpg"alt=""/></a>
</li>
<li>
<a href="#"><img src="img/focus2.jpg"alt=""/></a>
</li>
<li>
<a href="#"><img src="img/focus3.jpg"alt=""/></a>
</li>
<li>
<a href="#"><img src="img/focus4.jpg"alt=""/></a>
</li>
</ul>
<ol class="circle"></ol>
</div>
</div>
<script type="text/javascript">
var time=3000;//定时器间隔时间（3秒）
window.addEventListener('load', function() {
//1.获取元素
var focus = document.querySelector(".focus");
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
var imgwidth = focus.offsetWidth;
//2.进行鼠标事件的监听
focus.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
//清除定时器
clearInterval(timer);
timer = null;
});
focus.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
//启用定时器
vartimer = setInterval(function(){
arrow_r.click();
},time);
});
//3.动态生成小圆圈
for(var i=0;i<ul.children.length;i++){
var li = document.createElement('li');
//记录当前小圆圈的索引号
li.setAttribute('index',i);
ol.appendChild(li);
//给小圆点添加监听事件
li.addEventListener('click',function(){
//小圆圈的排他思想
for(var j=0;j<ol.children.length;j++){
ol.children[j].className = "";
}
this.className="current";
var index = this.getAttribute('index');
animate(ul,-index*imgwidth);
});
}
//默认显示第一张图片
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//默认选中第一个小圆点
ol.children[0].className = 'current';
var num = 0;//图片下标
var circlr = 0;//小圆点下标
//4.点击右箭头
arrow_r.addEventListener('click',function(){
//当切换到最后一张图时，让num归0
if(num == ul.children.length-1){
//设置左偏移量
ul.style.left = 0;
num = 0;
}
num++;
animate(ul,-num*imgwidth);
circlr++;
if(circlr == ol.children.length){
circlr=0;
}
for(var i=0;i<ol.children.length;i++){
ol.children[i].className = "";
}
ol.children[circlr].className = 'current';
});
//5.点击左箭头
arrow_l.addEventListener('click',function(){
//当切换到第一张图时，让num=最后一张图的下标
if(num == 0){
num = ul.children.length-1;
//设置左偏移量
ul.style.left = -num *imgwidth +'px';
}
num--;
animate(ul,-num*imgwidth);
circlr++;
if(circlr < 0){
circlr=ol.children.length-1;
}
for(var i=0;i<ol.children.length;i++){
ol.children[i].className = "";
}
ol.children[circlr].className = 'current';
});
//6.定时播放
vartimer = setInterval(function(){
arrow_r.click();
},time);
})
</script>
</body>
</html>
以上就是 直播平台搭建，javascript轮播图示例，更多内容欢迎关注之后的文章
浙公网安备 33010602011771号