js实现文字无间断左右滚动和图片左右滚动

var MyMar=setInterval(Marquee,speed);
scroll_div.onmouseover=function() {clearInterval(MyMar);}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
}
</script>
<div id="gongao">
<div style="width:900px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div">
<div id="scroll_begin">
${affiche.content} ${affiche.content} ${affiche.content}
${affiche.content} ${affiche.content} ${affiche.content}
</div>
<div id="scroll_end"></div>
</div>
<script type="text/javascript">ScrollImgLeft();</script>
</div>

//实现图片左右滚动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XuLinJie_</title>
<!--<link href="js图片滚动.css" type="text/css" rel="stylesheet">
<script src="js图片滚动.js"></script>-->
</head>
<style>
*{
margin: 0px 0px;
padding:0px 0px;
}
.scroll_div {
width:100%;
height:400px;
margin:0 0;
overflow: hidden;
white-space: nowrap;
background:#ffffff;
}
.scroll_div img {
width:100%;
height:400px;
}
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{
display:inline;
}/*设置ul和li横排*/
</style>
<body>
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><a href="#"><img src="../assets/i/banner.png"></a></li>
<li><a href="#"><img src="../assets/i/picture.png"></a></li>
<li><a href="#"><img src="../assets/i/banner.png"></a></li>
<li><a href="#"><img src="../assets/i/picture.png"></a></li>
<li><a href="#"><img src="../assets/i/banner.png"></a></li>
<li><a href="#"><img src="../assets/i/picture.png"></a></li>
<li><a href="#"><img src="../assets/i/banner.png"></a></li>
<li><a href="#"><img src="../assets/i/picture.png"></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
<!--#####滚动区域#####-->

<script type="text/javascript">
ScrollImgLeft();
function ScrollImgLeft(){
var speed=10;
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.onmouseover=function()
{
clearInterval(MyMar);
}
scroll_div.onmouseout=function()
{
MyMar=setInterval(Marquee,speed);
}
}
</script>
</body>
</html>

时间: 2024-11-05 20:26:23

js实现文字无间断左右滚动和图片左右滚动的相关文章

JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容. 重要属性: 1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee direct

jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

javascript实现图片无缝滚动-------Day 27

今天感冒变严重了,鼻涕止不住啊,一卷卫生纸就这样报废了,还是不想吃药,熬熬总能熬过去吧,状态不是很好,看这么个小应用竟然看了很久的时间,到最后才像猛的明白了一样,而且查着好像有好几种做法的,今天先说说这种吧,比较好理解额. 所谓"图片无缝滚动",我们可以这样来理解,如果只用marquee,则需要尾部也离开容器了,头部才能从头部另一端出现,重新进行滚动,如是进行循环,而无缝滚动,就是说一种首尾相连的效果,头部是咬在尾部上的,尾部全部漏出来后,后面紧挨着显示头部的部分,这样首尾相连进行的滚

JS图片无间断滚动代码合集

JavaScript图片滚动代码合集,向上下左右四个方向的无缝滚动代码,前端设计开发时所能用的一个图片特效,你可只用其中的一种滚动.前端框架分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1

JavaScript js无间断滚动效果 scrollLeft方法 使用模板

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> 无间断滚动scrollLeft套用模板 </title> <meta name="Keywords" content=""> <meta name="Description" content=""

IOS实现文字水平无间断滚动

IOS实现文字水平无间断滚动 IOS跑马灯效果,实现文字水平无间断滚动,示例代码如下: ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer *timer; UIScrollView *scrollViewText; } @property (nonatomic ,strong) NSArray *arrData; @end ViewController.m

无间断滚动的新闻文章列表

<!--Quirks Mode--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

js实现文字字幕滚动

<div class="dggd_r" id="h" style="height:400px;overflow:hidden;display:inline;float:left;">                <ul id="h1">                    <li><a href="#">SD卡雷锋精神的路口附近?</a><

javascript -- (无间断滚动图片)

无间断滚动图片 --原理(定时器 每隔.1秒调用一次滚动的函数) /***body**/ <div id="wrap"> <div id="box"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg