实现图片的循环滚动——JS的简单应用
首先默认都了解JS的循环分支运算符等基本语法
用CSS实现简单的布局也是会的。
然后我们就可以来了解一下
function getById(){
//取到属性节点
// var divById = document.getElementById("div1").style;
//取到元素节点
var divById = document.getElementById("div1");
//divById.style.backgroundColor = "blueviolet";//节点属性用小驼峰命名
divById.style.color="green";
divById.innerHTML="<h5>cherishLi</h5>";//重置修改div里的中的HTML代码
if(divById.style.backgroundColor == "blue"){
divById.style.backgroundColor = "red";
}
else{
divById.style.backgroundColor = "blue";
}
一个windows常用的方法我么这里也能用到,而且是最关键的,那就是设置定时器
var out=setInterval(function(){
document.write(num+"<br/>");
num--;
if(num==0){
clearInterval(out);
}
},1000)
还有两个很关键的属性,我们要用到:
<section id="banner">
<div id="inside">
<img src="../img/12168431_1036060226444795_851404817_o_z1lzd7.jpg"/>
<img src="../img/12388071_1065320530185431_2076280306_n_g93ygx.jpg"/>
<img src="../img/12656432_1094243637293120_49905962_o_dk24or.jpg"/>
<img src="../img/12903800_1136073019776848_60542799_o_rewsfx.jpg"/>
<img src="../img/12910198_1136068819777268_2019684994_n_shntwd.jpg"/>
</div> </section>
然后设置一下样式(如何在只能显示四张图的区域放下十张图)
*{
margin: 0px;
padding: 0px;
}
#banner{
width: 440px;
height: 110px;
overflow: hidden;
white-space: nowrap;
}
#inside{
width: 1100px;
height: 110px;
position: relative;
white-space: nowrap;
transition: all 0.5s ease; }
#inside img{
float: left;
}
最后是JS代码,应该已经很明了了。每隔1s滚动100px,滚完5张,计数器清零。
var manyImg= document.getElementById("inside");
manyImg.innerHTML=manyImg.innerHTML+manyImg.innerHTML;
// console.log(manyImg.innerHTML=manyImg.innerHTML+manyImg.innerHTML);
var i=0;
var gun = setInterval(function(){
i++;
manyImg.style.transition="all 0.5s ease";
switch (i){
case 1:
manyImg.style.transition="none";
inside.style.marginLeft = 0+"px";
break;
case 2:
inside.style.marginLeft = (-110)+"px";
break;
case 3:
inside.style.marginLeft = (-110-110)+"px";
break;
case 4:
inside.style.marginLeft = (-110-110*2)+"px";
break;
case 5:
inside.style.marginLeft = (-110-110*3)+"px";
break;
case 6: inside.style.marginLeft = (-110-110*4)+"px"
i = 0;
break;
case 7:
inside.style.marginLeft = (-110-110*5)+"px"; break;
case 8:
inside.style.marginLeft = (-110-110*6)+"px";
break;
case 9:
inside.style.marginLeft = (-110-110*7)+"px";
break;
case 10:
inside.style.marginLeft = (-110-110*8)+"px";
break;
case 11:
inside.style.marginLeft = (-110-110*9)+"px"; break;
default:
break;
} },1000)
如果需要加上数字按钮控制对应的图片,只需用ul或者div做好按钮,加上一个函数控制就行
<ul id="bannerNumber">
<li onclick="changeBan(1)">1</li>
<li onclick="changeBan(2)">2</li>
<li onclick="changeBan(3)">3</li>
<li onclick="changeBan(4)">4</li>
</ul>
function changeBan(num1){
switch(num1){
case 1:
inside.style.marginLeft = 0+"px";
break;
case 2:
inside.style.marginLeft = (-110)+"px";
break;
case 3:
inside.style.marginLeft = (-110-110)+"px";
break;
case 4:
inside.style.marginLeft = (-110-110*2)+"px";
break;
case 5:
inside.style.marginLeft = (-110-110*3)+"px";
break;
}
i=num1-1;
}
效果可以自己实践一下=。=,这里就不插图了
实现图片的循环滚动——JS的简单应用的更多相关文章
- APP中常见上下循环滚动通知的简单实现,点击可进入详情
APP中常见上下循环滚动通知的简单实现,点击可进入详情 关注finddreams博客,一起分享一起进步!http://blog.csdn.net/finddreams/article/details/ ...
- 封装一个ViewPager真正的实现图片无限循环滚动带导航点
效果图: 大家在写项目的过程中常常会碰到须要实现Viewpager里面载入几张图片来循环自己主动轮播的效果,假设不封装一下的话代码分散在activity里面会显得非常乱.并且也不利于我们下次复用,所以 ...
- cocos2d(背景图片循环滚动)
背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...
- IOS实现自动循环滚动广告--ScrollView的优化和封装
一.问题分析 在许多App中,我们都会见到循环滚动的视图,比如广告,其实想实现这个功能并不难,用ScrollView就可以轻松完成,但是在制作的过程中还存在几个小问题,如果能够正确的处理好这些小问题, ...
- JavaScript学习笔记——简单无缝循环滚动展示图片的实现
今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 实现图片间隔循环轮播以及没有间隔的循环轮播
链接地址:http://blog.sina.com.cn/s/blog_75cf5f32010199dn.html 最近做了个图片循环轮播的功能.就是几张图片不断的循环滚动显示. 感觉这个方法不错所以 ...
- javascript小记五则:用JS写一个图片左右自由滚动的“跑马灯”效果
之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下: <!DOCTYPE html PUBLIC "- ...
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
随机推荐
- 基于Modbus的C#串口调试开发
说明:本文主要研究的是使用C# WinForm开发的串口调试软件(其中包含Modbus协议相关操作).Modbus相关协议可以查阅百度文库等,可参考: <http://wenku.baidu.c ...
- C — 对C语言的认识
有趣的C语言代码 看一下这段代码输出的是什么 #include <stdio.h> int main() { ; printf("%d\n", printf(" ...
- 机器学习基石 5 Training versus Testing
机器学习基石 5 Training versus Testing Recap and Preview 回顾一下机器学习的流程图: 机器学习可以理解为寻找到 \(g\),使得 \(g \approx f ...
- vs打开项目出错:未找到导入的项目“C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\BuildCustomizations\CUDA 5.0.props”的解决办法
有时候由于CUDA升级或者下载的源码原创建项目的CUDA版本与自己的不同,在打开项目的时候发现加载不上,提示:未找到导入的项目“C:\Program Files (x86)\MSBuild\Micro ...
- Spark(开课吧笔记)
2016.07.14 1-Spark实战演练:Spark概述及生态环境 2.Spark实战演练:Spark vs Hadoop MapReduce 任意一条边有方向且不存在环路的图,一次执行所 ...
- java学习笔记 --- 面向对象
一.对象和类 类(class):类是用于描述现实事物的,它将现实事物进行抽象化,模板化描述.将事物的特点(属性)和行为封装在其中.比如小汽车的图纸,图纸就是小汽车的模版.图纸上画着小汽车的各种特点和功 ...
- js面向对象-原型链
var Person = function (name) { this.name = name; } Person.prototype.say = function () { console.log( ...
- React+Node初尝试
这是第一次写React和Node,选用的是前端Material-ui框架,后端使用的是Express框架,数据库采用的是Mongodb. 项目代码在:GitHub/lilu_movie 这是一个通过从 ...
- 机器学习:Python实现最小均方算法(lms)
lms算法跟Rosenblatt感知器相比,主要区别就是权值修正方法不一样.lms采用的是批量修正算法,Rosenblatt感知器使用的 是单样本修正算法.两种算法都是单层感知器,也只适用于线性可分的 ...
- mysql的导入和导出
MYSQL数据库导出 以root登录vps,执行以下命令导出. 1./usr/local/mysql/bin/mysqldump -u root -p123456 zhumaohai > /ho ...