成品直播源码，轮播图无缝切换以及自动悬停

成品直播源码，轮播图无缝切换以及自动悬停

一、轮播图需要实现左右无缝切换

 

轮播图的动态切换

利用右外边距或左外边距的加减来操作整个放有图片div的移动，同时利用setTimeout()函数和计时器实现自动切换，从而达到图片无缝切换的效果

//得到图片的集合

 

1

var imgs = document.getElementById('img_list').getElementsByTagName('li');<br>//得到小圆点的集合<br>var icons = document.getElementById('icon_list').getElementsByTagName('li');<br>//初始左外边距默认为0px<br>var Left = 0;<br>//定义计时器<br>var timer;<br>run();<br>function run() {<br>//图片切换到最后时，重新归零。<br>if (Left <= -5120) {<br>img_list.style.marginLeft = "0px";<br>Left = 0;<br>}<br>//用n表示图片切换和停留的时间，如果刚好显示，停2000，否则以10的速度切换（Left持续-10，直到再次刚好显示图片）<br>var n = (Left % 1280 == 0 ? 2000 : 10);<br>changeimg();<br>m = Math.floor(-Left / 1280);//切换小圆点样式的方法，此处暂且不提<br>changeicon(m);//切换小圆点样式的方法，此处暂且不提<br>Left -= 10;<br>//重复执行run方法。实现一直轮播。<br>timer = setTimeout(run, n);<br>}<br>function changeimg() {<br>//切换图片的方法、<br>img_list.style.marginLeft = Left + "px";<br>}

​

二、需要实现跳转（放在圆点显示对应图片）

 

为小圆点添加监听事件，当鼠标放在圆点上时，调用clearTimeout()方法停止轮播，调整计时器参数到固定值，使左右边距加减的滑动效果转为直接跳转到对应图片的效果，并在鼠标移出时重新启动轮播setTimeout()

// 变量作用域两种：全局变量、局部变量。js中函数内部可以读取全局变量，函数外部不能读取函数内部的局部变量。

 

1

<br>// js链式作用域：子对象会一级一级向上寻找所有父对象的变量，反之不行。<br>// f2可以读取f1中的变量，只要把f2作为返回值，就可以在f1外读取f1内部变量<br>for (var i = 0; i < imgs.length; i++) {<br>//根据第几个图标片来判断停止。正常来说，外部i访问不到下面函数的值，用了闭包后就能够读取了<br>//闭包作用<br>// 1、读取函数内部的变量<br>// 2、让这些变量的值始终保持在内存中。不会再f1调用后被自动清除。<br>// 3、方便调用上下文的局部变量。利于代码封装。<br>// 原因：f1是f2的父函数，f2被赋给了一个全局变量，f2始终存在内存中，f2的存在依赖f1，因此f1也始终存在内存中，不会在调用结束后，被垃圾回收机制回收。<br>// 所以此处的i的值实际上为内部函数的i的值<br>//闭包()(i)<br>(function(i) {<br>imgs[i].onmousemove = function() {<br>clearTimeout(timer);//停止轮播<br>Left = -i * 1280;//使距离为完全显示图片的距离（以防在切换时放上去卡两张图片中间）<br>changeimg();//使用更改的Left去切换图片<br>changeicon(i);//切换对应图标<br>}<br>imgs[i].onmouseout = function() {<br>run();<br>}<br>})(i);<br>}

 

三、当前图片的小圆点样式需要突出

 

在图片遍历时为调整小圆点样式的function()传进去一个参数，通过Math.floor()函数计算出当前图片是第几张，从而为对应的圆点更改CSS样式。

 

1

function run() {<br>//图片切换到最后时，重新归零。<br>if (Left <= -5120) {<br>img_list.style.marginLeft = "0px";<br>Left = 0;<br>}<br>//用n表示图片切换和停留的时间，如果刚好显示，停2000，否则以10的速度切换（Left持续-10，直到再次刚好显示图片）<br>var n = (Left % 1280 == 0 ? 2000 : 10);<br>changeimg();<br>m = Math.floor(-Left / 1280);//通过计算得出最接近的整数（1、2、3、4）<br>changeicon(m);//切换对应的小圆点的样式<br>Left -= 10;<br>//重复执行run方法。实现一直轮播。<br>timer = setTimeout(run, n);<br>}<br>function changeicon(m) {<br>//切换图标变色的方法<br>for (var i = 0; i < icons.length; i++) {<br>//先全部取消颜色<br>icons[i].style.backgroundColor = "";<br>}<br>//再根据m的值判断第几个图标变红。<br>icons[m].style.backgroundColor = "red";<br>}

 

四、在切换图片时鼠标放在图片上，取消轮播效果，切换到对应图片。

为图片添加监听事件，当鼠标放在图片上时，调用clearTimeout()的函数停止轮播。通过遍历得到当前图片的参数后，计算出合适的边距，调整函数参数，从而切换到对应图片。

1

<br>for (var i = 0; i < imgs.length; i++) {<br>(function(i) {<br>imgs[i].onmousemove = function() {<br>clearTimeout(timer);//停止轮播<br>Left = -i * 1280;//使距离为完全显示图片的距离（以防在切换时放上去卡两张图片中间）<br>changeimg();//使用更改的Left去切换图片<br>}<br>})(i);<br>}<br>function changeimg() {<br>//切换图片的方法、<br>img_list.style.marginLeft = Left + "px";<br>}

以上就是成品直播源码，轮播图无缝切换以及自动悬停， 更多内容欢迎关注之后的文章