最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大。
万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的。现在记录一下今天复习的原生js无缝轮播吧。
先上一张自拍镇楼,哈哈哈
首先先说一下思路吧,首先任意张图片以ul的形式保存显示,上代码吧
<div id="wrap"> <ul id="ul"> <li> <img src="/UploadFiles/2021-04-02/u=1135520735,2369294998&fm=200&gp=0.jpg">图片轮播的话我是让整个ul移动显示,而不是更改li的margin,上css代码,因为一张图片设置是80px;所以容器的width就是400了。
#wrap{ width: 400px; height: 80px; overflow: hidden; margin-left: 500px; margin-top: 300px; position: relative; } #ul{ position: absolute; left: 0; top: 0; width: 400px; font-size: 0; margin: 0; padding: 0; }然后js代码就很简单了,直接设置一个定时器,让ul缓慢的右移或者左移就可以了。但是会有一个问题,我们等下再讨论,先附上代码
window.onload = function(){ var odiv = document.getElementById('wrap'); var oul = document.getElementById('ul'); setInterval(function(){ oul.style.left = oul.offsetLeft + 5 +'px'; },30)但是图片往右走了就回不了头了,上面的代码只是让图片一直往左移动,那怎么实现当最后一张图片移动到左边缘时第一张图片重新显示,其实很简单
比如图片是1、2、3、4这么显示,那么我们多一份图片不就可以了,也就是说1、2、3、4、1、2、3、4,然后当第2组图片显示到4的时候,我们将ul重新拉回来
那么代码就可以这么写了
var odiv = document.getElementById('wrap'); var oul = document.getElementById('ul'); var oli = oul.getElementsByTagName('li'); oul.innerHTML = oul.innerHTML + oul.innerHTML;//拼接li,因为图片可能是任意张 oul.style.width = oli[1].offsetWidth * oli.length + 'px';//ul的宽度等于所有图片宽度的总和 setInterval(function(){ if (oul.offsetLeft < -oul.offsetWidth/2) { oul.style.left = 0;//如果ul已经显示完了一组,也就是宽度的一半,那么就把他拉回来重新轮播 }else{ oul.style.left = oul.offsetLeft - 2 +'px'; } },30);这样就完成了,可以复制代码在浏览器查看效果。
总结
以上所述是小编给大家介绍的原生JS实现简单的无缝自动轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 群星《十二女声Ⅲ》[WAV/CUE/分轨][626.4MB]
- 陈百强.1993-离不开...纪念歌集2CD【华纳】【WAV+CUE】
- 于台烟.2003-爱自己【乾坤唱片】【WAV+CUE】
- 群星.2024-我们永远是我们电影原声带【乐禾发文化】【FLAC分轨】
- 【中国民乐】张维良《秋江夜泊》2004[FLAC+CUE]
- 明达年度发烧碟MasterSuperiorAudiophile2011[DSF]
- 明达年度发烧碟MasterSuperiorAudiophile2017[DSF]
- 翁立友.2008-恨孤单【大旗】【WAV+CUE】
- 群星.2009-Magic.Cover日粤精华3CD【环球】【WAV+CUE】
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]