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 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 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
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
在Python的Django框架中创建语言文件
2015/07/27 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python日志syslog使用原理详解
2020/02/18 Python
python与pycharm有何区别
2020/07/01 Python
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
国外软件测试工程师面试题
2016/12/09 面试题
职业生涯规划书结束语
2014/04/15 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
教师学期末个人总结
2015/02/13 职场文书
责任书范本大全
2015/05/11 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
推普标语口号大全
2015/12/26 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android