HTML标签marquee实现滚动效果

<?php
include "../library/mFunction.php";

/**************选取商品一级分类**********/
$result=mysql_query("select * from goodsOne where xian='显示' order by list desc limit 3");
while ($res = mysql_fetch_array($result)) {
$goodsOne[]=$res;
}

echo mHead();
?>
<!--头部-->
<div class="header header-fixed">
<div class="nesting"> <a href="JavaScript:;" class="header-btn header-return"><span class="return-ico"></span></a>
<div class="align-content">
<p class="align-text">曦亿腾网络科技有限公司</p>
</div>
<a href="#" class="header-btn"></a>
</div>
</div>
<!--//-->
<div class="container mui-mbottom60">
<div class="content mui-ptop45">
<!--轮播-->
<div id="slideBox" class="slideBox">
<div class="swiper-wrapper">
<div class='swiper-slide'>
<a href=''><img src='<?php echo img('soL89312338hy');?>'></a>
</div>
<div class='swiper-slide'>
<a href=''><img src='<?php echo img('soL89312338hy');?>'></a>
</div>
<div class='swiper-slide'>
<a href=''><img src='<?php echo img('soL89312338hy');?>'></a>
</div>
<div class='swiper-slide'>
<a href=''><img src='<?php echo img('soL89312338hy');?>'></a>
</div>
</div>
<div class="swiper-pagination"> </div>
</div>
<!--//-->
</div>
<!--产品列表-->
<!--产品导航-->

<!---->
<div class="product">
<!--类别-->
<div class="row product">
<?php
//循环一级分类
foreach($goodsOne as $key =>$value){
?>
<div class="key_title"><?php echo $value['name'];?></div>
<ul class="product-lists mui-dis-flex">
<?php
//循环一级分类产品
$result=mysql_query("select * from goods where goodsOneId='$value[id]'and xian='显示' order by list desc limit 6");
$goods=array();
while($res = mysql_fetch_array($result))
{
$goods[]=$res;
}

foreach($goods as $k=>$v){
$goodsSku = query('goodsSku', "goodsId='$v[id]'");

?>
<li>
<a href="<?php echo root;?>m/mGoodsMx.php?goodsId=<?php echo $v[id];?>">
<img src="<?php echo $root.$v['ico'];?>"/>
<p class="nameSpc"><?php echo $v['name'];?></p>
<p class="textSale">
<em class="text-price">￥<?php echo $goodsSku['price'];?></em>
<!--<em class="text-sale">销量:60</em> -->
</p>
</a>
</li>
<?php } ?>

</ul>
<?php } ?>

<!--//-->
</div>
<!--回到顶部-->
<a href="javascript:;" title="回到顶部" id="gotop-btn"><img src="<?php echo img('ffJ89313313Ft');?>"/></a>
<!--//-->
</div>
<!--底部-->
<?php echo warn().mFooter();?>
<!--//-->
<script>
$(function(){
/****导航栏变色***/
changeNav();
});
/****首页轮播****/
window.addEventListener("load", function(e) {
// 首页轮播图
var swiperObj = new Swiper('#slideBox', {
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: true,
pagination: '.swiper-pagination',
});
}, false);
/****回到顶部****/
window.onload=function(){
var gotop_btn = document.getElementById("gotop-btn");//获取回到顶部按钮ID
var clientHeight = document.documentElement.client;//获取可视区域的高度
var timer = null;//定义一个定时器
var isTop = true;//定义一个布尔值，判断是否到达顶部

window.onscroll = function(){ //滚动事件
//获取滚动条的滚动高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;

//判断回到顶部按钮的显示与隐藏
if(osTop > 0){
gotop_btn.style.display = "block";
}else{
gotop_btn.style.display = "none";
}

//主要用于判断当 点击回到顶部按钮后 滚动条在回滚过程中，若手动滚动滚动条，则清除定时器
if(!isTop){
clearInterval(timer);
}
isTop = false;
}

//回到顶部点击事件
gotop_btn.onclick = function(){
//设置一个定时器
timer = setInterval(function(){
//获取滚动条的高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
//用于设置速度差 用于产生缓存效果
var speed = Math.floor(-osTop / 8);
document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
isTop =true; //用于阻止滚动事件清除定时器
if(osTop == 0){
clearInterval(timer);
}
},30);
}
}
</script>