Javascript实现图片轮播效果(一)让图片跳动起来


Posted in Javascript onFebruary 17, 2016

图片轮播效果,在各大网站的首页都能看到,比较常见。下面小编给大家分享这一效果的简单实现。

1.图片跳动起来

2.图片序列控制的实现

3.前后按钮控制的实现

这篇文章来看图片按照间隔时间进行切换.

我们先把结构代码完成,这个我就不做详细的讲解了.先给大家展示下效果图:

Javascript实现图片轮播效果(一)让图片跳动起来

代码如下:

<!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实现图片轮播效果(一)让图片跳动起来 

以上内容是小编给大家介绍Javascript实现图片轮播效果(一)让图片跳动起来的全部内容,希望对大家有所帮助。

Javascript 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
基于javascript简单实现对身份证校验
Jan 25 #Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 #Javascript
Bootstrap布局组件应用实例讲解
Feb 17 #Javascript
深入php面向对象、模式与实践
Feb 16 #Javascript
三个js循环的关键字示例(for与while)
Feb 16 #Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 #Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 #Javascript
You might like
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
python生成任意频率正弦波方式
2020/02/25 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
python 绘制场景热力图的示例
2020/09/23 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
自荐信范文
2013/12/10 职场文书
党课培训心得体会
2014/09/02 职场文书
毕业赠语大全
2015/06/23 职场文书