使用原生的javascript来实现轮播图
程序员文章站
2023-11-27 22:31:40
下面看下js轮播图的实现代码,具体代码如下所示:
下面看下js轮播图的实现代码,具体代码如下所示:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 200px; overflow: hidden; position: relative; } .screen li { width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0; top: 0px; width: 3000px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current { background: yellow; } #arr { display: none; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style> </head> <body> <div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/1.jpg" width="500" height="200"/></li> <li><img src="images/2.jpg" width="500" height="200"/></li> <li><img src="images/3.jpg" width="500" height="200"/></li> <li><img src="images/4.jpg" width="500" height="200"/></li> <li><img src="images/5.jpg" width="500" height="200"/></li> </ul> <ol> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> <script> function $(element) { return document.getelementbyid(element); } var box = $("box"); var screen = box.children[0]; var ul = screen.children[0]; var ullis = ul.children; var ol = screen.children[1]; var arr = $("arr"); var left = $("left"); var right = $("right"); //动态创建小图标 for (var i = 0; i < ullis.length; i++) { var li = document.createelement("li"); li.innerhtml = i + 1; ol.appendchild(li); } //设置这些个小图标 var ollis = ol.children; var imgwidth = screen.offsetwidth; for (var j = 0; j < ollis.length; j++) { ollis[j].index = j; ollis[j].onmouseover = function () { //排他思想 for (var i = 0; i < ollis.length; i++) { ollis[i].classname = ""; } this.classname = "current"; var target = -imgwidth * this.index; cutton(ul, target, 20); //为了让点击事件和小面的小图标能够一一对应,设置他们的索引值相同 pic = square = this.index; } } //给小图标设置一个初始样式 ol.children[0].classname = "current"; //给ul追加一张图 ul.appendchild(ul.children[0].clonenode(true)); //设置箭头的显示与隐藏 box.onmouseover = function () { arr.style.display = "block"; //鼠标放上去的时候,不再自动滚动 clearinterval(timer); } box.onmouseout = function () { arr.style.display = "none"; //鼠标离开的时候,继续自动滚动 timer = setinterval(playnext, 1000); } //设置点击左右小箭头的事件且要求小图标要跟着变化 //1.设置点击右侧箭头 var pic = 0;//记录当前为第几项用 var square = 0;//记录小图标的索引值 /* right.onclick = function () {//存在的问题是当移动到最后一张的时候,无法跳转到第一张 pic++; var target = -pic * imgwidth; cutton(ul, target, 20); }*/ //方法改进 /*right.onclick = function () { //先对pic做一个判断,当pic的值为5的时候,实现一个跳转 if (pic == ullis.length - 1) { ul.style.left = 0; pic = 0; } pic++; var target = -pic * imgwidth; cutton(ul, target, 20); if (square == ollis.length - 1) { square = -1;//下面会加一,就变成了0 } square++; //排他思想 for (var i = 0; i < ollis.length; i++) { ollis[i].classname = ""; } ollis[square].classname = "current"; }*/ //使用封装函数 right.onclick = function () { playnext(); } //2.设置点击左侧箭头 left.onclick = function () {//要判断一下当pic为零时的情况 if (pic == 0) { ul.style.left = -imgwidth * (ullis.length - 1) + "px";//要记得加单位 pic = ullis.length - 1;//给pic重新赋一个值 } pic--; var target = -pic * imgwidth; cutton(ul, target, 20); //设置小图标样式 if (square == 0) { square = ollis.length; } square--; for (var i = 0; i < ollis.length; i++) { ollis[i].classname = ""; } ollis[square].classname = "current"; } //设置自动滚动 //1.封装点击右侧小箭头事件 function playnext() { //先对pic做一个判断,当pic的值为5的时候,实现一个跳转 if (pic == ullis.length - 1) { ul.style.left = 0; pic = 0; } pic++; var target = -pic * imgwidth; cutton(ul, target, 20); if (square == ollis.length - 1) { square = -1;//下面会加一,就变成了0 } square++; //排他思想 for (var i = 0; i < ollis.length; i++) { ollis[i].classname = ""; } ollis[square].classname = "current"; } //2.调用这个封装的函数,并且设置一个间歇性计时器 var timer = null; timer = setinterval(playnext, 1000); //封装函数 function cutton(obj, target, stp) { clearinterval(obj.timer); obj.timer = setinterval(function () { var step = stp; step = obj.offsetleft > target ? -step : step; if (math.abs(obj.offsetleft - target) >= math.abs(step)) { obj.style.left = obj.offsetleft + step + "px"; } else { obj.style.left = target + "px"; clearinterval(obj.timer); } }, 15) } </script> </body> </html>
补充:原生javascript实现banner图自动轮播切换
一般在做banner轮播图的时候都是用jquery,因为代码少,方便,不需要花费很长的时间去获取某个元素作为变量,然后再进行操作,只要一个$就搞定了。但是今天我用原生的javascript做了一下这个轮播效果,感觉还行,以下是部分js源代码,仅供参考!文章底部查看效果演示。
1、鼠标离开banner图,每隔2s切换一次;
2、鼠标滑过下方的小按钮,可以切换图片;
3、鼠标点击左右按钮,可以切换图片。
var opic,oli,anniu,ali,alength,num,timer,og,_index,ospan; window.onload = function(){ opic = document.getelementsbyclassname("pic")[0]; oli = opic.getelementsbytagname("li"); anniu = document.getelementsbyclassname("anniu")[0]; ali = anniu.getelementsbytagname("li"); alength = ali.length; num = 0; og = document.getelementsbyclassname("g")[0]; ospan = og.getelementsbytagname("span"); oleft = ospan[0]; oright = ospan[1]; start(); og.onmouseover = end; og.onmouseout = start; for(var j=0; j<alength; j++){ ali[j].index = j; ali[j].onmouseover = change; } oright.onclick = time; oleft.onclick = times; } //自动轮播开始或结束 function start(){ timer = setinterval(time,2000); hide(); } function end(){ clearinterval(timer); show(); } //图片切换++ function time(){ for(var i=0; i<alength; i++){ oli[i].style.display = "none"; ali[i].classname = ""; } num++; num = num % 4; oli[num].style.display = "block"; ali[num].classname = "on"; } //图片切换-- function times(){ for(var i=0; i<alength; i++){ oli[i].style.display = "none"; ali[i].classname = ""; } num--; num = (num+4)%4; oli[num].style.display = "block"; ali[num].classname = "on"; } //鼠标滑过按钮,图片轮播 function change(){ _index = this.index; for(var k=0; k<alength; k++){ ali[k].classname = ""; oli[k].style.display = "none"; } ali[_index].classname = "on"; oli[_index].style.display = "block"; } //左右按钮显示或隐藏 function show(){ ospan[0].style.display = "block"; ospan[1].style.display = "block"; } function hide(){ ospan[0].style.display = "none"; ospan[1].style.display = "none"; }
以上所述是小编给大家介绍的使用原生的javascript来实现轮播图,希望对大家有所帮助