【原生JS】写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流。
先看效果:(实际效果没有这么快)
先看布局:
<div id="display"> // 显示容器
<div id="tp" style="left:0px"> // 图片容器一定要加left
<img src="img/lunbo1.png" /> //图片
<img src="img/lunbo2.png" /> //图片
<img src="img/lunbo3.png" /> //图片
</div>
</div>
布局样式:
<style>
*{margin:0;}
#display{width:1200px; height:500px; margin: 200px auto; overflow: hidden; position: relative;} //显示区域 宽度和高度为轮播图的宽高
#tp{width:3600px; height:500px; position:absolute;} //几张图片的长相加的宽 3600像素 高500像素
#tp img{width:1200px; height:500px; float:left;} // 定义图片大小让图片左浮动
#tp:hover{cursor: pointer;} //美化鼠标 鼠标秒上去显示手型
</style>
JS代码:
<script language="JavaScript" type="text/javascript">
window.onload = function(){
var tp = document.getElementById('tp');
var timer;
function lunbo(){ //轮播函数
var leftvalue = parseInt(tp.style.left); // 将图片目前样式中的左边像素提取并转为整数
tp.style.left = leftvalue - 1200 + 'px'; // 使计时器每次操作将图片容器左边减去1200像素
if(leftvalue == -2400){ // 判断当前图片左边是否到了最后一张图
tp.style.left = 0 + 'px'; //将图片左边重置为0像素,达到无限轮播
}
}
function play(){ //启动计时器
timer = setInterval(lunbo,3000);
}
function stop(){ //停止计时器
clearInterval(timer);
}
timer = setInterval(lunbo,3000); //打开页面后自动启动计时器
box.onmouseover = stop; //当鼠标移入显示区域时停止计时器
box.onmouseout = play; //当鼠标移出时激活计时器
} </script>
只是做了主体切换代码部分,其于按钮切换等自行通过此思维方法进行添加。
【原生JS】写最简单的图片轮播的更多相关文章
- 纯JS写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
- html+jq实现简单的图片轮播
今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈: <body style="text-align: center;&quo ...
- js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
- 使用js制作一般网站首页图片轮播效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生Js_使用setInterval() 方法实现图片轮播功能
用javascript图片轮播功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
- 用Vue实现一个简单的图片轮播
本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...
随机推荐
- 导出excel表
<?phppublic function export(){ #提现状态 $status = isset($_REQUEST['status'])? ...
- Vue--通过button跳转到其他组件并携带id参数
一.创建vue文件 ’ <template> <div> goodsCommon<br/> goodsCommon<br/> goodsCommon&l ...
- 通过sql 向数据库插入多行语句
我们知道通过insert into 表名(列名) values(值)是向表中插入一条语句,可是当我们需要向数据库插入多条语句时,应该怎么做呢? 可以通过如下格式的sql 语句来实现一次向数据库插入多行 ...
- CSS:命名规范心得分享
一个好的命名习惯(当然这里指的并不仅仅是CSS命名).不仅可以提高开发效率,而且有益于后期修改和维护. 假设我们当前使用的命名方式都是约定成俗的,所有人都是这样写,那么你去到一个新团队,或者别人来接手 ...
- docker.[5] 网络配置-1
docker[5] 网络配置-1 执行 ifconfig 可以看到有一个 docker01 ,这个其实就是容器的虚拟网桥,在执行指令:brctl show(如果该指令不能执行,请先安装: yum -y ...
- Gradle中的buildScript,gradle wrapper,dependencies等一些基础知识
就想收藏一篇好文,哈哈,无他 Gradle中的buildScript代码块 - 黄博文 然后记录一些gradle的基础知识: 1.gradle wrapper就是对gradle的封装,可以理解为项目内 ...
- Linux之软件包安装管理
软件包分类: 源码包:脚本安装包(源C代码) 二进制包(rpm包,系统默认包) 源码包 1.源码包优点 开源,如果有足够的能力,完全可以修改源代码 可以自己选择所需要安装的功能 软件是编译安装,所以更 ...
- IO-02. 整数四则运算
本题要求编写程序,计算2个正整数的和.差.积.商并输出.题目保证输入和输出全部在整型范围内. 输入格式: 输入在一行中给出2个正整数A和B. 输出格式: 在4行中按照格式“A 运算符 B = 结果”顺 ...
- 一个基于Asterisk构建的VOIP应用软件:Elastix介绍
Elastix 是一种应用软件,它整合了适用于那些基于 Asterisk 的 PBX 的最好工具,并将它们集成为单一的.易用的接口.同时,它增加了自己的工具集,以及允许创建第三方模块来使 Elasti ...
- poj3469 最小割
最大流之后S集合与T集合不在相连,即s不能到达T中的点. 对于同一个模块,Ai,Bi,Ai与源点相连,Bi与汇点相连.不同CPU间消耗的模块,相连. 由于最后模块只能在一个CPU中运行,所以要么与源点 ...