首页 > 代码库 > 实现图片的循环滚动——JS的简单应用

实现图片的循环滚动——JS的简单应用

2024-09-15 08:27:59   217人阅读

首先默认都了解JS的循环分支运算符等基本语法

用CSS实现简单的布局也是会的。

然后我们就可以来了解一下

[DOM 树节点]
它分为三大类：元素节点、文本节点、属性节点
文本节点跟属性节点为元素节点的两个子节点。它有什么用呢，我们得取到节点，然后才能通过节点来设置节点的属性，修改样式。
[查看节点]
1.getElementById("div1")通过id获取唯一节点:多个同名ID只会取第一个
2.getElementsByName()通过Name取到一个数组，包含一到多个节点
使用方式，通过循环，取到每个节点。循环次数，从零开始<数组.length
getElementsByClassName()与getElementsByTagName取到的都是数组，用法同getElementsByName()
示例：
function getById(){
            //取到属性节点
            //    var divById = document.getElementById("div1").style;
                //取到元素节点
                var divById = document.getElementById("div1");
                //divById.style.backgroundColor = "blueviolet";//节点属性用小驼峰命名
                divById.style.color="green";
                divById.innerHTML="<h5>cherishLi</h5>";//重置修改div里的中的HTML代码
                if(divById.style.backgroundColor == "blue"){
                    divById.style.backgroundColor = "red";
                }
                else{
                    divById.style.backgroundColor = "blue";
                }

一个windows常用的方法我么这里也能用到，而且是最关键的，那就是设置定时器

setInterval:设置定时器，循环每隔N毫秒执行一次
两个参数：需要执行的 function，毫秒数
示例：
var num =10;
        var out=setInterval(function(){
            document.write(num+"<br/>");
            num--;
            if(num==0){
                clearInterval(out);
            }
        },1000)

还有两个很关键的属性，我们要用到：

1.innerHTML属性：设置或者获取节点内部的所有Html代码
2. innerText：设置或者获取节点内部的所有文字
下面是这次主要要实现的功能：首先做一块区域，在里面放下你所需要滚动的图（当然图片大小是一样的，图自己找喽）
<section id="banner">
            <div id="inside">
                <img src="../img/12168431_1036060226444795_851404817_o_z1lzd7.jpg"/>
                <img src="../img/12388071_1065320530185431_2076280306_n_g93ygx.jpg"/>
                <img src="../img/12656432_1094243637293120_49905962_o_dk24or.jpg"/>
                <img src="../img/12903800_1136073019776848_60542799_o_rewsfx.jpg"/>
                <img src="../img/12910198_1136068819777268_2019684994_n_shntwd.jpg"/>
            </div>
            
        </section>

然后设置一下样式（如何在只能显示四张图的区域放下十张图）

*{
                margin: 0px;
                padding: 0px;
            }
            #banner{
                width: 440px;
                height: 110px;
                overflow: hidden;
                white-space: nowrap;
            }
            #inside{
                width: 1100px;
                height: 110px;
                position: relative;
                white-space: nowrap;
                transition: all 0.5s ease;

            }
            #inside img{
                float: left;
            }

最后是JS代码,应该已经很明了了。每隔1s滚动100px，滚完5张，计数器清零。

var manyImg= document.getElementById("inside");
        manyImg.innerHTML=manyImg.innerHTML+manyImg.innerHTML;
//        console.log(manyImg.innerHTML=manyImg.innerHTML+manyImg.innerHTML);
        var i=0;
        var gun = setInterval(function(){
            i++;
            manyImg.style.transition="all 0.5s ease";
            switch (i){
                    case 1:
                        manyImg.style.transition="none";
                        inside.style.marginLeft = 0+"px";
                        break;
                    case 2:
                        inside.style.marginLeft = (-110)+"px";
                        break;
                    case 3:
                        inside.style.marginLeft = (-110-110)+"px";
                        break;
                    case 4:
                        inside.style.marginLeft = (-110-110*2)+"px";
                        break;
                    case 5:
                        inside.style.marginLeft = (-110-110*3)+"px";
                        break;
                    case 6:
                        
                        inside.style.marginLeft = (-110-110*4)+"px"
                        i = 0;
                        break;
                    case 7:
                        inside.style.marginLeft = (-110-110*5)+"px";
                        
                        break;
                    case 8:
                        inside.style.marginLeft = (-110-110*6)+"px";
                        break;
                    case 9:
                        inside.style.marginLeft = (-110-110*7)+"px";
                        break;
                    case 10:
                        inside.style.marginLeft = (-110-110*8)+"px";
                        break;
                    case 11:
                        inside.style.marginLeft = (-110-110*9)+"px";
                        
                        break;
                    default:
                        break;
                }
            
        },1000)

 如果需要加上数字按钮控制对应的图片，只需用ul或者div做好按钮，加上一个函数控制就行

<ul id="bannerNumber">
                <li onclick="changeBan(1)">1</li>
                <li onclick="changeBan(2)">2</li>
                <li onclick="changeBan(3)">3</li>
                <li onclick="changeBan(4)">4</li>
  </ul>
function changeBan(num1){
            switch(num1){
                    case 1:
                        inside.style.marginLeft = 0+"px";
                        break;
                    case 2:
                        inside.style.marginLeft = (-110)+"px";
                        break;
                    case 3:
                        inside.style.marginLeft = (-110-110)+"px";
                        break;
                    case 4:
                        inside.style.marginLeft = (-110-110*2)+"px";
                        break;
                    case 5:
                        inside.style.marginLeft = (-110-110*3)+"px";
                        break;
            }
            i=num1-1;
        }

效果可以自己实践一下=。=，这里就不插图了

 

实现图片的循环滚动——JS的简单应用


联系
我们