本文主要介绍分别使用CSS3、JS实现图片简单无缝轮播功效;

一、使用CSS3实现:利用animation属性

(实现一张一张的轮播,肉眼只看见一张图片)

HTML部分比较简单,两个div下包着几个img标签;为了实现无缝轮播,注意第一张图片要与最后一张图片相同;

<div class="out">
<div class="imgs">
<img src="img/beatuy.jpg"/>
<img src="img/child.jpg"/>
<img src="img/girl.jpg"/>
<img src="img/milk.jpg"/>
<img src="img/cup.jpg"/>
<img src="img/dog.jpg"/>
<img src="img/beatuy.jpg"/>
</div>
</div>

最外层div设置ovflow:hidden;position: relative;既然最外层div设置了position: relative;所以内层div需要设置position: absolute;使得其运动相对父元素而言;

CSS代码如下:

 .out{
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
}
.imgs{
width: 1400px;
height: 100px;
position: absolute;
animation: ppt 10s linear infinite;
} img{
float: left;
width: 200px;
height: 100px;
}
@keyframes ppt{
%{left:0px}
%{left:-250px}
%{left:-500px}
%{left:-750px}
%{left:-1000px}
%{left:-1200px}
}

这样图片就可以轮播了,但是鼠标放上去的时候图片还是一直在轮播的,如果我们想让鼠标放在图片上时,轮播停止,或者出现一些信息,我们需要加上:hover;设置动画的状态,代码很简洁:如下

.out:hover .imgs{ animation-play-state:paused }

这样我们的轮播效果就出来啦;

效果图什么的也懒得贴了;

二、使用JS实现:利用定时器setInterval

(多张图片轮播,肉眼可以看到多张图片)

同样HTML部分比较简单,需要设置外层DIV ovflow:hidden;之所以每个div既有class,也有id,是因为样式我是通过class控制的,DOM是通过ID获取的

 <div class="out" id="out">
<div class="main" id='main'>
<div class="pic" id="pic">
<img src="img/0.jpg"/>
<img src="img/6.jpg"/>
<img src="img/hehua2.2.png"/>
<img src="img/tupian1.png"/>
</div>
<div class="copyPic" id="copyPic"> </div>
</div>

可以看到class="copyPic" 的DIV为空的,没有内容,不急,在JS部分会为他赋上内容,其内容与class="pic"的一样;当然我们也可以直接在HTML中为其添加内容;现在为其加上一点CSS样式吧

 .out{
width: 820px;
overflow: hidden;
}
.main{
width: 1650px;
height: 100px;
}
img{
width: 200px;
height: 100px;
border:;
}
.pic,.copyPic{
float: left;  
}

这样,我们的基本样式就完成了,下面就开始实现轮播效果吧:

首先,为了代码方便,先封装一个简单函数

function $(str){ return document.getElementById(str) }

然后为class="copyPic" 的DIV加上内容:

$('copyPic').innerHTML=$('pic').innerHTML;

好啦,开始写轮播函数:

 function move(){
if ($('out').scrollLeft-$('copyPic').offsetWidth>=0) {
$('out').scrollLeft-=$('out').offsetWidth;
} else{
$('out').scrollLeft++;
}
}
    var t=setInterval(move,10);

这样我们的图片就可以轮播啦,同样的如果希望鼠标放上去后轮播停止,还需要加上几句代码,使用鼠标事件,清除定时器

 $('out').onmousemove=function(){
clearInterval(t);
}
$('out').onmouseout=function(){
t=setInterval(move,10);
}

OK,这样我们使用JS实现图片轮播的效果也就完成了!

分别用css3、JS实现图片简单的无缝轮播功效的更多相关文章

  1. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  2. 前端(十七)—— jQuery基础:jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图

    jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...

  3. js实现图片无缝轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  5. 一步一步拆解一个简单的iOS轮播图(三图)

    导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...

  6. 原生js实现无缝轮播

    原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...

  7. jQuery图片无缝轮播

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  9. 无缝轮播的案例 及css3无缝轮播案例

    无缝轮播的案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

随机推荐

  1. Jsonql——给RESTful API插上一对翅膀

    RESTful API是目前比较成熟的一套互联网应用程序的API设计理论,规范了服务端资源的定义及访问.我们团队服务端就采用了RESTful. 可是在现实开发过程中,还是有些问题. 客户端在获取资源的 ...

  2. JQuery和原生JS跨域加载JSON数据或HTML。

    前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...

  3. MFC画笔作用域的问题

    今天发现了程序中的一个BUG.功能是在鼠标经过图形时,对图形进行加粗重绘.默认使用白色画刷.为防止白色背景下看不清,在白色背景下改用黑色画刷.代码如下 CPen* pOldPen;if (pDC-&g ...

  4. 一个基于php+mysql的外卖订餐网站(带源码)

    订饭组 一个基于php+mysql的外卖订餐网站,包括前端和后台.源码地址 源码演示地址:http://dingfanzu.com 商家后台系统:http://dingfanzu.com/admin ...

  5. 微信小程序已经开放个人开发者申请了,还不快上车?

    前言 就在昨天(3月27号),微信公众号平台推送了文章"小程序新能力",这篇文章是广大开发者的福音.个人开发者可申请小程序!!! 小程序开放个人开发者申请注册,个人用户可访问微信公 ...

  6. 平时自己项目中用到的CSS

    outline  当选中input元素的时候会出现状态线, outline设置成none就没了 input{ outline:none; } contentditable  设置元素内的文本是否可编辑 ...

  7. 数据库DML操作(DCL了解)

    DQL:SELECT * FROM 表名DML(数据操作语言,它是对表记录的操作(增.删.改)!)1. 插入数据* INTERT INTO 表名(列名1,列名2, ...) VALUES(列值1, 列 ...

  8. 每天学点Java小知识【1】

    一 Java标识符和关键字 1.标识符 作用:用来标识类名.变量名.方法名.类型名.数组名.文件名的有效字符序列. 组成规则:由字母.下划线.美元符号和数字组成,且第一个字符不能是数字字符.注意:标识 ...

  9. 性能测试培训: 监控CPU之python

    性能测试培训: 监控CPU之python 作为一名测试开发工程师,开发脚本是为了测试服务的,我们在手里没有性能监控工具的情况下,我们会自己来进行开发脚本完成监控任务.下面是python监控cpu '' ...

  10. ORA-00918: 未明确定义列

    ORA-00918: 未明确定义列 出现问题原因及解决办法. --正常写,结果带上表名的字段在处理后表头名称相同,在进行下一次嵌套时就会出现问题  select au.userxm,au01.user ...