文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JS实现图片轮播跑马灯

2024-04-02 19:55

关注

本文实例为大家分享了JS实现图片轮播跑马灯的具体代码,供大家参考,具体内容如下

实现原理:

1、准备一个展示区域的盒子,设置宽高;
2、准备一个存放所有图片的盒子,将所有图片依次放入,设置溢出隐藏

一、HTML布局

<div class="wrapper">
<div id="container"><!--图片展示区域盒子-->
  <ul id="imglist"><!--将所有图片并列展示盒子-->
     <li>
        <img src="./img/banner.jpg" alt="暂无图片">
     </li>
     <li>
       <img src="./img/banner0.jpg" alt="暂无图片">
     </li>
     <li>
        <img src="./img/banner.jpg" alt="暂无图片">
     </li>
     <li>
        <img src="./img/banner0.jpg" alt="暂无图片">
     </li>
  </ul>
  <ul id="point">
    <li class="selected"></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</div>

二、CSS样式

.wrapper{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 870px;
}
#container{
    width: 1920px;
    height: 870px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    background-color: #aa201c;
}
#imglist{
    width: 7680px;
    height: 870px;
    list-style-type: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#imglist>li{
    width: 1920px;
    height: 870px;
    float: left;
    overflow: hidden;
}
#point{
    list-style-type: none;
    position: absolute;
    bottom: 5px;
    left: 50%;
    
    
    width: 100%;
    height: 29px;
    line-height: 29px;
    z-index: 10;
}
#point>.selected{
    background-color: #aa201c;
}
#point>li{
    width: 16px;
    height: 16px;
    float: left;
    background-color: #c5c8ce;
    border-radius: 100%;
    margin-right: 10px;
    -webkit-border-radius: 100%;
}

三、JS代码

var wrap = document.getElementById("container");
var inner = document.getElementById("imglist");
var spanList = document.getElementById("point").getElementsByTagName("li");
var left = document.getElementById("left");
var right = document.getElementById("right");

var clickFlag = true;//设置左右切换标记位防止连续按
var time//主要用来设置自动滑动的计时器
var index = 0;//记录每次滑动图片的下标
var Distance = wrap.offsetWidth;//获取展示区的宽度,即每张图片的宽度
//定义图片滑动的函数
function AutoGo() {
    var start = inner.offsetLeft;//获取移动块当前的left的开始坐标
    var end = index * Distance * (-1);//获取移动块移动结束的坐标。
    //计算公式即当移动到第三张图片时,图片下标为2乘以图片的宽度就是块的left值。
    var change = end - start;//偏移量

    var timer;//用计时器为图片添加动画效果
    var t = 0;
    var maxT = 30;
    clear();//先把按钮状态清除,再让对应按钮改变状态
    if (index == spanList.length) {
        spanList[0].className = "selected";
    } else {
        spanList[index].className = "selected";
    }
    clearInterval(timer);//开启计时器前先把之前的清
    timer = setInterval(function () {
        t++;
        if (t >= maxT) {//当图片到达终点停止计时器
            clearInterval(timer);
            clickFlag = true;//当图片到达终点才能切换
        }
        inner.style.left = change / maxT * t + start + "px";//每个17毫秒让块移动
        if (index == spanList.length && t >= maxT) {
            inner.style.left = 0;
            index = 0;
            //当图片到最后一张时把它瞬间切换回第一张,由于都同一张图片不会影响效果
        }
    }, 17);
}
//编写图片向右滑动的函数
function forward() {
    index++;
    //当图片下标到最后一张把小标换0
    if (index > spanList.length) {
        index = 0;
    }
    AutoGo();
}
//编写图片向左滑动函数
function backward() {
    index--;
    //当图片下标到第一张让它返回到倒数第二张,
    //left值要变到最后一张才不影响过渡效果
    if (index < 0) {
        index = spanList.length - 1;
        inner.style.left = (index + 1) * Distance * (-1) + "px";
    }
    AutoGo();
}

//开启图片自动向右滑动的计时器
time = setInterval(forward, 3000);

//设置鼠标悬停动画停止
wrap.onmouseover = function () {
    clearInterval(time);
}
wrap.onmouseout = function () {
    time = setInterval(forward, 3000);
}
//遍历每个按钮让其切换到对应图片
for (var i = 0; i < spanList.length; i++) {
    spanList[i].onclick = function () {
        index = this.innerText - 1;
        AutoGo();
    }
}
//清除页面所有按钮状态颜色
function clear() {
    for (var i = 0; i < spanList.length; i++) {
        spanList[i].className = "";
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