<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>大图滚动</title>

    <style type="text/css">

        *{

            margin:0;

            padding:0;

            border:0;

        }

        .clear{

            *zoom:1;

        }

        .clear:after{

            visibility: none;

            content:"";

            display:block;

            clear:both;

            height:0;

        }

        #wrap{

            width: 510px;

            height:286px;

            margin:0 auto;

            position:relative;

            background: pink;

            overflow: hidden;

        }

        #inner{

            width: 1000%;

            height:100%;

            position:absolute;

            left:0;

            top:0;

        }

        #inner img{

            width:10%;

            height:100%;

            float: left;

        }

        .paganation{

            width: 100%;

            position: absolute;

            bottom:10px;

            text-align:center;

        }

        .paganation span{

            padding:5px 8px;

            background: #F2F2F2;

            color:red;

            border-radius:50%;

            cursor: pointer

        }

        .paganation .selected{

            background: red;

            color:white;

        }

        .arrow{

            position:absolute;

            top:0;

            width: 30px;

            height: 286px;

            line-height: 286px;

            text-align: center;

            color: red;

            cursor: pointer;

        }

        #right{

            right: 0;

        }

        .arrow:hover{

            background: rgba(0,0,0,0.5);

        }

    </style>

</head>

<body>

<div id="wrap"><!-- 图片展示区 -->

    <div id="inner" class="clear"><!-- 所有图片并排的块 -->

        <img style="background:red;" src="img/1.jpg" alt="">

        <img style="background:orange;" src="img/2.jpg" alt="">

        <img style="background:green;" src="img/3.jpg" alt="">

        <img style="background:cyan;" src="img/4.jpg" alt="">

        <img style="background:yellow;" src="img/5.jpg" alt="">

        <img style="background:purple;" src="img/6.jpg" alt="">

        <img style="background:pink;" src="img/7.jpg" alt="">

        <img style="background:blue;" src="img/8.jpg" alt="">

        <img style="background:red;" src="img/1.jpg" alt="">

    </div>

    <div class="paganation" id="paganation"><!-- 页面按钮区域 -->

        <span class ="selected">1</span>

        <span>2</span>

        <span>3</span>

        <span>4</span>

        <span>5</span>

        <span>6</span>

        <span>7</span>

        <span>8</span>

    </div>

    <div id="left" class="arrow"><</div><!-- 向左切换按钮 -->

    <div id="right" class="arrow">></div><!-- 向右切换按钮 -->

</div>

<script type="text/javascript">

    var wrap=document.getElementById("wrap");

    var inner=document.getElementById("inner");

    var spanList=document.getElementById("paganation").getElementsByTagName("span");

    var left=document.getElementById("left");

    var right=document.getElementById("right");

    var clickFlag=true;//设置左右切换标记位防止连续按

    var time//主要用来设置自动滑动的计时器

    var index=0;//记录每次滑动图片的下标

    var Distance=wrap.offsetWidth;//获取展示区的宽度，即每张图片的宽度

    //定义图片滑动的函数

    function AutoGo(){

        var start=inner.offsetLeft;//获取移动块当前的left的开始坐标

        var end=index*Distance*(-1);//获取移动块移动结束的坐标。

        //计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。

        var change=end-start;//偏移量

        var timer;//用计时器为图片添加动画效果

        var t=0;

        var maxT=50;//滑动的效率

        clear();//先把按钮状态清除,再让对应按钮改变状态

        if(index==spanList.length){

            spanList[0].className="selected";

        }else{

            spanList[index].className="selected";

        }

        clearInterval(timer);//开启计时器前先把之前的清

        timer=setInterval(function(){

            t++;

            if(t>=maxT){//当图片到达终点停止计时器

                clearInterval(timer);

                clickFlag=true;//当图片到达终点才能切换

            }

            inner.style.left=change/maxT*t+start+"px";//每个17毫秒让块移动

            if(index==spanList.length&&t>=maxT){

                inner.style.left=0;

                index=0;

                //当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果

            }

        },17);

    }

    //编写图片向右滑动的函数

    function forward(){

        index++;

        //当图片下标到最后一张把小标换0

        if(index>spanList.length){

            index=0;

        }

        AutoGo();

    }

    //编写图片向左滑动函数

    function backward(){

        index--;

        //当图片下标到第一张让它返回到倒数第二张，

        //left值要变到最后一张才不影响过渡效果

        if(index<0){

            index=spanList.length-1;

            inner.style.left=(index+1)*Distance*(-1)+"px";

        }

        AutoGo();

    }

    //开启图片自动向右滑动的计时器

    time=setInterval(forward,3000);

    //设置鼠标悬停动画停止

    wrap.onmouseover=function(){

        clearInterval(time);

    }

    wrap.onmouseout=function(){

        time=setInterval(forward,3000);

    }

    //遍历每个按钮让其切换到对应图片

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

        spanList[i].onclick=function(){

            index=this.innerText-1;

            AutoGo();

        }

    }

    //左切换事件

    left.onclick=function(){

        if(clickFlag){

            backward();

        }

        clickFlag=false;

    }

    //右切换事件

    right.onclick=function(){

        if(clickFlag){

            forward();

        }

        clickFlag=false;

    }

    //清除页面所有按钮状态颜色

    function clear(){

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

            spanList[i].className="";

        }

    }

