原生JS轮播图

2021-04-19 19:26

阅读：589

标签：for 20px row llb callback 代码 fir 默认 bsp

HTML代码

                div class="focus">
                    
                    a href="javascript:void(0);" class="arrow-l"> < a>
                    
                    a href="javascript:void(0);" class="arrow-r"> > a>
                    ul>
                        li>img src="upload/focus.png">li>
                        li>img src="upload/focus1.jpg">li>
                        li>img src="upload/focus2.jpg">li>
                        li>img src="upload/focus3.jpg">li>
                    ul>
                    ol class="circle">ol>
                div>

css代码

*{
    margin: 0;
    padding: 0;
}
ol{list-style: none;}
a{text-decoration: none;}
.focus{
    position: relative;
    float: left;
    width: 721px;
    height: 455px;
    background-color: blue;
    overflow: hidden;
}

.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
}

.focus ul li {
    float: left;
}

.arrow-l,
.arrow-r {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 24px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    z-index: 2;
}

.arrow-r {
    right: 0;
}

.circle {
    position: absolute;
    bottom: 10px;
    left: 50px;
}

.circle li {
    float: left;
    width: 8px;
    height: 8px;
    /*background-color: #fff;*/
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin: 0 3px;
    border-radius: 50%;
    /*鼠标经过显示小手*/
    cursor: pointer;
}

.current {
    background-color: #fff;
}

CSS Code

JavaScript代码

window.addEventListener(‘load‘,function(){
    //1.获取元素
    var arrow_l = document.querySelector(‘.arrow-l‘);
    var arrow_r = document.querySelector(‘.arrow-r‘);
    var focus = document.querySelector(‘.focus‘);
    
    //2.鼠标经过显示左右按钮
    focus.addEventListener(‘mouseenter‘,function(){
        arrow_l.style.display = ‘block‘;
        arrow_r.style.display = ‘block‘;
        //停止定时器,并清空
        clearInterval(timer);
        timer = null;
    });
    focus.addEventListener(‘mouseleave‘,function(){
        arrow_l.style.display = ‘none‘;
        arrow_r.style.display = ‘none‘;
        timer = setInterval(function(){
            //手动调用点击事件
            arrow_r.click();
        },2000);
    });
    
    //3.动态生成圆圈
    var ul = focus.querySelector(‘ul‘);
    var ol = focus.querySelector(‘ol‘);
    for(var i=0; i

){ var li = document.createElement(‘li‘); li.setAttribute(‘index‘,i); //给li绑定点击事件 li.addEventListener(‘click‘, function(){ for(var i=0; i){ ol.children[i].className = ‘‘; } this.className = ‘current‘; //点击圆点,移动图片 var index = this.getAttribute(‘index‘); //当点击某个圆点,需要把索引给num和circle num = circle = index; animate(ul, -index * focus.offsetWidth); }); ol.appendChild(li); } //第一个小圆点默认选中状态 ol.children[0].className = ‘current‘; //4. 克隆第一张图片(li)放到ul 最后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first); //5.点击右侧按钮,滚动一张图片 var num = 0; //circle 控制小圆点的播放 var circle = 0; arrow_r.addEventListener(‘click‘,function(){ //判断是否最后一张,则返回第一张图片位置 if(num == ul.children.length-1){ ul.style.left = 0; num = 0; } num++; animate(ul, -num * focus.offsetWidth); //小圆点跟随移动 circle++; circle = circle == ol.children.length? 0 : circle; //调用小圆点变换函数 circleChange(); }); //6.左侧按钮实现 arrow_l.addEventListener(‘click‘,function(){ //判断是否第一张图片,返回最后一张图片位置 if(num == 0){ num = ul.children.length-1; ul.style.left = -num * focus.offsetWidth + ‘px‘; } num--; animate(ul, -num * focus.offsetWidth); //小圆点跟随移动 circle--; circle = circle : circle; //调用小圆点变换函数 circleChange(); }); function circleChange(){ for(var i=0; i){ ol.children[i].className = ‘‘; } ol.children[circle].className = ‘current‘; } //7.自动播放 var timer = setInterval(function(){ //手动调用点击事件 arrow_r.click(); },2000); });

还有自己封装的动画函数

function animate(obj, target, callback) {
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + ‘px‘;
    }, 15);
}

animate Code

原生JS轮播图

标签：for 20px row llb callback 代码 fir 默认 bsp

原文地址：https://www.cnblogs.com/royal6/p/12267306.html

上一篇：CSS3_-webkit-font-smoothing字体抗锯齿渲染

下一篇：CSS经典布局

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：原生JS轮播图
文章链接：http://soscw.com/index.php/essay/76788.html

亲，登录后才可以留言！

原生JS轮播图

HTML代码

css代码

JavaScript代码

评论

热门文章

推荐文章

最新文章

置顶文章