让图片跳跃起来 javascript图片轮播特效
2016-02-16 00:00
726 查看
图片轮播效果,在现在的网站的首页,差不多是必备的效果显示. 所以我从三个方面来讲解这一效果的简单实现.
图片跳动起来
图片序列控制的实现
前后按钮控制的实现
这篇文章来看图片按照间隔时间进行切换.
我们先把结构代码完成,这个我就不做详细的讲解了.看效果
代码如下:
好的,现在我们来通过JS控制图片的跳转.
首先我们需要找到图片所在的位置,这里我们是通过ul来进行布局的所以首先得找到UL下的LI的数目
接着让图片一张一张的展示,我们使用了视窗的模式,就是遮罩层的模式.#slider是一个视窗,ul是视窗外的景色,而ul得景色是横向排版的
然后就是让外面的景色显示为视窗的大小,也就是让每一张图片作为每一次的视窗景色,这里就是控制图片的大小要与视窗同等大小.
上面讲解的是一个概念,也就是布局的处理,下面我们JS的控制了,要实现图片间隔的显示不同.我们就需要用到JS的setInterval或者setTimeout.这里我们使用setInterval(因为这个用起来方便.)
每跳转一次,我们控制的是UL的position的left,这样就可以让ul下的景色,在每一次都是显示不一样,而这个left是根据视窗的宽度来决定,第一张left当然是-800 * 0 ,第二种就是 -800*1,第三种是-800*2...依次类推.那我们就可以得出下面的代码
JS代码这样看起来就很简单了. 我这里是设置2秒跳转依次,然后跳转的次数大于等于图片的数目后,让其返回到第一张图片.
希望本文所述对大家学习javascript程序设计有所帮助。
js淡入淡出的图片轮播效果代码分享
js支持键盘控制的左右切换立体式图片轮播效果代码分享
js图片轮播特效代码分享
js带点自动图片轮播幻灯片特效代码分享
js带缩略图的图片轮播效果代码分享
基于JavaScript实现仿京东图片轮播效果
js图片轮播手动切换效果
js图片轮播效果实现代码
图解js图片轮播效果
图片跳动起来
图片序列控制的实现
前后按钮控制的实现
这篇文章来看图片按照间隔时间进行切换.
我们先把结构代码完成,这个我就不做详细的讲解了.看效果
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { box-sizing: border-box; } a { text-decoration: none; } ul,ol,li{ list-style: none; margin: 0; padding: 0; } #slider{ width: 800px; height: 300px; overflow: hidden; position: relative; margin: 0 auto; } #slider ul{ width: 2400px; position: relative; } #slider ul:after{ content: " "; width: 0; height: 0; display: block; } #slider ul li{ float: left; width: 800px; height: 300px; overflow: hidden; } #slider ul li img{ width: 100%; } #slider ol{ position: absolute; bottom: 10px; left: 46%; } #slider ol li{ display: inline-block; } #slider ol li a{ display: inline-block; padding:4px 8px; border-radius:15px; background-color: #000; color: #fff; } #slider .prev, #slider .next{ display: inline-block; position: absolute; top: 49%; background-color: #000; opacity: 0.6; color: #fff; padding: 3px; } #slider .prev{ left: 10px; } #slider .next{ right: 10px; } </style> </head> <body> <div id="slider"> <ul> <li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li> <li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li> <li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li> </ul> <ol> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> </ol> <a href="#">上一张</a> <a href="#">下一张</a> </div> </body> </html>
好的,现在我们来通过JS控制图片的跳转.
首先我们需要找到图片所在的位置,这里我们是通过ul来进行布局的所以首先得找到UL下的LI的数目
接着让图片一张一张的展示,我们使用了视窗的模式,就是遮罩层的模式.#slider是一个视窗,ul是视窗外的景色,而ul得景色是横向排版的
然后就是让外面的景色显示为视窗的大小,也就是让每一张图片作为每一次的视窗景色,这里就是控制图片的大小要与视窗同等大小.
上面讲解的是一个概念,也就是布局的处理,下面我们JS的控制了,要实现图片间隔的显示不同.我们就需要用到JS的setInterval或者setTimeout.这里我们使用setInterval(因为这个用起来方便.)
每跳转一次,我们控制的是UL的position的left,这样就可以让ul下的景色,在每一次都是显示不一样,而这个left是根据视窗的宽度来决定,第一张left当然是-800 * 0 ,第二种就是 -800*1,第三种是-800*2...依次类推.那我们就可以得出下面的代码
<script> (function(){ var slider = document.getElementById("slider"); var imgul = slider.getElementsByTagName("ul")[0]; var imglis = imgul.getElementsByTagName("li"); var len = imglis.length; var index = 0; setInterval(function(){ if(index >= len){ index = 0; } imgul.style.left = - (800 * index) + "px"; index++; },2000); })(); </script>
JS代码这样看起来就很简单了. 我这里是设置2秒跳转依次,然后跳转的次数大于等于图片的数目后,让其返回到第一张图片.
希望本文所述对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
js图片自动轮播代码分享(js图片轮播)js淡入淡出的图片轮播效果代码分享
js支持键盘控制的左右切换立体式图片轮播效果代码分享
js图片轮播特效代码分享
js带点自动图片轮播幻灯片特效代码分享
js带缩略图的图片轮播效果代码分享
基于JavaScript实现仿京东图片轮播效果
js图片轮播手动切换效果
js图片轮播效果实现代码
图解js图片轮播效果
相关文章推荐
- Javascript中的Prototype到底是什么
- 三个js循环的关键字示例(for与while)
- js文章快速分享代码
- JSのGoogle Map
- JSP+Servlet中使用cos.jar进行图片上传(文件上传亦然)
- 30行代码实现Javascript中的MVC
- JS中的bind方法与函数柯里化
- JVM统计监测工具
- JavaScript 总结几个提高性能知识点
- javascript面向对象编程方式
- javascript正则表达式验证IP,URL
- HTML静态网页--JavaScript-Window.document对象
- HTML静态网页--JavaScript-DOW操作
- HTML静态网页--JavaScript-语法
- HTML静态网页--JavaScript-简介
- JavaScript 笔记 7 - 字符串对象
- JavaScript的学习
- javascript-页面跳转-(咋个办呢-zgbn)
- JavaScript实现动态加载其他的js文件-(咋个办呢 zgbn)
- 【JSTL】--附加:c:import,c:url;c:param,c:redirect--drp217