<!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  *{
  margin: 0;
  padding: 0;
  text-decoration: none;
  }
  #container{
  width: 600px;
  height: 400px;
  border: 3px solid gold;
  position: relative;
  margin: 300px auto;
  overflow: hidden;
  z-index: 2;
  /*transition: all 0.5s ease;*/
  }
  #list{
  width: 3600px;
  height: 400px;
  position: absolute;
  z-index: 1;
  left: -600px;
  }
  #list img{
  width: 600px;
  height: 400px;
  float: left;
  }
  span{
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 2;
  background: gainsboro;
  bottom: 10px;
  }
  p{
  z-index: 2;
  width: 50px;
  line-height: 50px;
  background: rgba(0,0,0,0.3);
  color: white;
  position: absolute;
  font-size: 40px;
  text-align: center;
  }
  .p1{
  top: 175px;
  left: 0;
  }
  .p2{
  top: 175px;
  right: 0px;
  }
  #container:hover .p1,#container:hover .p2{
  background: rgba(0,0,0,0.7);
  }
   
  </style>
  </head>
  <body>
  <div id="container">
  <div id="list">
  <img src="img/4.jpg" alt="" />
  <img src="img/1.jpg" alt="" />
  <img src="img/2.jpg" alt="" />
  <img src="img/3.jpg" alt="" />
  <img src="img/4.jpg" alt="" />
  <img src="img/1.jpg" alt="" />
  </div>
  <p class="p1" onclick="lfClick(10)">&lt;</p>
  <p class="p2" onclick="lfClick(-10)">&gt;</p>
  <span onclick="oClick(-600,0)"></span>
  <span onclick="oClick(-1200,1)"></span>
  <span onclick="oClick(-1800,2)"></span>
  <span onclick="oClick(-2400,3)"></span>
  </div>
  </body>
  <script type="text/javascript">
  var list = document.getElementById('list');
  var ps = document.querySelectorAll('p');
  var timer = null ;
  var spans = document.querySelectorAll('span');
  var timeOut = null;
  for(var i = 0 ;i<spans.length; i++){
  spans[i].style.left = 250 + i*20 + 'px';
  }
   
  timer=setInterval(doMove,20);
  function doMove(){
  var speed = parseInt(getStyle()) - 10;
  list.style.left = speed +'px';
   
  if(speed %600 ==0){
  clearInterval(timer);
  timeOut = setTimeout(function(){
  timer=setInterval(doMove,20);
  },1000);
  }
  btnColor(speed);
   
  }
   
   
  //前后事件
  var setInter =null;
  // ps[0].onclick = lfClick(10);
  function lfClick(dir) {
  clearInterval(timer);
  clearInterval(setInter);
   
  if(parseInt(getStyle()) < -600 && parseInt(getStyle())>-1200){
  list.style.left = -600 +'px';
   
  }
   
  if(parseInt(getStyle()) < -1200 && parseInt(getStyle())>-1800){
  list.style.left = -1200 +'px';
  }
  if(parseInt(getStyle()) < -1800 && parseInt(getStyle())>-2400){
  list.style.left = -1800 +'px';
  }
  if(parseInt(getStyle()) < -2400 && parseInt(getStyle())>-3000){
  list.style.left = -2400 +'px';
  }
   
  setInter = setInterval(function(){
  clearInterval(timer);
  clearTimeout(timeOut);
  var speed = parseInt(getStyle()) + dir ;
  list.style.left = speed + 'px';
  btnColor(speed);
  if(speed %600 == 0){
  clearInterval(setInter);
  timeOut = setTimeout(function(){
  timer=setInterval(doMove,20);
  },1000);
  if(speed == 0){
  list.style.left = '-2400px';
  }
  if(speed == -3000){
  list.style.left = '-600px';
  }
  }
   
   
   
  },10)
   
  }
   
  function getStyle(){
  return list.currentStyle? list.currentStyle.left:getComputedStyle(list).left;
  }
   
  function oClick(dir,index){
  clearInterval(timer);
  clearTimeout(timeOut)
  list.style.left = dir + 'px';
  for(var i = 0 ;i<spans.length; i++){
  spans[i].style.background='gainsboro';
  }
  spans[index].style.background = 'red';
  timeOut = setTimeout(function(){
  timer=setInterval(doMove,20);
  },1000);
  }
   
  function btnColor(speed){
  if(speed == -600 ){
  spans[0].style.background = 'red';
  spans[3].style.background = 'gainsboro';
  spans[1].style.background = 'gainsboro';
   
  }
  if(speed == -1200 ){
  spans[1].style.background = 'red';
  spans[0].style.background = 'gainsboro';
  spans[2].style.background = 'gainsboro';
  }
  if(speed == -1800){
  spans[2].style.background = 'red';
  spans[1].style.background = 'gainsboro';
  spans[3].style.background = 'gainsboro';
  }
  if(speed == -2400 ||speed ==0){
  spans[3].style.background = 'red';
  spans[2].style.background = 'gainsboro';
  spans[0].style.background = 'gainsboro';
  }
   
  if(speed == -3000){
  list.style.left = -600 +'px';
  spans[0].style.background = 'red';
  spans[3].style.background = 'gainsboro';
  }
  }
   
  </script>
  </html>

