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

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

1.图片跳动起来

2.图片序列控制的实现

3.前后按钮控制的实现

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

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

代码如下:

<!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实现图片轮播效果(一)让图片跳动起来的全部内容，希望对大家有所帮助。

赞 (0)

相关推荐

  • JS图片轮播与索引变色功能实例详解

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

  • js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）

    本文实例介绍了js实现图片轮播相册,具有过渡渐变效果,分享给大家供大家参考,具体内容如下 思路很简单,用2个属性保存当前图片和上一张图片,用2个定时器分别控制透明度和当前过渡的图片. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <style> #cnt{width:100%;height:80%;} .ctrl{text-align:center;border:1px solid gray;font-s

  • 原生JS实现匀速图片轮播动画

    原生JS实现匀速图片轮播动画

    JS实现轮播图实现结果图: 需求: 1 根据图片动态添加小圆点 2 目标移动到小圆点轮播图片 3 鼠标离开图片,定时轮播图片:鼠标在图片上时暂停 4  左右两侧可点击轮播图片 一.布局部分 html部分 <div class="w main clearfix"><!--主内容部分开始--> <div class="slider"><!--轮播图部分开始--> <ul class="imgs"

  • 原生JS实现旋转木马式图片轮播插件

    原生JS实现旋转木马式图片轮播插件

    本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果 由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看

  • 基于vue.js实现图片轮播效果

    基于vue.js实现图片轮播效果

    轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg"> <template v-for='sd in shufflingData'> <li v-if='shufflingId==$

  • 用JS实现图片轮播效果代码（一）

    用JS实现图片轮播效果代码（一）

    一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content"> <!-- 总的父

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

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

    图片轮播效果,在各大网站的首页都能看到,比较常见.下面小编给大家分享这一效果的简单实现. 1.图片跳动起来 2.图片序列控制的实现 3.前后按钮控制的实现 这篇文章来看图片按照间隔时间进行切换. 我们先把结构代码完成,这个我就不做详细的讲解了.先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

  • Javascript实现图片轮播效果(二)图片序列节点的控制实现

    Javascript实现图片轮播效果(二)图片序列节点的控制实现

    推荐阅读:Jquery代码实现图片轮播效果(一) 在上篇文章给大家介绍了Javascript实现图片轮播效果(一)让图片跳动起来,这里我们实现图片序列节点的跳转实现.在图片跳转的同时,我们一般需要知道他跳转的是哪个位置,这里就是图片序列节点需要跟图片一同显示.下面我们就直接作分析. 在没讲正文之前先给大家展示效果图: 在HTML,CSS代码结构中我们需要加入一个图片序列是否选中的样式 #slider ol li a.active{ background-color: #ffffff; color

  • javascript实现图片轮播效果

    javascript实现图片轮播效果

    本文实例介绍了javascript实现图片轮播效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0

  • 原生javascript实现图片轮播效果代码

    看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿. [原理简述] html和css跟JQuery实现图片轮播效果里面的一样,略去.主要是几个公共函数,渐显和渐失,用闭包实现.至于主体逻辑部分,非常一般. [程序源码] 贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失 复制代码 代码如下: function id(name) {return document.getElementByI

  • 基于JavaScript实现仿京东图片轮播效果

    js实现仿京东图片轮播效果,当鼠标划在窗口上面停止计时器,鼠标离开窗口,开启计时器,鼠标划在页签上面,停止计时器,手动切换,通过定义计时器封装函数run,封装函数changeOption,实现此效果,代码简单易懂,需要的小伙伴直接复制拷贝转走吧. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<

  • JavaScript实现六种网页图片轮播效果详解

    JavaScript实现六种网页图片轮播效果详解

    目录 1.当鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.动态生成小圆圈 3.点击小圆圈,小圆圈变色 4.点击小圆圈滚动图片 5.点击右侧按钮一次,就让图片滚动一张. 6.点击右侧按钮, 小圆圈跟随变化 7.左侧按钮功能制作 8.自动播放功能 在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?今天,我们就一起来看一下!首先,我们需要准备若干张图片,在这里我准备了五张图片. 功能需求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往左播放

  • 使用JQuery实现图片轮播效果的实例(推荐)

    使用JQuery实现图片轮播效果的实例(推荐)

    [效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数 [代码说明] filter(":visible") :获取所有可见的元素 unbind():从匹配的元素中删除绑定的事件 siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元

  • jQuery实现的图片轮播效果完整示例

    jQuery实现的图片轮播效果完整示例

    本文实例讲述了jQuery实现的图片轮播效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ list-

  • jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

    本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • 图解js图片轮播效果

    图解js图片轮播效果

    本文实例讲解了js图片轮播效果的实现原理,分享给大家供大家参考,具体内容如下 两种图片轮播实现方案,先来看效果对比: 方案一: 原理:将图片摆成一行,从左到右依次滚动进入视野,当滚动到最后一张时,从右到左滚动回到第一张.这么做的缺点是,滚动到最后一张时,会有一个反向,导致整个滚动过程不连贯. 方案二: 实现原理示意图 原理: 1.轮播过程中,有几个关键元素:一个舞台(绿框).候场区(黑框).排队区(红框)和两个数组A和B.A用来保存正在展示和下一个将要展示的图片,如:图片1.2:B用来保存排队等

随机推荐