本文实例讲述了原生JavaScript实现的淘宝轮播图效果。分享给大家供大家参考,具体如下:
轮播图是我们学习原生js的必经之路
它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固,
话不多说,直接上图
HTML代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>淘宝轮播图</title> <link rel="stylesheet" href="css/initialize.css" rel="external nofollow" /> <link rel="stylesheet" href="css/tblunbotu.css" rel="external nofollow" /> </head> <body> <div id="container" class="clearFix"> <div id="list" class="clearFix" style="left: -520px"> <img src="/UploadFiles/2021-04-02/5.jpg">CSS样式如下:
/* 第一步:设置外部框的样式 第二步: 设置图片框的样式 第三步: 设置箭头的样式 第四步: 设置小圆点的样式 */ #container { margin: 50px auto; position: relative; width: 520px; height: 280px; overflow: hidden; } #list { position: absolute; z-index: 1; width: 3640px; } #list img { float: left; width: 520px; height: 280px; } #buttons { height: 10px; width: 100px; position: absolute; left: 0;/*设置水平垂直居中*/ right: 0;/*设置水平垂直居中*/ margin: 0 auto;/*设置水平垂直居中*/ bottom: 20px; z-index: 2; } #buttons span { float: left; margin-right: 5px; width: 10px; height: 10px; border: 1px solid #cccccc; border-radius: 50%; background: #333; cursor: pointer; } #buttons .on { background: orangered; } .arrow { width: 40px; height: 40px; display: none; position: absolute; top: 0; /*设置水平垂直居中*/ bottom: 0; /*设置水平垂直居中*/ margin: auto 0; /*设置水平垂直居中*/ font-size: 36px; font-weight: bold; line-height: 39px; text-align: center; color: #fff; background-color: RGBA(0, 0, 0, .3); cursor: pointer; z-index: 2; } .arrow:hover{ background-color: RGBA(0, 0, 0, .7); } #container:hover .arrow { display: block; } #prev{ left: 10px; } #next{ right: 10px; }javascript代码如下
/** * Created by zhm on 17.1.15. */ /* *知识点: * this使用 * DOM事件 * 定时器 * * 思路: * (1)设置它左右移动 * 问题:传入数字为NAN"container"); var list = document.getElementById("list"); var prev = document.getElementById("prev"); var next = document.getElementById("next"); var buttons = document.getElementById('buttons').getElementsByTagName('span'); var timer = null; var timer2 = null; var flag = true; var index =0; //2.设置函数 function moveImg(dis) { var time = 400;//运动的总时间 var eachTime = 10;//每次小移动的时间 var eachDis = dis/(time/eachTime);//每次小移动的距离 var newWeizhi = parseInt(list.style.left) + dis;//新位置 flag = false; function eachMove(){ if(dis > 0 && parseInt(list.style.left)< newWeizhi || dis < 0 && parseInt(list.style.left)>newWeizhi){ list.style.left = parseInt(list.style.left) + eachDis + 'px'; }else { flag = true; clearInterval(timer); list.style.left = newWeizhi + 'px'; //无限滚动判断 if (newWeizhi == 0) { list.style.left = -2600 + 'px'; } if (newWeizhi == -3120) { list.style.left = -520 + 'px'; } } } timer = setInterval(eachMove, 10); } //3.设置点击切换图片 next.onclick = function () { if(!flag) return; moveImg(-520); //绑定箭头和小圆点 if (index == 4) { index = 0; } else { index++; } buttonsShow(); }; prev.onclick = function () { if(!flag) return; moveImg(520); //绑定箭头和小圆点 if (index == 0) { index = 4; } else { index--; } buttonsShow(); }; //4.设置小圆点的绑定 function buttonsShow() { //将之前的小圆点的样式清除 for (var i = 0; i < buttons.length; i++) { if (buttons[i].className == "on") { buttons[i].className = ""; break; } } buttons[index].className = "on"; } for(var i = 0 ;i<buttons.length;i++){ buttons[i].value = i; //使用自执行函数解决i的赋值问题 (function(){ buttons[i].onclick = function(){ if(this.value == index) return; var offset = (this.value - index)* -520; moveImg(offset); index = this.value; buttonsShow(); } })(); } //5.设置自动轮播 timer2 = setInterval(next.onclick,1500); container.onmouseover = function(){ clearInterval(timer2); }; container.onmouseout = function(){ timer2 = setInterval(next.onclick,1000); };源码下载:完整实例代码点击此处本站下载。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7