直播平台搭建，javascript轮播图示例

1、先写一个公共的动画方法，保存在animate.js文件里

function animate(obj, target, callback) {<br>    // console.log(callback);  callback = function() {}  调用的时候 callback()<br> <br>    // 先清除以前的定时器，只保留当前的一个定时器执行<br>    clearInterval(obj.timer);<br>    obj.timer = setInterval(function() {<br>        // 步长值写到定时器的里面<br>        // 把我们步长值改为整数 不要出现小数的问题<br>        // var step = Math.ceil((target - obj.offsetLeft) / 10);<br>        var step = (target - obj.offsetLeft) / 10;<br>        step = step > 0 ? Math.ceil(step) : Math.floor(step);<br>        if (obj.offsetLeft == target) {<br>            // 停止动画 本质是停止定时器<br>            clearInterval(obj.timer);<br>            // 回调函数写到定时器结束里面<br>            // if (callback) {<br>            //     // 调用函数<br>            //     callback();<br>            // }<br>            callback && callback();<br>        }<br>        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10<br>        obj.style.left = obj.offsetLeft + step + 'px';<br> <br>    }, 15);<br>}

2、html+css+js代码：

<!DOCTYPE html><br><html><br><head><br><meta charset="utf-8" /><br><title>javascript轮播图示例</title><br><script type="text/javascript" src="js/animate.js"></script><br><style><br>*{<br>padding: 0;<br>margin: 0;<br>}<br>.main{<br>width: 721px;<br>height: 455px;<br>margin: 0 auto;<br>margin-top: 10px;<br>}<br>.focus{<br>position: relative;<br>width: 100%;<br>height: 455px;<br>overflow: hidden;<br>}<br>.fl{<br>float: left;<br>}<br>.focus ul{<br>position: absolute;<br>top:0;<br>left: 0;<br>width: 600%;<br>}<br>.focus ul li{<br>float: left;<br>}<br>.arrow-l,<br>.arrow-r{<br>display: none;<br>position: absolute;<br>top: 50%;<br>margin-top: -20px;<br>width: 24px;<br>height: 40px;<br>text-align: center;<br>line-height: 50px;<br>color: #fff;<br>font-size: 18px;<br>z-index: 2;<br>}<br>.arrow-r{<br>right: 0;<br>}<br>.circle{<br>position: absolute;<br>bottom: 10px;<br>left: 50%;<br>margin-left: -20px;<br>list-style: none;<br>}<br>.circle li{<br>float: left;<br>width: 8px;<br>height: 8px;<br>border: 2px solid rgba(255,255,255,0.5);<br>margin: 0 3px;<br>border-radius: 50%;<br>cursor: pointer;<br>}<br>.current{<br><br>}<br></style><br></head><br><body><br><div class="main"><br><div class="focus fl"><br><a href="javascript:;" class="arrow-l"><img src="img/arrow-prev.png"/></a><br><a href="javascript:;" class="arrow-r"><img src="img/arrow-next.png"/></a><br><ul><br><li><br><a href="#"><img src="img/focus1.jpg"alt=""/></a><br></li><br><li><br><a href="#"><img src="img/focus2.jpg"alt=""/></a><br></li><br><li><br><a href="#"><img src="img/focus3.jpg"alt=""/></a><br></li><br><li><br><a href="#"><img src="img/focus4.jpg"alt=""/></a><br></li>                <br></ul><br><ol class="circle"></ol><br></div><br></div><br><script type="text/javascript"><br>var time=3000;//定时器间隔时间（3秒）<br>window.addEventListener('load', function() {<br>//1.获取元素<br>var focus = document.querySelector(".focus");<br>var arrow_l = document.querySelector('.arrow-l');<br>var arrow_r = document.querySelector('.arrow-r');<br>var ul = document.querySelector('ul');<br>var ol = document.querySelector('ol');<br>var imgwidth = focus.offsetWidth;<br>//2.进行鼠标事件的监听<br>focus.addEventListener('mouseenter', function() {<br>arrow_l.style.display = 'block';<br>arrow_r.style.display = 'block';<br>//清除定时器<br>clearInterval(timer);<br>timer = null;<br>});<br>focus.addEventListener('mouseleave', function() {<br>arrow_l.style.display = 'none';<br>arrow_r.style.display = 'none';<br>//启用定时器<br>vartimer = setInterval(function(){<br>arrow_r.click();<br>},time);<br>});<br>//3.动态生成小圆圈<br>for(var i=0;i<ul.children.length;i++){<br>var li = document.createElement('li');<br>//记录当前小圆圈的索引号<br>li.setAttribute('index',i);<br>ol.appendChild(li);<br>//给小圆点添加监听事件<br>li.addEventListener('click',function(){<br>//小圆圈的排他思想<br>for(var j=0;j<ol.children.length;j++){<br>ol.children[j].className = "";<br>}<br>this.className="current";<br>var index = this.getAttribute('index');<br>animate(ul,-index*imgwidth);<br>});<br>}<br>//默认显示第一张图片<br>var first = ul.children[0].cloneNode(true);<br>ul.appendChild(first);<br>//默认选中第一个小圆点<br>ol.children[0].className = 'current';<br>var num = 0;//图片下标<br>var circlr = 0;//小圆点下标<br>//4.点击右箭头<br>arrow_r.addEventListener('click',function(){<br>//当切换到最后一张图时，让num归0<br>if(num == ul.children.length-1){<br>//设置左偏移量<br>ul.style.left = 0;<br>num = 0;<br>}<br>num++;<br>animate(ul,-num*imgwidth);<br>circlr++;<br>if(circlr == ol.children.length){<br>circlr=0;<br>}<br>for(var i=0;i<ol.children.length;i++){<br>ol.children[i].className = "";<br>}<br>ol.children[circlr].className = 'current';<br>});<br>//5.点击左箭头<br>arrow_l.addEventListener('click',function(){<br>//当切换到第一张图时，让num=最后一张图的下标<br>if(num == 0){<br>num = ul.children.length-1;<br>//设置左偏移量<br>ul.style.left = -num *imgwidth +'px';<br>}<br>num--;<br>animate(ul,-num*imgwidth);<br>circlr++;<br>if(circlr < 0){<br>circlr=ol.children.length-1;<br>}<br>for(var i=0;i<ol.children.length;i++){<br>ol.children[i].className = "";<br>}<br>ol.children[circlr].className = 'current';<br>});<br>//6.定时播放<br>vartimer = setInterval(function(){<br>arrow_r.click();<br>},time);<br>})<br></script><br></body><br></html>