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 相关文章推荐
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
完善的jquery处理机制
Feb 21 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
基于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编码规范-php coding standard
2007/03/16 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
js图片处理示例代码
2014/05/12 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
JS中的BOM应用
2018/02/02 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
python Socket之客户端和服务端握手详解
2017/09/18 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python设置环境变量的原因和方法
2019/06/24 Python
Django继承自带user表并重写的例子
2019/11/18 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
Python关于反射的实例代码分享
2020/02/20 Python
护士自我评价范文
2014/01/25 职场文书
大学生就业意向书范文
2014/04/01 职场文书
和解协议书
2014/04/16 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
爱心捐书倡议书
2015/04/27 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB