js实现简单的轮播图效果

客官°小女子只卖身不卖艺 2022-01-27 02:19 231阅读 0赞

现在大多数网站都会在页面做一个轮播效果，看着舒服，同样的内容能展示更多的内容，很方便，我在今天接触到了这个无缝轮播图，在一番调试下总算是简单实现了效果，不多说，上代码  
**html：**

<div class="top" id="top">
                    <ul id="imgs">
                        <li><img src="images/banner_1.jpg" alt=""></li>
                        <li><img src="images/banner_2.png" alt=""></li>
                        <li><img src="images/banner_3.png" alt=""></li>
                        <li><img src="images/banner_4.png" alt=""></li>
                        <li><img src="images/banner_5.png" alt=""></li>
                        <li><img src="images/banner_6.png" alt=""></li>
                        <li><img src="images/banner_7.png" alt=""></li>
                    </ul>
                    <ol id="oo">
    
                    </ol>
                    <a href="#" class="l" id="left"><</a>
                    <a href="#" class="r" id="right">></a>
    </div>

**js：**

<script src="common.js"></script>
    <script>
        var scrren = my$("top");//相框
        var imgWidth = scrren.offsetWidth;//相框的宽度
        var ulObj = my$("imgs");//ul
        var list = my$("imgs").getElementsByTagName("li");//所有的li的节点
        var olObj = my$("oo");//ol
        var btnL = my$("left");//左右两边按钮的盒子
        var btnR = my$("right");//左右两边按钮的盒子
        var index = 0;
    
        //1.创建小按钮。 根据小按钮, 切换对应的图片
        for(var i = 0 ; i < list.length; i++){
            var liObj = document.createElement("li");
            olObj.appendChild(liObj);
            liObj.setAttribute("index", i);
            liObj.onmouseover = function () {
                for(var j = 0 ; j < olObj.children.length ; j++){
                    olObj.children[j].removeAttribute("class");
                }
                this.className = "current";
                //获取对应的索引
                var picIndex = this.getAttribute("index");
                animateBian(ulObj, -picIndex * imgWidth);
                index = this.getAttribute("index");
            }
        }
        olObj.firstElementChild.className = "current";
        //2.自动播放
        //克隆一个ul的第一个图片, 添加到最后面去
        ulObj.appendChild(ulObj.children[0].cloneNode(true));
        var timer = setInterval(move, 1000);
        index = 0;
        function move() {
            if(index >= list.length-1){
                //直接跳转到第一个图片
                index = 0;
                ulObj.style.left = "0px";
            }
            index++;
            animateBian(ulObj, -index * imgWidth);
            //先干掉所有的li的背景颜色
            for(var j = 0 ; j < olObj.children.length ; j++){
                olObj.children[j].removeAttribute("class");
            }
            //判断小圆点
            if(index == list.length -1){
                olObj.children[0].className = "current";
            }else{
                olObj.children[index].className = "current";
            }
        };
        //3.鼠标移入移出
        my$("top").onmouseover = function () {
            clearInterval(timer);
        }
        my$("top").onmouseout = function () {
            timer = setInterval(move, 1000);
        }
        //4.点击两边按钮
        my$("right").onclick = function (){
            move();
            return false;
        }
    
        my$("left").onclick = function () {
            if(index == 0){
                index = list.length - 1;
                ulObj.style.left = -index * imgWidth + "px";
            }
            index--;
            animateBian(ulObj, -index * imgWidth);
            //先干掉所有的li的背景颜色
            for(var j = 0 ; j < olObj.children.length ; j++){
                olObj.children[j].removeAttribute("class");
            }
            olObj.children[index].className = "current";
            return false;
        }
    </script>

**common.js**

