使用JS实现图片轮播滚动跑马灯效果
我的第一篇文章、哈哈、有点小鸡冻。
之前在百度搜索“图片轮播”、“图片滚动”，结果都是那种可以左右切换的。也是我们最常见的那种。可能是搜索 关键字的问题吧。
如图：
教程效果图：
教程开始：
HTML代码：
<body>
<div id="div1">
<div id="div4">
<div id="div2">
<img src="img/1.jpg" alt="图片1"/>
<img src="img/2.jpg" alt="图片2"/>
<img src="img/3.jpg" alt="图片3"/>
<img src="img/4.jpg" alt="图片4"/>
</div>
<div id="div3"></div><!--这个容器是用来防止图片滚动时会出现空白的区域-->
</div>
</div>
</body>
CSS代码：
<style type="text/css">
div,img{
margin:;
padding:;
}
img{
float:left;
height:100px;
width:150px;
}
#div1{
width:500px;
height:100px;
overflow: hidden;
border:solid blue 2px;
}
#div2,#div3{
float:left;
}
#div4{
width:500%;/*这个属性很重要 让容器有足够的宽度实现滚动*/
float:left;
}
</style>
JavaScript代码：
<script type="text/javascript">
window.onload=function(){
var v1=document.getElementById('div1');
var v2=document.getElementById('div2');
var v3=document.getElementById('div3'); v3.innerHTML= v2.innerHTML;//将v2容器里面的图片插入到v3容器里面 使其空白区域被遮住。
function fun(){
if(v1.scrollLeft<=0){
v1.scrollLeft=600;
}else{
v1.scrollLeft--;
}
} var fun1=setInterval(fun,10); v1.onmouseover = function() {//鼠标经过时 清除定时器 停止图片的滚动
clearInterval(fun1)
};
v1.onmouseout = function() {//鼠标离开后 继续滚动图片
fun1 = setInterval(fun, 10)
};
} </script>
教程结束。
本人新手一个、请大神们多多指教。
此处省略一万字...
使用JS实现图片轮播滚动跑马灯效果的更多相关文章
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- JQuery图片轮播滚动效果(网页效果--每日一更)
今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...
- 使用JS实现图片轮播（前后首尾相接）
最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- 用JS做图片轮播
脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...
- js加强版图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js实现图片轮播效果
思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
- 原生js实现简单轮播的淡入淡出效果
实现这种淡入淡出的轮播关键在于css的一种设置 首先它不能像传统的轮播显示隐藏 或者左右浮动 他应该让其固定定位使其重叠在一起 达到这种效果 然后设置c3动画属性 transition:1s; ...
随机推荐
- 异常处理第一讲(SEH),筛选器异常,以及__asm的扩展,寄存器注入简介
异常处理第一讲(SSH),筛选器异常,以及__asm的扩展 博客园IBinary原创 博客连接:http://www.cnblogs.com/iBinary/ 转载请注明出处,谢谢 一丶__Asm的 ...
- 只用一招让你Maven依赖下载速度快如闪电
一.背景 众所周知,Maven对于依赖的管理让我们程序员感觉爽的不要不要的,但是由于这货是国外出的,所以在我们从中央仓库下载依赖的时候,速度如蜗牛一般,让人不能忍,并且这也是大多数程序员都会遇到的问题 ...
- jz2440重新分区
在购买开发板的时候,板子上已经烧写好了bootloader.内核和文件系统.但是在具体使用时,发现板子上划分的内核分区只有2M,但是我编译出来的内核大于2M,于是将内核烧写到nandflash上面时会 ...
- Maven（六）之依赖管理
前面讲了maven一些关于Maven的简单知识,今天我给大家分享一些Maven的依赖管理.我相信用过maven的人都知道,它很重要的功能就是通过依赖来添加jar包. 让我们领略一下Maven是怎么管理 ...
- asp.net mvc项目实记-开启伪静态-Bundle压缩css,js
百度这些东西,还是会浪费了一些不必要的时间,记录记录以备后续 一.开启伪静态 如果不在web.config中配置管道开关则伪静态无效 首先在RouteConfig.cs中中注册路由 routes.Ma ...
- [Sdoi2010]星际竞速
个人对山东省选已经十分无语了,做了三道题,都TM是费用流,这山东省选是要干什么,2009--2011连续三年,只要会费用流,然后建个边,跑一跑就过了. 10 年一度的银河系赛车大赛又要开始了.作为全银 ...
- NOIP2017SummerTraining0705
个人感受:这一场考试是网开着的,然后第一题就水过了,第二三题应该是暴力吧,然后各水了50.拿了200分.排名第10. 问题 A: 重复字符串 时间限制: 1 Sec 内存限制: 256 MB提交: ...
- 关于离线底图和离线shp文件的加载
首先底图是我自己用百度地图18级别的瓦片图在armap中制作的TPK文件,shp图层是我用同样的百度地图18级别的瓦片图矢量化的,二者在arcmap中的空间参考是一致的,所以我以为在移动端加入的时候二 ...
- Ubuntu Docker 版本的更新与安装
突然发现自己的docker 版本特别的低,目前是1.9.1 属于古董级别的了,想更新一下最新版本,这样最新的一下命令就可以被支持.研究了半天都没有更新成功,更新后的版本始终都是1.9.1 :蒙圈了,找 ...
- ASP.NET没有魔法——ASP.NET MVC 与数据库之Entity Framework Migrations
在开发数据库应用程序的时候,经常会遇到某些表需要添加字段或者修改类型.新增表等需求,而对于EF Code First来说关注的只有实体类,当需求变更时只需要添加新的实体类或者在实体类中添加.删除.修改 ...