js原生的轮播图的更多相关文章

  1. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  2. JS+css3焦点轮播图PC端

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

  3. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  4. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  5. 原生 js 左右切换轮播图

    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...

  6. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  7. 原生JS实现旋转木马轮播图特效

    大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...

  8. photoSlider-html5原生js移动开发轮播图-相册滑动插件

    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...

  9. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

随机推荐

  1. PHP连接数据库：封装成类

    php连接数据库,操作他增删改查等操作,其中要多次连接数据库,每个页面也需要连接数据库,更改数据会及其麻烦: 为了便于数据库的更改,我们可以把固定的那几句话封装成类,这样虽然代码量也差不多,但是有利于 ...

  2. ios 相机调用之读取相册

    UIIamgePickerControllerr可以从照片库中读取一张图片到咱们应用程序中来   步骤:   //创建图片判断图片库是否可以使用   if([UIImagePickerControll ...

  3. 【转】Java通过IText导出word和pdf

    原帖地址:http://blog.csdn.net/zwx19921215/article/details/34439851 最近做的项目中需要用到把Highcharts图表导出word和pdf的功能 ...

  4. iOS回顾笔记（03） -- 自定义View的封装和xib文件的使用详解

    iOS回顾笔记(03) -- 自定义View的封装和xib文件的使用详解 iOS开发中,我们常常将一块View封装起来,以便于统一管理内部的子控件.如iOS回顾笔记(02)中的"书" ...

  5. Java进程通讯

    管道(Pipe):管道可用于具有亲缘关系进程间的通信,允许一个进程和另一个与它有共同祖先的进程之间进行通信. 创建子进程Java有两种方式 //第一种 Runtime rt = Runtime.get ...

  6. 基于 Koa平台Node.js开发的KoaHub.js的模板引擎代码

    koahub-handlebars koahub-handlebars koahub handlebars templates Installation $ npm install koahub-ha ...

  7. 1711: [Usaco2007 Open]Dingin吃饭

    1711: [Usaco2007 Open]Dingin吃饭 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 560  Solved: 290[Submit ...

  8. 1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富

    1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 498  Sol ...

  9. java关于map用来筛选的用法

    我有一个实体 PropTemplateItem{id,名称,父节点,模版id},父节点为root是定义为根节点. 例如数据: 001,颜色,root,123 002,白色,001,123 003,红色 ...

  10. 关于报错：AttributeError: module 'turtle' has no attribute 'setup' 问题

    对于我们菜鸟,往往安装软件后,都容易使用默认设置,结果将写的文件保存到了安装目录下. 这样造成了很大得隐患,如果写得文件,名称与安装目录下得系统文件名称重复,就容易出现以上报错. 解决方法:1.将文件 ...