纯js轮播效果（减速效果）待改进

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width,user-scalable=no" /><title></title>

<meta name="description" content="" />

<meta name="keywords" content="" />

<link href="css.css" rel="stylesheet" type="text/css" />

<script src="js.js"></script>

</head>

<body>

<div class="z_box">

    <div id="move"></div>

</div>

<div id="z_body">

    <ul id="sImg">

        <li><img src="1.jpg" width="600" height="300" /></li>

        <li><img src="2.jpg" width="600" height="300" /></li>

        <li><img src="3.jpg" width="600" height="300" /></li>

        <li><img src="4.jpg" width="600" height="300" /></li>

        <li><img src="5.jpg" width="600" height="300" /></li>

        <li><img src="6.jpg" width="600" height="300" /></li>

    </ul>

    <span id="z_prev"></span>

    <span id="z_next"></span>

    <ul id="sNav">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

    </ul>

</div>

</body>

</html>

CSS样式

*{

    margin:0px;

    padding:0px;

}

li{

    list-style:none;

}

.z_box{

    width:100%;

    height:100px;

    position:relative;

    left:50px;

    box-shadow:0px 0px 5px gray;

}

#move{

    width:100px;

    height:100px;

    position:absolute;

    box-shadow:0px 0px 5px blue;

    left:0px;

}

#z_body{

    width:600px;

    height:300px;

    margin:0 auto;

    overflow:hidden;

    box-shadow:0px 0px 5px black;

    position:relative;

}

#z_body ul#sImg{

    height:300px;

    position:absolute;

    z-index:;

}

#z_body ul#sImg li{

    float:left;

    width:600px;

    height:300px;

    border:2px solid blue;

}

#z_prev{

    width:30px;

    height:30px;

    box-shadow:0px 0px 5px blue;

    display:block;

    position:absolute;

    left:10px;

    top:45%;

    z-index:;

    cursor:pointer;

}

#z_next{

    width:30px;

    height:30px;

    box-shadow:0px 0px 5px blue;

    display:block;

    position:absolute;

    right:10px;

    top:45%;

    z-index:;

    cursor:pointer;

}

#z_body span:hover{

    background:#eee;

    box-shadow:0px 0px 5px yellow;

}

#sNav{

    width:100%;

    height:30px;

    position:absolute;

    bottom:0px;

    left:0px;

    text-align:center;

    z-index:;

}

#sNav li{

    display:inline;

    padding:2px 10px;

    box-shadow:0px 0px 5px red;

    margin-left:10px;

    cursor:pointer;

}

#sNav li:hover{

    background:white;

    box-shadow:0px 0px 5px blue;

}

.getWidth{

    width:100px;

    height:100px;

    border:1px solid red;

}

JS代码

//

window.onload=function(){

    var oDiv=document.getElementById("move");

    var oDiv1=document.getElementById("z_body");

    var oUl=oDiv1.getElementsByTagName("ul");

    var oLi=oUl[0].getElementsByTagName("li");

    //左右按钮初始化

    var oPrev=document.getElementById("z_prev");

    var oNext=document.getElementById("z_next");

    //小导航初始化

    var oNav=document.getElementById("sNav");

    var nLi=oNav.getElementsByTagName("li");

    //计算移动的距离

    var mWidth=oLi[0].offsetWidth;

    //当前索引值

    var k=0;

    //要用offsetWidth 不然在li上加入border会出现错误

    //oUl[0].style.width=parseInt((oLi[0],"width"))*oLi.length+"px";

    oUl[0].style.width=oLi[0].offsetWidth*oLi.length+"px";

    //初始化小按钮当前样式

    nLi[0].style.background="gray";

    function sMove(obj,iTarget,vSpeed){

        var speed=0;

        var timer=0;

        clearInterval(obj.timer);

        obj.timer=setInterval(function(){

            speed=speed>0? Math.ceil((iTarget-obj.offsetLeft)/5):Math.floor((iTarget-obj.offsetLeft)/5);

            //if(obj.offsetLeft==iTarget){

            if(speed==0){

                clearInterval(obj.timer);

                console.log("停止运动!")

            }else{

                console.log("正在运动...");

                obj.style.left=obj.offsetLeft+speed+"px";

            }

            //给小按钮添加当前选中样式

            if(k<=nLi.length-1 && k!=0){

                nLi[(k-1)].style.background="";

                nLi[k].style.background="gray";

            }else{

                nLi[nLi.length-1].style.background="";

                nLi[k].style.background="gray";

            }

        },vSpeed);

    }

    //自动切换函数

    function autoPlay(obj,innerTime,iTar){

        setTimeout(function(){

            if(k==oLi.length-1){

                k=0;

            }else{

                k++;

            }

            sMove(obj,-k*mWidth,25);

        },innerTime);

    }

    //开启自动切换

    var iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500);

    //左右按钮事件

    oPrev.onclick=function(){

        if(k>0){

            sMove(oUl[0],-(k-1)*mWidth,25);

            k--;

        }else{

            k=oLi.length-1;

            sMove(oUl[0],-k*mWidth,25);

        }

        console.log("点击按钮后的k=="+k);

    };

    oNext.onclick=function(){

        if(k<oLi.length-1){

            sMove(oUl[0],-(k+1)*mWidth,25);

            k++;

        }else{

            sMove(oUl[0],-(0*mWidth),25);

            k=0;

        }

        console.log("点击按钮后的k=="+k);

    };

    //左右按钮悬浮事件

    oNext.onmouseover=function(){

        clearInterval(iTimer);

    };

    oNext.onmouseout=function(){

        iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500);

    };

    oPrev.onmouseover=function(){

        clearInterval(iTimer);

    };

    oPrev.onmouseout=function(){

        iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500);

    };

    //鼠标悬浮小按钮

    oNav.onmouseover=function(){

        clearInterval(iTimer);

    };

    oNav.onmouseout=function(){

        iTimer=setInterval(function(){autoPlay(oUl[0],1000,null);},2500);

    };

    //小按钮点击事件

    for(var i=0;i<nLi.length;i++){

        nLi[i].index=i;

        nLi[i].onclick=function(){

            sMove(oUl[0],-this.index*mWidth,25);

            for(var j=0;j<nLi.length;j++){

                nLi[j].style.background="";

            }

            nLi[this.index].style.background="gray";

            k=this.index;

        };

    }

};

