原生JS实现图片跑马灯特效

今天给大家分享一个用原生JS实现的图片跑马灯特效，效果如下：

实现的代码如下，欢迎大家复制粘贴。

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>原生JS实现图片跑马灯特效</title><style type="text/css">* {padding: 0;margin: 0;}li {list-style: none;}img {border: none;}body {background: #eee;}.box {width: 120px;height: 400px;margin: 0 auto;background: #fff;border: 1px solid #ccc;position: relative;top: 50px;}.box .up {width: 27px;height: 27px;line-height: 27px;position: absolute;top: 4px;left: 50%;margin-left: -16px;cursor: pointer;filter: alpha(opacity=60);opacity: 0.6;text-align: center;transform: rotate(270deg);}.box .down {width: 27px;height: 27px;line-height: 27px;position: absolute;bottom: 4px;left: 50%;margin-left: -16px;cursor: pointer;filter: alpha(opacity=60);opacity: 0.6;text-align: center;transform: rotate(270deg);}.box .wrap {width: 120px;height: 330px;position: absolute;top: 35px;left: 0;overflow: hidden;}.box ul {width: 120px;position: absolute;top: 0;left: 0;}.box li {width: 120px;height: 110px;float: left;}.box a {display: block;width: 100px;height: 100px;border: 1px solid red;margin: 0 auto;position: relative;top: 4px;}.box a:hover {border: 1px solid #333;}.box img {width: 100%;height:100%;}.box .active {border: 10px solid #000;}</style></head><body><div class="box" id="box"><!-- 向上箭头 --><div class="up">》</div><!-- 图片容器 --><div class="wrap"><ul><li><a><img src="data:images/1.jpg" /></a></li><li><a><img src="data:images/2.jpg" /></a></li><li><a><img src="data:images/3.jpg" /></a></li><li><a><img src="data:images/4.jpg" /></a></li></ul></div><!-- 向下箭头 --><div class="down">《</div></div><script type="text/javascript">window.onload = function () {// 获取操作对象容器var box = document.getElementById("box");// 获取容器一级子元素var children = box.getElementsByTagName('div');// 获取向上箭头var up = getClass('up');// 获取图片容器var wrap = getClass('wrap');// 获取图片列表var ul = wrap.getElementsByTagName('ul')[0];// 获取图片各项var list = ul.getElementsByTagName('li');// 获取向下箭头var down = getClass('down');var i = 0;var num = 5;var time = 30;var toggle = -1;var timer = null;ul.innerHTML += ul.innerHTML;// 点击向上时up.onclick = function () {toggle = -1;autoPlay(toggle);};// 点击向下时down.onclick = function () {toggle = 1;autoPlay(toggle);};// 向上与向下箭头鼠标移入时up.onmouseover = down.onmouseover = function () {this.style.filter = 'alpha(opacity:100)';this.style.opacity = 1;};// 向上与向下箭头鼠标移出时up.onmouseout = down.onmouseout = function () {this.style.filter = 'alpha(opacity:60)';this.style.opacity = 0.6;};// 自动轮播autoPlay(toggle);// 自动轮播方法function autoPlay(toggle) {// 清除原有定时器if (timer) {clearInterval(timer);};// 重新开启定时器timer = setInterval(function () {// 增量num += 2 * toggle;// 向下走if (num > 0) {num = -list.length * list[0].offsetHeight / 2;};// 向上走if (Math.abs(num) > list.length * list[0].offsetHeight / 2) {num = 0;};ul.style.top = num + 'px';}, time);};// 获取拥有当前样式的元素function getClass(name) {for (i = 0; i < children.length; i++) {if (children[i].className == name) {return children[i];}}};};</script></body></html>

原生JS实现图片跑马灯特效相关推荐

原生js的图片.文字.小框的跑马灯效果及弹幕效果
笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果.于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增 ...
js在html中加文字走马灯特效,jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
js html css 图片跑马灯效果（轮播）
js html css 图片跑马灯效果(轮播) js html css 实现图片跑马灯效果(轮播),效果图如下: 代码: html: <div id="marquee-box" ...
原生JS实现VR看图特效
现在很多看车或是看房的网站都有VR看图的效果,看起来比较高端,类似于下面这样的效果: 那么这种效果是如何实现的呢?其实原理很简单,就是连续拍摄了多个角度的图片, 然后根据用户的操作加载不同角度的图片. ...
jquery 立体走马灯_jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
原生JS实现图片滚动
2019独角兽企业重金招聘Python工程师标准>>> 原生JS实现图片滚动一.原理黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设 ...
十分钟教会你原生JS压缩图片，极其精简版
十分钟教会你原生JS压缩图片,极其精简版原文链接:https://blog.csdn.net/yasha97/article/details/83629510 (一)实现思路先通过input标签获 ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...

原生JS实现图片跑马灯特效

原生JS实现图片跑马灯特效相关推荐

最新文章

热门文章