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

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

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

 

轮播图的动态切换

利用右外边距或左外边距的加减来操作整个放有图片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>}

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

 

posted @   云豹科技-苏凌霄  阅读(211)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示