原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
程序员文章站
2022-06-29 19:46:08
本文实例讲述了原生javascript实现的淘宝轮播图效果。分享给大家供大家参考,具体如下:
轮播图是我们学习原生js的必经之路
它包含很多基本知识的运用,像this的...
本文实例讲述了原生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="img/5.jpg" alt=""/> <img src="img/1.jpg" alt=""/> <img src="img/2.jpg" alt=""/> <img src="img/3.jpg" alt=""/> <img src="img/4.jpg" alt=""/> <img src="img/5.jpg" alt=""/> <img src="img/1.jpg" alt=""/> </div> <div id="buttons" class="clearfix"> <span class="on"></span> <span></span> <span></span> <span></span> <span></span> </div> <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a> </div> <script type="text/javascript" src="js/tblunbotu.js"></script> </body> </html>
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?? * 解决:在页面中增加属性style:left:0 * (2)平滑移动(移动时间固定,每次移动的距离不一样) * 问题:连续点击出现晃动?---设置标志位 * 出现空白页??--- 第一张图片前加上最后一张,最后一张图片前加上第一张 * 在类list的标签中增加属性style:left:-520px; * 设置无限滚动判断 * * (3)设置小圆点 * 首先将所有的类置为空,当前类置为on * 绑定小圆点和图片 * 绑定小圆点和左右箭头 * 设置定时器,鼠标划上去停止,移开自动轮播 * * */ //1.获取元素 var container = document.getelementbyid("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程序设计有所帮助。
上一篇: 高效的美白方法 变身白富美