美文网首页
js 自动轮播图

js 自动轮播图

作者: 云烟成雨点 | 来源:发表于2018-08-11 10:51 被阅读0次

var count= 0;

var timerBig,Ttimer;

functionautoPlay () {

    timerBig= setInterval(function() {

            count++;

            var c = 1000; //每次偏移的left

            var d = 10; //段数

            var t = 0; //存储当前步数

            var b= content.offsetLeft;//获取当前left值

            Ttimer= setInterval(function () {

                t++;

                content.style.left= b- c/ d* t+ "px";

                if (t>=d) {

                    //清除计时器

                            clearInterval(Ttimer);

                            //循环

                            if(count>=4){

                                    content.style.left= 0;

                                    count= 0;

                            }

                        //切换span的背景

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

                            if (count== i) {

                                spans[i].className= "select" 

                                } else{

                                spans[i].className= "unselect" 

                            }

                    }

        }

},50)

},2000);

}

相关文章

  • web常用库

    js retina.js 实现retina屏幕图片自动替换 slick.js jQuery插件,实现各种轮播图 w...

  • 简单轮播图(循环播放)

    效果图 原理 布局 样式 JS实现 以上就是用JS实现的自动循环轮播图,我又加上了鼠标移过停留的效果。

  • 三种样式的轮播图

    一、100%比例轮播图 HTML代码 CSS样式 js代码 二、手动箭头轮播图 三、简易轮播图

  • js 自动轮播图

    var count= 0; var timerBig,Ttimer; functionautoPlay () { ...

  • 简易轮播器、无缝轮播器

    功能:点击切换,自动切换html css js 无缝轮播器 效果图 https://blog.csdn.net/k...

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • 移动端swiper轮播图

    完整轮播图: spaceBetween:轮播图每张图之间的空格,设置为0就没有间距autoplay:自动轮播-- ...

  • 轮播图

    轮播图01 html css js

  • 项目-轮播图

    整个轮播图分为三部分:轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多,...

  • web前端学习基础教程,简单的图片旋转木马自动轮播js代码

    一款简单的图片旋转木马自动轮播js代码,图片叠加轮播切换效果,支持点击左右箭头按钮控制切换。 案例效果图 案例源码...

网友评论

      本文标题:js 自动轮播图

      本文链接:https://www.haomeiwen.com/subject/lqarbftx.html