js之无缝轮播图

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>轮播图</title>

<link rel="stylesheet" href="css/common.css"/>

<link rel="stylesheet" href="css/carousel.css"/>

</head>

<body>

    <div class="carousel">

        <ul class="carousel-list">

            <li><img src="img/1.jpg" /></li>

            <li><img src="img/2.jpg" /></li>

            <li><img src="img/3.jpg" /></li>

            <li><img src="img/4.jpg" /></li>

        </ul>

        <div class="direction-btn">

            <a href="javascript:;" class="prev">></a>

            <a href="javascript:;" class="next"><</a>

        </div>

        <div class="dots">

            <a href="javascript:;" class="active"></a>

            <a href="javascript:;"></a>

            <a href="javascript:;"></a>

            <a href="javascript:;"></a>

        </div>

    </div>

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

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

</body>

</html>

common.js

   /*

    缓冲运动

    obj：运动的对象

    target：运动属性和终点值的对象

    fn：回调函数

    ratio：运动系数，默认值为8

*/

function bufferMove(obj,target,fn,ratio){

    var ratio = ratio || 8;

    clearInterval(obj.timer);

    obj.timer = setInterval(function(){

        var allOK = true;

        for(var attr in target){

            var cur = 0;

            if(attr === 'opacity'){

                cur = parseInt(getStyle(obj,'opacity') * 100);

            } else{

                cur = parseInt(getStyle(obj,attr));

            }

            var speed = (target[attr] - cur) / ratio;

            speed = speed > 0? Math.ceil(speed) : Math.floor(speed);

            var next = cur + speed;

            if(attr === 'opacity'){

                obj.style.opacity = next /100;

                obj.style.filter = 'alpha( opacity = ' + next + ')';

            } else{

                obj.style[attr] = next + 'px';

            }

            if(next !== target[attr]){

                allOK = false;

            }

        }

        if(allOK){

            clearInterval(obj.timer);

            if(fn){

                fn();

            }

        }

    },50);

}

//

///*

//    获取当前样式值

//*/

function getStyle(obj, attr) {

    if(obj.currentStyle) {

        return obj.currentStyle[attr];

    } else {

        return getComputedStyle(obj, false)[attr];

    }

}

//多属性函数封装

//封装获取样式的函数

//    function getStyle(obj,attr){

//        if(obj.currentStyle){

//            return obj.currentStyle[attr];

//        } else {

//            return getComputedStyle(obj,false)[attr];

//        }

//    }

//封装类名的获取

    function byClassName(sClassName){

        if(document.getElementsByClassName){

            return document.getElementsByClassName(sClassName);

        } else {

            var all = document.getElementsByTagName('*');

            var result = [];

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

                if(all[i].className === sClassName){

                    result.push(all[i]);

                }

            }

            return result;

        }

    }

carousel.js

//    获取两个点击事件的元素

var oBtn = byClassName('direction-btn')[0],

//    获取大盒子

    oCarousel = byClassName('carousel')[0],

//    获取存储图片的ul

    oCarouselList = byClassName('carousel-list')[0],

//    获取ul下的li

    oCarouselLi = oCarouselList.children,

//    获取上一个的点击按钮

    oPrev = byClassName('prev')[0],

//    获取下一个的点击按钮

    oNext = byClassName('next')[0],

//  记录图片下标

    index = 0;

//    定义点的下标

    dotIndex = 0;

//    定义常量图片的宽度

    const iPerW = 590;

//    定义定时器

var    timer = null;

var oDots = byClassName('dots')[0];

var oDotsA = Array.from(oDots.children);

//遍历a

    oDotsA.forEach((v,k) =>{

        v.onmouseover = function(){

            index = k;

            dotIndex = k;

            bufferMove(oCarouselList,{left:-index * iPerW});

            setDotClass();

        }

    })

    function setDotClass(){

        //遍历每个a标签

        oDotsA.forEach(v => v.className='');

//        右侧a判断

        if(dotIndex >= oDotsA.length){

            dotIndex = 0;

        }

//        左侧a判断

        if(dotIndex < 0){

            dotIndex = oDotsA.length - 1;

        }

        oDotsA[dotIndex].className = 'active';

    }

//添加第一张图片到末尾

oCarouselList.innerHTML += oCarouselLi[0].outerHTML;

//定义ul的总宽度

oCarouselList.style.width = iPerW * oCarouselLi.length + 'px';

oCarousel.onmouseover = function(){

    clearInterval(timer);

    oBtn.style.display = 'block';

}

oCarousel.onmouseout = function(){

    autoMove();

    oBtn.style.display = 'none';

}

//添加点击事件

oNext.onclick = function(){

    rightMove();

}

