html横向自动滚动代码,横向不间断滚动效果代码

短命女 2022-10-05 12:49 361阅读 0赞

完整DIV+CSS+JS不间断横向滚动代码：

横向不间断滚动DIV

.scroll\_div \{width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:\#ffffff;\}

.scroll\_div img \{width:120px;height:49px;border: 0;margin: auto 8px; \}

\#scroll\_begin, \#scroll\_end, \#scroll\_begin ul, \#scroll\_end ul, \#scroll\_begin ul li, \#scroll\_end ul li\{display:inline;\}/\* 设置ul和li横排 \*/

function ScrollImgLeft()\{

var speed=20

var scroll\_begin = document.getElementById("scroll\_begin");

var scroll\_end = document.getElementById("scroll\_end");

var scroll\_div = document.getElementById("scroll\_div");

scroll\_end.innerHTML=scroll\_begin.innerHTML

function Marquee()\{

if(scroll\_end.offsetWidth-scroll\_div.scrollLeft<=0)

scroll\_div.scrollLeft-=scroll\_begin.offsetWidth

else

scroll\_div.scrollLeft++

\}

var MyMar=setInterval(Marquee,speed)

scroll\_div.οnmοuseοver=function() \{clearInterval(MyMar)\}

scroll\_div.οnmοuseοut=function() \{MyMar=setInterval(Marquee,speed)\}

\}

## [DIV][]演示说明：向左滚动 ##

*  [![css-logo.gif][]][DIV]
 *  [![css-logo.gif][]][DIV]
 *  [![div css][css-logo.gif]][DIV]
 *  [![css-logo.gif][]][DIV]
 *  [![divcss][css-logo.gif]][DIV]
 *  [![css-logo.gif][]][DIV]
 *  [![css-logo.gif][]][DIV]
 *  [![css-logo.gif][]][css-logo.gif 1]

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

[DIV]: /images/20221005/219d6390cfd64d4fb8fd4e80c1c670fa.png
[css-logo.gif]: /images/20221005/ef5a2630ac2a4121a7199f3e94ce6566.png
[css-logo.gif 1]: http://wwwphp.cn/

发表评论取消回复

表情：

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

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

相关阅读

相关 css横向滚动列表

![在这里插入图片描述][20200413164239281.gif_pic_center] <ul class="video_list"> <li>

朱雀/ 2023年07月25日 08:45/ 0 赞/ 169 阅读

相关 uniapp横向滚动

<template> <view> <scroll-view scroll-x="true" calss="scroll_view">

落日映苍穹つ/ 2023年01月11日 09:12/ 0 赞/ 259 阅读

相关公告栏横向滚动

<div class="gonggao"> <i class="icon iconfont icon-laba"></i> <marquee scr

偏执的太偏执、/ 2022年12月27日 12:51/ 0 赞/ 226 阅读

相关 html横向自动滚动代码,横向不间断滚动效果代码

完整DIV+CSS+JS不间断横向滚动代码：横向不间断滚动DIV .scroll\_div \{width:600px; height:49px;margin:0 aut

短命女/ 2022年10月05日 12:49/ 0 赞/ 362 阅读

相关移动端横向滚动

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8">

朱雀/ 2022年10月02日 14:55/ 0 赞/ 200 阅读

相关 Android 横向列表GridView 实现横向滚动

[Android 横向列表GridView 实现横向滚动][Android _GridView] Android 横向列表实现，可左右滑动，如下图 ![05171621

浅浅的花香味﹌/ 2022年06月18日 02:15/ 0 赞/ 437 阅读

相关【easyui】datagrid横向滚动条自动滚动功能

在datagrid的onLoadSuccess函数中，做如下处理 //根据当前时刻，判断滚动条滑动的位置 var myDate

分手后的思念是犯贱/ 2022年06月16日 07:19/ 0 赞/ 1316 阅读

相关 RecyclerView实现横向滚动

Fruit Class public class Fruit { private int fruitImageId; //图片的ID

绝地灬酷狼/ 2022年06月11日 00:44/ 0 赞/ 309 阅读

相关 better-scroll横向不滚动

之前写过better-scroll垂直滚动遇到的问题[better-scroll不滚动/连续两次触发点击事件等问题的解决][better-scroll] 现在要实现横向滚动

短命女/ 2022年02月01日 04:39/ 0 赞/ 226 阅读

相关 JQuery实现导航效果、新闻滚动、广告效果、横向滚动

1、导航效果 2、新闻滚动（跑马灯） 3、广告效果 4、新款上市模块横向滚动 1、导航效果 ![1333441380_1207.png][]

迷南。/ 2021年09月12日 08:42/ 0 赞/ 478 阅读