首先我们需要一个html代码的框架如下：















我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容应该是动态的。于是应该发送ajax来进行内容的获取拼接。
$.ajax({

type:"post",

dataType:"json",

url:"${contextPath}/indexPage/getSyNoticeInfo",

success:function(result){

var totalStr = "";

if(result.length>0){

for(var i=0 ; i
str = "
  • "+

    ""+result[i].peopleName+""+

    "
    • ";

    totalStr +=str;

    }

    }

    $("#syNoticeUlNew").empty();

    $('#syNoticeUlNew').html(totalStr);

    syRunHorseLight();

    }

    });
    $.ajax({

    type:"post",

    dataType:"json",

    url:"${contextPath}/indexPage/getSyNoticeInfo",

    success:function(result){

    var totalStr = "";

    if(result.length>0){

    for(var i=0 ; i
    str = "
  • "+

    ""+result[i].peopleName+""+

    "
    • ";

    totalStr +=str;

    }

    }

    $("#syNoticeUlNew").empty();

    $('#syNoticeUlNew').html(totalStr);

    syRunHorseLight();

    }

    });拼接li时候有个class为sstzNoticeStyle。其样式如下：
    .sstzNoticeStyle{

    color:white; font-size:16px;text-decoration:none;
    }
    .sstzNoticeStyle:hover{

    color:white; font-size:16px;text-decoration:none;
    }
    .sstzNoticeStyle{

    color:white; font-size:16px;text-decoration:none;
    }
    .sstzNoticeStyle:hover{

    color:white; font-size:16px;text-decoration:none;
    }ajax调用syRunHorseLight函数，函数如下：
    function syRunHorseLight() {

    if (syTimer != null) {

    clearInterval(syTimer);

    }

    var oUl = document.getElementById("syNoticeUlNew");

    if(oUl != null){

    oUl.innerHTML += oUl.innerHTML;

    oUl.innerHTML += oUl.innerHTML;

    oUl.innerHTML += oUl.innerHTML;

    var lis = oUl.getElementsByTagName('li');

    var lisTotalWidth = 0;

    var resetWidth = 0;

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

    lisTotalWidth += lis[i].offsetWidth;

    }

    for (var i = 1; i <= lis.length / 4; i++) {

    resetWidth += lis[i].offsetWidth;

    }

    oUl.style.width = lisTotalWidth + 'px';

    var left = 0;

    syTimer = setInterval(function() {

    left -= 1;

    if (left <= -resetWidth) {

    left = 0;

    }

    oUl.style.left = left + 'px';

    }, 20)

    $("#syNoticeUlNew").hover(function() {

    clearInterval(syTimer);

    }, function() {

    clearInterval(syTimer);

    syTimer = setInterval(function() {

    left -= 1;

    if (left <= -resetWidth) {

    left = 0;

    }

    oUl.style.left = left + 'px';

    }, 20);

    })

    }

    }
    function syRunHorseLight() {

    if (syTimer != null) {

    clearInterval(syTimer);

    }

    var oUl = document.getElementById("syNoticeUlNew");

    if(oUl != null){

    oUl.innerHTML += oUl.innerHTML;

    oUl.innerHTML += oUl.innerHTML;

    oUl.innerHTML += oUl.innerHTML;

    var lis = oUl.getElementsByTagName('li');

    var lisTotalWidth = 0;

    var resetWidth = 0;

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

    lisTotalWidth += lis[i].offsetWidth;

    }

    for (var i = 1; i <= lis.length / 4; i++) {

    resetWidth += lis[i].offsetWidth;

    }

    oUl.style.width = lisTotalWidth + 'px';

    var left = 0;

    syTimer = setInterval(function() {

    left -= 1;

    if (left <= -resetWidth) {

    left = 0;

    }

    oUl.style.left = left + 'px';

    }, 20)

    $("#syNoticeUlNew").hover(function() {

    clearInterval(syTimer);

    }, function() {

    clearInterval(syTimer);

    syTimer = setInterval(function() {

    left -= 1;

    if (left <= -resetWidth) {

    left = 0;

    }

    oUl.style.left = left + 'px';

    }, 20);

    })

    }

    }跑马灯效果就此实现。以上就是本文的全部内容，希望对大家的学习有所帮助。