Js原生轮播-直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport">
<title>Document</title>
<link rel="stylesheet" href=""/>
<style>
      *{
         margin:0;
         padding:0;
         list-style:none;
         text-decoration:none;
         font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif;
      }
      body{
        background:#eee;
      }
      #Bigbox{
        width:720px;
        height:420px;
        border:1px solid #333;
        margin:60px auto;
      }
      #Box{
        width:700px;
        height:400px;
        position:relative;
        overflow: hidden;
        top:10px;
        left:10px;
      }
      #Ul{
        height:400px;
        position:absolute;
        top:0;
        left:0;
      }
      #Ul li{
        width:700px;
        height:400px;
        float:left;
      }
      #Left{
        width:60px;
        height:50px;
        border-radius:30%;
        background:rgba(96,96,96,.5);
        position:absolute;
        top:50%;
        left:0;
        margin-top:-25px;
        color:#fff;
        line-height:50px;
        text-align:center;
        cursor:pointer;
        font-size:20px;
        display:none;
      }
      #Right{
        width:60px;
        height:50px;
        border-radius:30%;
        background:rgba(96,96,96,.5);
        position:absolute;
        top:50%;
        right:0;
        margin-top:-25px;
        color:#fff;
        line-height:50px;
        text-align:center;
        cursor:pointer;
        font-size:20px;
        display:none;
      }
</style>

</head>
<body>
<div id="Bigbox">
<div id="Box">
<ul id="Ul">
<li>
<img src="img/1.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/2.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/3.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/4.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/5.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/6.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/7.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/8.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/9.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/10.jpg" width="100%" height="100%">
</li>
</ul>

<div id="Left" onselectstart="return false">左</div>
<div id="Right" onselectstart="return false">右</div>
</div>
</div>
<script>
   window.onload = function(){
     var n = 0;
     var timer = null;
     var timer1 = null;
     var timer2 = null;
     var timer3 = null;
     var oDiv = document.getElementById('Box')
     var oUl = document.getElementById('Ul')
     var oLi = oUl.getElementsByTagName('li')
     //获取div宽度
     var oDivWidth = getStyle(oDiv,'width').split('px')[0]      //复制oUl的innerHTML
        oUl.innerHTML+= oUl.innerHTML
        //设置ul宽度
     oUl.style.width = oLi.length*oDivWidth+'px'
     //获取ul宽度
     var oUlWidth = getStyle(oUl,'width').split('px')[0]      //封装获取非行间样式函数
      function getStyle(obj,sName){
if(obj.currentStyle){
return obj.currentStyle[sName];
}else{
return getComputedStyle(obj,false)[sName];
}
}
//执行函数
clearInterval(timer3)
timer3 = setInterval(function(){
Run()
},2000)
//封装运动函数
function Run(){
clearInterval(timer)
timer = setInterval(function(){
n-=20;
oUl.style.left = n+'px'
if(n%oDivWidth==0){
clearInterval(timer3)
clearInterval(timer)
clearInterval(timer1)
timer1 = setTimeout(function(){
Run()
},2000)
}
if(n<=-oUlWidth/2){
oUl.style.left = 0;
n=0;
clearInterval(timer3)
clearInterval(timer)
clearInterval(timer1)
timer1 = setTimeout(function(){
Run()
},2000)
}
},30)
}

//鼠标移入停止滚动
oDiv.onmouseover = function(){
Left.style.display = 'block'
Right.style.display = 'block'
clearInterval(timer3)
clearInterval(timer2)
timer2 = setInterval(function(){
if(n%oDivWidth==0){
clearInterval(timer)
clearInterval(timer1)
}
},30)

}

//鼠标移出继续执行
oDiv.onmouseout = function(){
Left.style.display = 'none'
Right.style.display = 'none'
clearInterval(timer3)
clearInterval(timer2)
clearInterval(timer1)
timer1 = setTimeout(function(){
Run()
},2000)
}

//向左
Left.onclick = function(){
//清除所有定时器
clearInterval(timer)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
timer = setInterval(function(){
n-=50;
oUl.style.left = n+'px'
if(n%oDivWidth==0){
clearInterval(timer)
}
if(n<=-oUlWidth/2){
oUl.style.left = 0;
n=0;
}
},30)
}

//向右
Right.onclick = function(){
clearInterval(timer)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
if(n==0){
n=-oUlWidth/2
}
clearInterval(timer)
timer = setInterval(function(){
n+=50;
oUl.style.left = n+'px'
if(n%oDivWidth==0){
clearInterval(timer)
}

},30)
}
}
//哈哈
</script>
</body>
</html>

Js原生轮播-直接上代码的更多相关文章

js原生轮播
js原生轮播今天用js做了轮播图,做的不怎么好,希望大家能够看懂. 效果: 1.鼠标放在轮播图上自动停止 2.鼠标离开轮播图自动播放 3.鼠标点击轮播图上的小圆点跳转到相应的图上. 代码: < ...
js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
js原生轮播图
轮播图是新手学前端的必经之路! 直接上代码! <!DOCTYPE html><html lang="en"><head> <meta ch ...
js 原生轮播图插件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
小白之js原生轮播图
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
js 图片轮播简单版
<html> <head> <meta charset="utf-8" /> <title></title> <s ...
原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
原生js实现轮播图
原生js实现轮播图很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

随机推荐

如何开始使用bootstrap
登陆Bootstrap官网:http://getbootstrap.com/ Bootstrap中的JS插件依赖于jQuery,因此jQuery要在Bootstrap之前引用 bootstrap框架初 ...
useradd新建用户和权限分配
场景:在搭建Ftp服务器时候,需要新建ftp用户,其实新建的ftp用户和Linux中root新建的用户一样,只是需要了解新建用户时候的相关规则. 1 解决新建用户缺少配置文件 1.1 新建用户指定目 ...
九度OJ1000
题目描述: 求整数a,b的和. 输入: 测试案例有多行,每行为a,b的值. 输出: 输出多行,对应a+b的结果. 样例输入: 1 2 4 5 6 9 样例输出: 3 9 15 代码实现: #inclu ...
【HTML】section
1. 定义标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 2. div.section . article的区别 div: 本身没有任何语义,用作布局以及样式 ...
linux任务前后台执行
Linux任务前后台的切换 Shell支持作用控制,有以下命令实现前后台切换: 1. command& 让进程在后台运行 2. jobs 查看后台运行的进程 3. fg %n 让后台运行的进程 ...
angular JS中使用jquery datatable添加ng-click事件
'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.show = function ( ...
tcp netstat用法 TIME_WAIT状态解析 MTU以及MSS
带着问题写博客问题1:使用netstat查看有源TCP连接的状态时,经常会看到established状态,那么还有哪些状态,这些状态是如何变化的呢? 问题2:TIME_WAIT状态存在的必要? 问题 ...
3624: [Apio2008]免费道路
Description Input Output Sample Input 5 7 2 1 3 0 4 5 1 3 2 0 5 3 1 4 3 0 1 2 1 4 2 1 Sample Output ...
vue错误和解决方法
1.Error in render function: "TypeError: Cannot read property 'matched' of undefined 原因:之前不知道,在引 ...
暑假集训D11总结
%dalao 今天某学长来讲一个极其高深的数据结构——线段树(woc哪里高深了),然而并没有时间整理笔记= =,所以明天在扔笔记咯= = 考试今天考试,一看数据范围,woc暴力分给的真足,然后高高兴 ...

Js原生轮播-直接上代码

Js原生轮播-直接上代码的更多相关文章

随机推荐

热门专题