</script>

</body>

</html>

原生JS实现图片轮播的更多相关文章

  1. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  2. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  3. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

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

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

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

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

  6. 原生js实现无缝轮播

    原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...

  7. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

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

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

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

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

随机推荐

  1. Java面向对象接口的应用实例练习

    interface USB { public void open(); public void close(); } class Upan implements USB { public void o ...

  2. bzoj 1084;vijos 1191 [SCOI2005] 最大子矩阵

    Description 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. Input 第一行为n,m,k(1≤n≤100,1≤m≤2 ...

  3. 【经验总结】Java在ACM算法竞赛编程中易错点

    一.Java之ACM易错点 1. 类名称必须采用public class Main方式命名 2. 在有些OJ系统上,即便是输出的末尾多了一个“ ”,程序可能会输出错误,所以在我看来好多OJ系统做的是非 ...

  4. [51nod1684]子集价值

    lyk最近在研究位运算. 它发现除了xor,or,and外还有很多运算. 它新定义了一种运算符"#". 具体地,可以由4个参数来表示. ai,j表示 i#j. 其中i,j与a的值均 ...

  5. hdu_1042(模拟大数乘法)

    计算n! #include<cstring> #include<cstdio> using namespace std; ]; int main() { int n; whil ...

  6. TypeScript笔记 5--变量声明(解构和展开)

    解构是什么 解构(destructuring assignment)是一种表达式,将数组或者对象中的数据赋给另一变量. 在开发过程中,我们经常遇到这样问题,需要将对象某个属性的值赋给其它两个变量.代码 ...

  7. SSL证书安装指引

    https://cloud.tencent.com/document/product/400/4143 下载得到的 www.domain.com.zip 文件,解压获得3个文件夹,分别是Apache. ...

  8. 最常用Python开源框架有哪些？

    Python开源框架有很多,像Django.Flask.webpy等等,但哪些是最常用到的呢?我们收集了一些Python使用者的宝贵意见,把他们认为最常用的Python开源框架简单的介绍给大家. 一. ...

  9. 【开发技术】java中代码检查checkStyle结果分析

    编写Javadoc代码在Java代码的类.函数.数据成员前中输入/**回车,Eclipse能够自动生成相应的Javadoc代码.可以在后面添加相关的文字说明. Type is missing a ja ...

  10. Java 运动模糊

    Java 运动模糊代码 想用Java 写个运动模糊的效果,无奈本人水平有限,国内也没找到资源,于是Google到了一个文档,特地分享出来! 本代码源自 http://www.jhlabs.com/ip ...