//获取计算后的样式

function getStyle(obj,attr){

    if(obj.currentStyle){

        return obj.currentStyle[attr]; //IE

    }else{

        return getComputedStyle(obj,null)[attr];

    }

}

效果虽然已经完成但是还有很多地方需要改进望大家批评指教！

纯js轮播效果（减速效果）待改进的更多相关文章

纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
纯js轮播图练习-3，类似于淘宝海报带小圆点轮播图
基于js和css,跟着网上的视频教程,结合自己想要的效果,做出了一个类似于淘宝海报的效果. 如图:淘宝首页自己做的: 代码: <!DOCTYPE html> <html> & ...
纯js轮播图
<div id="wrapper"> <div id="container"> <img src="http://ima ...
原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化
之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...
纯css3 轮播图利用keyframes
效果: 关键点:利用keyframes 原理:infinite 注意点:在处理关键帧动画的时候,注意处理好总共花费的 animation-duration:time 与每帧延延迟的时间的交错:要让 ...
JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...
[js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

随机推荐

Export Data from mysql Workbench 6.0
原文地址:export-data-from-mysql-workbench-6-0 问题描述 I'm trying to export my database, using MySQL Workben ...
wenti
No apport report written because MaxReports is reached already ...
左边图标右边文字，在div里居中
runtime运行机制方法学习
runtime这玩意第一次听说时都不知道是什么,经过了解后才知道它就是oc动态语言的机制,没有它那oc就不能称为动态语言.在之前可能大家对runtime了解都不深,随着编程技能的日益加深和需要,大家开 ...
【Java基础】分支结构（1）
java 分支结构 if , if else , if elseif if /** 文件路径:G:\JavaByHands\if-else\ 文件名称:IfElseT.java 编写时间:2016/6 ...
pfile 与 spfile
启动方式与顺序: 启动顺序:dbs 下的 init --> dbs 下的 spfile 如果 pfile 中没有指定 spfile 参数,那么数据库以 pfile 方式启动如果 pfile 中 ...
nginx虚拟主机配置
nginx虚拟主机配置虚拟主机的概念虚拟主机,就是把一台物理服务器划分成多个"虚拟"的服务器,每一个虚拟主机都可以有独立的域名和独立的目录nginx虚拟主机的配置nginx的 ...
ocLazyLoad angular 按需加载
ionic 框架 1.引用 index.html 加载 <script type="text/javascript" src="lib/oclazyload/ocL ...
使用mvn插件执行工程单元测试OOM的解决办法
在执行mvn test时,maven会启动一个fork进程来运行所有的单元测试类,所以我需要设置的是这个fork进程的jvm参数. 不过最终还是让我找到了http://maven.apache.org ...
常用js，css文件统一加载方法，并在加载之后调用回调函数
原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

纯js轮播效果（减速效果）待改进

纯js轮播效果（减速效果）待改进的更多相关文章

随机推荐

热门专题