JavaScript实现简单图片轮播效果
程序员文章站
2022-04-29 08:04:43
本文实例为大家分享了js实现简单图片轮播的具体代码,最终实现效果图
代码块
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。...
本文实例为大家分享了js实现简单图片轮播的具体代码,最终实现效果图
代码块
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } img { vertical-align: top } .box { width: 490px; height: 170px; margin: 100px auto; padding: 5px; border: 1px solid #ccc; } .inner { width: 490px; height: 170px; background-color: pink; overflow: hidden; position: relative; } .inner ul { width: 1000%; position: absolute; top: 0; left: 0; } .inner li { float: left; } .square { position: absolute; right: 10px; bottom: 10px; } .square span { display: inline-block; width: 16px; height: 16px; background-color: #fff; text-align: center; line-height: 16px; cursor: pointer; } .square span.current { background-color: orangered; color: #fff; } </style> </head> <body> <div class="box" id="box"> <div class="inner"> <ul> <li><a href="#"><img src="images/01.jpg" /></a></li> <li><a href="#"><img src="images/02.jpg" /></a></li> <li><a href="#"><img src="images/03.jpg" /></a></li> <li><a href="#"><img src="images/04.jpg" /></a></li> <li><a href="#"><img src="images/05.jpg" /></a></li> </ul> <div class="square"> <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> </div> <script type="text/javascript"> //鼠标经过按钮 按钮排他 var box = document.getelementbyid("box"); var inner = box.children[0]; //获取box下的第一个元素,也就是inner var ul = inner.children[0]; //获取inner下的ul var squarelist = inner.children[1]; //获取inner下的第二个元素 var squares = squarelist.children; //获取所有的按钮 var imgwidth = inner.offsetwidth; // alert(imgwidth); //给每个按钮注册鼠标经过事件 for(var i=0; i<squares.length; i++){ squares[i].index = i; //把索引保存在自定义属性中 squares[i].onmouseover = function(){ //鼠标经过事件 //排他 干掉所有人 for(var j=0; j<squares.length; j++){ squares[j].classname = ""; } //留下我自己 this.classname = "current"; //以动画的方式把ul移动到指定的位置 //目标 和当前按钮索引有关,和图片宽度有关 而且是负数 var target = -this.index * imgwidth; //获取到索引 animate(ul,target); } } function animate(obj, target) { clearinterval(obj.timer); obj.timer = setinterval(function () { var step = 20; var 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。