非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流。

先看效果:(实际效果没有这么快)

先看布局:

<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】写最简单的图片轮播的更多相关文章

  1. 纯JS写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  2. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  3. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  4. html+jq实现简单的图片轮播

    今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈: <body style="text-align: center;&quo ...

  5. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  6. 使用js制作一般网站首页图片轮播效果

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

  7. 原生Js_使用setInterval() 方法实现图片轮播功能

    用javascript图片轮播功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  9. 用Vue实现一个简单的图片轮播

    本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...

随机推荐

  1. Qt: error lnk1158 无法运行rc.exe

    解决办法:(依据自己的环境而定) 将C:\Program Files (x86)\Windows Kits\\bin\10.0.15063.0\x64 目录下的rc.exe 和rcdll.dll 复制 ...

  2. C#中的事件注册和注销

    C#中的事件注册和注销 由于.NET框架对消息循环机制进行了很好的封装,开发人员不再需要深入的了解Windows事件/消息实现的具体机制,也无需创建复杂的事件结构体和所谓的消息句柄.我们所要做的无非就 ...

  3. TypeScript类型检查机制

    类型推断 指不需要指定变量的类型,TS编译器可以根据某些规则自动推断出类型. 什么时候会有类型推断? 声明变量时没有指定类型 函数默认参数 函数返回值 ...... let a; // 这时自动推断为 ...

  4. Spring MVC JSON自己定义类型转换

    版权声明:版权归博主全部.转载请带上本文链接.联系方式:abel533@gmail.com https://blog.csdn.net/isea533/article/details/28625071 ...

  5. ThInkPHP加密和解密cookie(登录操作)

    摘自:http://www.thinkphp.cn/code/1794.html 通过加密cookie是网站安全性更高,登录信息不保存在session中在function.php文件在建立两个函数,加 ...

  6. 51nod1196 字符串的数量

    用N个不同的字符(编号1 - N),组成一个字符串,有如下要求:(1) 对于编号为i的字符,如果2 * i > n,则该字符可以作为结尾字符.如果不作为结尾字符而是中间的字符,则该字符后面可以接 ...

  7. Mybatis自查询递归查找子菜单

    之前写过 java从数据库读取菜单,递归生成菜单树 今天才发现mybatis也可以递归查询子菜单 先看一下数据库 主键id,名称name,父id,和url 设计菜单类 public class Men ...

  8. 简单利用XSS获取Cookie信息实例演示

    简单利用XSS获取Cookie信息实例演示   首先要找到一个有XXS的站,这里就不整什么大站了,谷歌一下inurl:'Product.asp?BigClassName',搜出来的命中率也比较高.随便 ...

  9. Map容器案例

    案例讲解  --统计字符串出现的次数 package com.date; import java.util.HashMap; import java.util.Map; import java.uti ...

  10. working copy is not up-to-date

    解决方法:  在相应文件上,单击选择team,然后选择先更新,然后再提交.这样就好了.