function rightMove(){

    index++;

    dotIndex++;

    if(index >= oCarouselLi.length){

        index = 1;

        oCarouselList.style.left = '0px';

    }

    bufferMove(oCarouselList,{left:-index * iPerW});

    setDotClass();

}

//添加左侧点击事件

oPrev.onclick = function(){

    index--;

    dotIndex--;

    if(index < 0){

        index = oCarouselLi.length - 2;

        oCarouselList.style.left = - (oCarouselLi.length - 1)  * iPerW + 'px';

    }

    bufferMove(oCarouselList,{left:-index * iPerW});

    setDotClass();

}

//自动播放

autoMove();

function autoMove(){

    timer = setInterval(function(){

        rightMove();

    },3000);

}

css文件

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{

    margin: 0;

    padding: 0;

}

body{

    font-family:"Mrcrosoft Yahei",Arial;

}

ul,ol{

    list-style: none;

}

a{

    text-decoration: none;

}

img{

    border:none;

}

body{

    background:lightblue;

}

.carousel{

    width: 590px;

    height: 340px;

    margin: 50px auto;

    overflow: hidden;

    position: relative;

}

.carousel-list{

    position: absolute;

}

.carousel-list li{

    float: left;

}

.direction-btn{

    display: none;

}

.direction-btn a{

    position: absolute;

    top: 50%;

    margin-top: -30px;

    width: 30px;

    line-height: 60px;

    background: rgba(0, 0, 0, .3);

    color: #fff;

    font-size: 30px;

    text-align: center;

}

.prev {

    left: 0;

}

.next {

    right: 0;

}

.dots{

    position: absolute;

    background:rgba(255,255,255,.4);

    border-radius: 12px;

    width: 72px;

    left: 0;

    right: 0;

    bottom: 10px;

    margin: 0 auto;

    font-size: 0;

    line-height: 0;

    padding: 0 4px;

}

.dots a{

    display: inline-block;

    width:10px;

    height: 10px;

    border-radius: 50%;

    background: #fff;

    margin: 6px 4px;

}

.dots .active{

    background: red;

}

图片更换成自己的路径即可

js之无缝轮播图的更多相关文章

js 实现淘宝无缝轮播图效果，可更改配置参数带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果需求分析: ...
JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body>  <div class="test" ...
js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播点击左右箭头按钮无缝轮播点击数字按钮切换图片分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
原生js实现无缝轮播
原生js实现无缝轮播因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

随机推荐

迟到的thuwc&noiwc2018总结
已经4个多月没写博客了呢. thuwc和noiwc都炸了,接下来的一段时间都没怎么写题,靠文化课和游戏麻醉自己.这篇博客也算是向之前自闭.颓废的自己告别吧.. 先写一发游记: thuwc:Day1炸, ...
关于C# get set的简单用法
关于C# get set的文章很多,但是笔者的这篇文章有它的特别之处,笔者用简单的语言把c# get set讲述的十分明了. C# get set释一:属性的访问器包含与获取(读取或计算)或设置(写) ...
ubuntu安装python MySQLdb模块
本文讲述了python安装mysql-python的方法.分享给大家供大家参考,具体如下: ubuntu 系统下进行的操作首先安装了pip工具 ? 1 sudo apt-get install py ...
C# 生成图片缩略图
最近项目有部分需求,是关于图片操作部分的, 大致的功能就是图片的保存和展示.但是直接操作原图,程序运行效率太慢.而且如果传输数据量过大的话,可能直接导致调用WCF服务失败的问题. 为了解决这个问题,决 ...
@configurationProperties的写法
使用Github上传本地代码
最近在学习Python,但是每次写完代码后不知道该怎么跟家里的电脑进行同步.于是开始了学习github ,方法很简单 1:注册个git账号:https://github.com 2:本地安装git软件 ...
C#转译字符
C#转义字符: 一种特殊的字符常量以反斜线"\"开头,后跟一个或几个字符具有特定的含义,不同于字符原有的意义,故称“转义”字符. 主要用来表示那些用一般字符不便于表示的控制代码 ...
HDU1595-最短路-删边
find the longest of the shortest Time Limit: 1000/5000 MS (Java/Others) Memory Limit: 32768/32768 ...
js字符串操作方法
1.字符方法: str.charAt(): 可以访问字符串中特定的字符,可以接受0至字符串长度-1的数字作为参数,返回该位置下的字符,如果参数超出该范围,返回空字符串,如果没有参数,返回位置为0的字符 ...
SpringCloud_00_资源帖
一.官方资料 spring-cloud reference springcloud中文网 Spring Cloud 官方中文文档(dalston) 二.精选资料 1.翟永超-<Spring Cl ...

js之无缝轮播图

js之无缝轮播图的更多相关文章

随机推荐

热门专题