js的轮播效果
图片的轮播效果!主要运用了元素的style样式属性,与 setInterval();
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 960px;
height: 400px;
outline: 1px black solid;
margin: 50px auto;
overflow: hidden; }
ul{
width: 28800px;
height: 400px;
outline: 1px red solid; }
li{
width: 960px;
height: 400px;
list-style: none;
float: left;
}
button{
margin-left: 700px;; }
</style>
<script>
window.onload=function(){
var bnt=document.getElementsByTagName('button')[0];
var lis=document.getElementsByTagName('li');
var ul=document.getElementsByTagName('ul')[0];
for(var i=0;i<lis.length;i++){
lis[i].style.marginLeft=0;
}
var timeer=setInterval(function(){
var timme=setInterval(function(){
var ml=parseInt(lis[0].style.marginLeft);//利用marginLeft的值让图片移动
ml=ml-30;//图片每一次移动30px;
lis[0].style.marginLeft=ml+'px';
if(ml<=-960){
clearInterval(timme);//当第一张图片移动了960px时,就将时间清理了,让他停止5秒。
var newli=lis[0].cloneNode(true);//这时克隆一个li标签和他的节点
ul.removeChild(lis[0]);//将ul的子节点删除
newli.style.marginLeft = 0;
ul.appendChild(newli);//将克隆的添加到ul里
}
},50);
},4000);
bnt.onclick=function(){
window.clearInterval(timeer);
}
};
</script>
</head>
<body>
<div>
<ul>
<li><img src="../images/slide-1.jpg"/></li>//随便找三张width:960px;height:400px;的图片
<li><img src="../images/slide-2.jpg"/></li>
<li><img src="../images/slide-3.jpg"/></li>
</ul>
</div>
<button>停止播放</button>
</body>
</html>
作业:用js做个手风琴效果!
js的轮播效果的更多相关文章
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
- 原生JS实现轮播效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js图片轮播效果常见的产品无缝轮播
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JS实现焦点图轮播效果
大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...
- 原生JS实现幻灯片轮播效果
在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...
- 针对淡入淡出的定时轮播效果js
如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- JS、JQ实现焦点图轮播效果
JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
随机推荐
- 初始Yarn
YARN 产生背景 MapReduce1.x存在的问题:单点故障&节点压力大.不易扩展 资源利用率&运维成本 催生了YARN的诞生 YARN:不同计算框架可以共享同一个HDFS集群上的 ...
- Delphi7调用DelphiXE编写的DLL问题
http://bbs.csdn.net/topics/380045353 用DelphiXE在WIN2008下编写一个访问WebServices的DLL ws.dll,只有一个输出函数,如下: fun ...
- 质量能量等效的泛化--物理学定律方程与等效原理的对应关系 Generalization of Mass-Energy Equivalence--Corresponding Relations between Equations of Physical Laws and Equiva
前文所述,质能方程E=Mc^2可知质能等效,即可设计实验,使得实验无法分辨是何者变化. 泛化:所有的物理学定律方程都可看作方程两边的概念是等效的. 举几个栗子: 例一:F=ma--伊萨克爵士的代表作. ...
- CentOS 7配置nginx-1.13.10支持http/2和Server Push
0.确保openssl版本大于1.0.2 openssl version 1.下载nginx-1.13.10 wget http://nginx.org/download/nginx-1.13.10. ...
- WordPress建站指南(1)
写在前面: 3月份用10天零碎时间火速完成了建站,后台95%的工作都交给了WP(WordPress).如果想偷懒的话,WP是一个绝好的选择,估计有个小半天就建完收工了. 想有片自己的小花园,可是不会P ...
- SQL Server主要系统视图说明
SELECT * FROM sys.all_columns --显示属于用户定义对象和系统对象的所有列的联合--https://docs.microsoft.com/zh-cn/sql/relatio ...
- ASP.NET Core ef启用数据迁移
创建一个项目 通过Nuget获取EF Core相关的扩展包 appsettings.json 建立数据库连接串 创建数据库上下文EntityDbContext类,用于实体类映射数据库表 使用包管理器控 ...
- 【转】TOP10美国虚拟主机/网站空间推荐
原文:http://www.laozuo.org 不同的站长用户需要不同的主机产品,并不是所有的站长, 所有的网站都想放置在VPS服务器中的.虚拟主机也有虚拟主机的方便和优势,下面为老左精选的10个比 ...
- 转---如何让前端更安全?——XSS攻击和防御详解
前言 平时很少关注安全这块的技术,曾经也买过一本<Web前端黑客技术揭秘>但至今还没翻过,尴尬.今天的早读文章由腾讯优测@小吉带来的分享. 正文从这开始~ 最近深入了解了一下XSS攻击.以 ...
- 【hyperscan】示例解读 pcapscan
示例位置: <hyperscan source>/examples/pcapscan.cc参考:http://01org.github.io/hyperscan/dev-reference ...