js原生的轮播图
| <!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)"><</p> | |
| <p class="p2" onclick="lfClick(-10)">></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原生的轮播图的更多相关文章
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
随机推荐
- 安装Sphere v2.7 遇到的问题
今天在安装Sphere v2.7 的时候,提示错误: /home/lgj/nist/lib/libsphereCombinedLibs.a(shorten.o): In function `short ...
- Win7配置IIS7
1.安装 控制面板\程序\程序和功能\打开或关闭Windows功能 选择Internet信息服务勾选相应的内容 2.打开iis信息服务管理器 点击菜单\运行(WIN+R) 输入iis 如图所示 可 ...
- C++待解
//[要求]按以下描述和要求建立一个含有对象成员的类TeleBook,用类Record定义的数组是TeleBook的数据成员. // 写出所有定义成员函数的代码.执行主函数对其测试. Record私有 ...
- 2013~2014年度 NOIP~GDOI总结
滚回去撸一年中考撸完之后就迎来了NOIP2013（话说初赛差点被坑了有木有= =）想想当年10月还是那样的天真的去了广州，结果就被虐成翔的回来了= =只做了三道签到题的渣渣就是弱= =DAY1T2死活 ...
- oracle系列笔记(1)---查询数据
查询数据 1. 查询(select .. form ..) (1)普通查询 select * from employees --代表查询employees表中所有数据 select last_n ...
- Mac入门推荐（写给Mac小白）
本人第一次接触Mac是在2016年10月中旬,那时由于对苹果系统的不熟悉,导致自己一开始的时候用的很不习惯,甚至还想换回Windows系统.总所周知,苹果系统的软件比较少,在此我向大家推荐一些个人觉得 ...
- iOS回顾笔记（ 02 ） -- 由九宫格布局引发的一系列“惨案”
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 探究CSS中的包裹性
之前一直都知道css中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来. 什么是包裹性? 包裹性就是父元素的宽度会收缩到和内部元素宽度一样. 哪些元素具有 ...
- smarty模板基础3 *缓存数据*
缓存数据,这个并不是暂存的缓存,而是写入了内存的缓存 通过一个例子来书写:缓存数据 一.书写php和html页面的基本功能 既然是用smarty模板,那么前端和后端要分开写了 (1)php页面 < ...
- perl 正则表达式之漫游
废话不多说了,直奔主题~ 一.简单模式进行匹配 将模式写在一对//中即可,匹配对象是$_ 元字符:圆括号() 进行模式分组 点号 . 能匹配任意一个字符,除换行符(\n)以 ...