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实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
js获取form的方法
May 06 Javascript
javascript函数特点实例分析
May 14 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
如何手写一个简易的 Vuex
Oct 10 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
PHP运行模式汇总
2016/11/06 PHP
php实现微信支付之企业付款
2018/05/30 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python 操作excel表格的方法
2020/12/05 Python
python生成word合同的实例方法
2021/01/12 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
成人大专自我鉴定范文
2013/10/19 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android