//变速的动画
    function animateBian(element,target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var current = element.offsetLeft;
            var step =(target-current)/10;
            step = step>0?Math.ceil(step):Math.floor(step);
            current += step;
            if (Math.abs(target - current) > Math.abs(step)){
                element.style.left = current + "px";
            } else{
                clearInterval(element.timeId);
                element.style.left = target + "px";
            }
        },50);
    }
    // 通过id名获取的元素
    function my$(id) {
        return document.getElementById(id);
    }
    
    //通过标签名获取的元素
    function ele$(element) {
        return document.getElementsByTagName(element);
    }

这个common.js 是我在学习中不断完善的一个自用的js文件，这里只放了上边代码所用到的。效果这里不做描述，刚开是写完的时候没发现什么问题，在多次实验后发现在鼠标移入原点移到指定图片，鼠标移出图片框之后，轮播还是从之前自动轮播停止的位置开始继续，在我看来这是一个瑕疵（反正我看着不舒服），那怎么办呢？  
这个情况是因为鼠标移入到原点，图片是移动了，但是所对应的index值并没有发生变化，还是自动轮播停止时的值，所以就需要我们去给index进行赋值，使它符合当前图片所对应的index，在liObj.onmouseover 中加入一句index = this.getAttribute(“index”); 这里“=”前的index是我们定义的全局变量，而后边方法中的 “index” 是我们对圆点添加的自定义属性，到这里就实现了简单的效果了。  
新手总结，如有错误，请各位多提意见！

发表评论取消回复

表情：

评论列表（有 0 条评论，231人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS实现简单的轮播图

S实现简单的轮播图 js用面向过程的方法实现简单的轮播图先写好简单的html布局；正常轮播图所要实现的功能有一下几个： 1.banner图的自动切换；...

逃离我推掉我的手/ 2024年04月18日 08:27/ 0 赞/ 15 阅读

相关 JS实现简单的轮播图

1. 用display属性的block或none控制轮播图代码如下： <!DOCTYPE HTML> <head> <met

ゝ一纸荒年。/ 2023年07月06日 06:24/ 0 赞/ 40 阅读

相关 Vue实现简单图轮播效果

1 问题描述在用vue做页面设计时，首页经常会用到图片轮播效果，在之前讲slider滑块，那么如何用swiper滑块实现图片轮播呢？ 2 算法描述滑块视图容器。其中只

淡淡的烟草味﹌/ 2022年09月16日 08:43/ 0 赞/ 148 阅读

相关 js实现简单轮播效果

html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゝ一世哀愁。/ 2022年06月09日 08:45/ 0 赞/ 157 阅读

相关 js实现简单的轮播图

html+css代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="

刺骨的言语ヽ痛彻心扉/ 2022年04月17日 03:54/ 0 赞/ 196 阅读

相关原生js实现简单轮播图效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页<

Love The Way You Lie/ 2022年04月06日 07:49/ 0 赞/ 221 阅读

相关 JS实现轮播图效果

一、用JS实现轮播图,简单分为五大步，具体看代码块注释 1.自动播放 2.鼠标进入停止播放 3.鼠标离开继续播放 4.点豆豆跳转到对应图片 5.给图片添加超

深藏阁楼爱情的钟/ 2022年03月17日 14:14/ 0 赞/ 332 阅读

相关 JS实现自动轮播图效果

现在很多网站都有轮播图，这篇文章主要为大家详细介绍了js实现轮播图的完整代码及原理，需要的小伙伴可以参考一下。轮播图主要功能： 1、图片自动轮播（主图切换同时下面导

逃离我推掉我的手/ 2022年01月27日 09:34/ 0 赞/ 653 阅读

相关 js实现简单的轮播图效果

现在大多数网站都会在页面做一个轮播效果，看着舒服，同样的内容能展示更多的内容，很方便，我在今天接触到了这个无缝轮播图，在一番调试下总算是简单实现了效果，不多说，上代码 ht

客官°小女子只卖身不卖艺/ 2022年01月27日 02:19/ 0 赞/ 232 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 588 阅读