<!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原生轮播-直接上代码的更多相关文章

  1. js原生轮播

    js原生轮播 今天用js做了轮播图,做的不怎么好,希望大家能够看懂. 效果: 1.鼠标放在轮播图上自动停止 2.鼠标离开轮播图自动播放 3.鼠标点击轮播图上的小圆点跳转到相应的图上. 代码: < ...

  2. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  3. js原生轮播图

    轮播图是新手学前端的必经之路! 直接上代码! <!DOCTYPE html><html lang="en"><head> <meta ch ...

  4. js 原生轮播图插件

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

  5. 小白之js原生轮播图

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. js 图片轮播简单版

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  7. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  8. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  9. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

随机推荐

  1. C#中的Infinity和NaN

    C#中double和float类型有两个特殊值: Infinity(无穷大):5.0 / 0.0 = Infinity NaN(not a number):0.0 / 0.0 = NaN 计算表达式 ...

  2. (转)mybatis常用jdbcType数据类型

    1 MyBatis 通过包含的jdbcType类型 BIT FLOAT CHAR TIMESTAMP OTHER UNDEFINED TINYINT REAL VARCHAR BINARY BLOB ...

  3. Orchard 学习

    https://github.com/OrchardCMS/Orchard  源码下载 http://www.orchardch.com/  中文介绍网站

  4. Android 类似duplicate entry: android/support/v4/internal/view/SupportSubMenu.class问题解决办法汇总

    这种问题一般是v4或者v7包版本不一致导致的. 一般情况下进行在你的工程的入口module的build.gradle 的android标签下defaultConfig子标签中 添加如下的配置就能解决. ...

  5. 带着SMART原则重新出发

    很久以来,对分布式系统都比较感兴趣,但工作中却接触不到,“虽不能至,心向往之”,于是打算自己学.分布式系统领域概念很多,错综复杂,一些理论也比较难以理解,要想学习的话还是得下一番功夫.于是在来两个月前 ...

  6. NYOJ--46--最少乘法次数

    最少乘法次数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 给你一个非零整数,让你求这个数的n次方,每次相乘的结果可以在后面使用,求至少需要多少次乘.如24:2*2 ...

  7. Java restful web service 开发入门

    可用的框架有不少,我用的是jersey. 直接上代码,其实,如果你会web service 这个restful的就很好理解了,自己跑一遍就OK了 用到的类 User.java package demo ...

  8. Log4Net .NET log处理

    1.NuGet 安装Log4Net. 2.新建一个Common的project,并且添加一个LogWriter的类: public class LogWriter { //Error log publ ...

  9. CentOS 6.5安装JDK、Tomcat、Mysql

    安装JDK 1.下载JDK7 下载jdk-7u79-linux-x64.tar.gz 百度网盘下载地址:https://pan.baidu.com/s/1c1JZo2k 在Linux上新建/usr/j ...

  10. get post请求

    GET 从指定的资源请求数据 /test/demo_form.asp?name1=value1&name2=value2 请求可被缓存 请求保留在浏览器历史记录中 请求可被收藏为书签 请求不应 ...