jscss3图片上下滚动_网页中的滚动图片的代码怎么写

① 怎么用js脚本使多张图片滚动

推荐使用<marquee>实现图片滚动,示例:
<marquee
scrolldelay="100"
direction="up"
onmouseover="this.stop()"
onmouseout="this.start()"><img
src="xxxxxxx"></marquee>
其中scrolldelay="100"
===>指滚动延迟时间,单位是毫秒ms,默认为90ms
direction="up"
===>指滚动方向,默认从左往右,可取的值为:up,down,left,right
onmouseover="this.stop()"
===>指鼠标悬停在图片上时,图片静止
onmouseout="this.start()"
===>指鼠标离开图片时,图片运动
希望对您有所帮助

② 怎么用html5+css3 实现图片轮播

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

③ 网页中的滚动图片的代码怎么写

网页中的滚动图片的代码有上下左右四个方向，分别是：

<head>

<----->

</head>

<body>

<！--向上滚动代码开始-->

</div>

</div>

var speed=30;

var colee2=document.getElementById("colee2");

var colee1=document.getElementById("colee1");

var colee=document.getElementById("colee");

colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2

function Marquee1(){

//当滚动至colee1与colee2交界时

if(colee2.offsetTop-colee.scrollTop<=0){

colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端

}else{

colee.scrollTop++

}

var MyMar1=setInterval(Marquee1,speed)//设置定时器

//鼠标移上时清除定时器达到滚动停止的目的

colee.onmouseover=function() {clearInterval(MyMar1)}

//鼠标移开时重设定时器

colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}

</script>

</div>

</div>

var speed=30

var colee_bottom2=document.getElementById("colee_bottom2");

var colee_bottom1=document.getElementById("colee_bottom1");

var colee_bottom=document.getElementById("colee_bottom");

colee_bottom2.innerHTML=colee_bottom1.innerHTML

colee_bottom.scrollTop=colee_bottom.scrollHeight

function Marquee2(){

if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)

colee_bottom.scrollTop+=colee_bottom2.offsetHeight

else{

colee_bottom.scrollTop--

}

var MyMar2=setInterval(Marquee2,speed)

colee_bottom.onmouseover=function() {clearInterval(MyMar2)}

colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}

</script>

</tr>

</table>

</td>

</tr>

</table>

</div>

//使用div时，请保证colee_left2与colee_left1是在同一行上.

var speed=30//速度数值越大速度越慢

var colee_left2=document.getElementById("colee_left2");

var colee_left1=document.getElementById("colee_left1");

var colee_left=document.getElementById("colee_left");

colee_left2.innerHTML=colee_left1.innerHTML

function Marquee3(){

if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度

colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度

else{

colee_left.scrollLeft++

}

var MyMar3=setInterval(Marquee3,speed)

colee_left.onmouseover=function() {clearInterval(MyMar3)}

colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}

</script>

</tr>

</table>

</td>

</tr>

</table>

</div>

var speed=30//速度数值越大速度越慢

var colee_right2=document.getElementById("colee_right2");

var colee_right1=document.getElementById("colee_right1");

var colee_right=document.getElementById("colee_right");

colee_right2.innerHTML=colee_right1.innerHTML

function Marquee4(){

if(colee_right.scrollLeft<=0)

colee_right.scrollLeft+=colee_right2.offsetWidth

else{

colee_right.scrollLeft--

}

var MyMar4=setInterval(Marquee4,speed)

colee_right.onmouseover=function() {clearInterval(MyMar4)}

colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}

</script>

(3)jscss3图片上下滚动扩展阅读：

代码就是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、便于识别与记忆、力求短小与格式统一以及容易修改等。源代码是代码的分支，某种意义上来说，源代码相当于代码。

现代程序语言中，源代码可以书籍或磁带形式出现，但最为常用格式是文本文件，这种典型格式的目的是为了编译出计算机程序。计算机源代码最终目的是将人类可读文本翻译成为计算机可执行的二进制指令，这种过程叫编译，它由通过编译器完成。

源代码（也称源程序），是指一系列人类可读的计算机语言指令。

源代码是相对目标代码和可执行代码而言的。源代码就是用汇编语言和高级语言写出来的地代码。目标代码是指源代码经过编译程序产生的能被cpu直接识别二进制代码。可执行代码就是将目标代码连接后形成的可执行文件，当然也是二进制的。

在现代程序语言中，源代码可以是以书籍或者磁带的形式出现，但最为常用的格式是文本文件，这种典型格式的目的是为了编译出计算机程序。计算机源代码的最终目的是将人类可读的文本翻译成为计算机可以执行的二进制指令，这种过程叫做编译，通过编译器完成。

④ 怎样用JS实现图片上下滚动

问的不是很清楚哦,上下是指从上到下,从下到上,上去了再下来,还是什么,
JS控件专图属片移动,无非常是setInterval,setTimeout来控件图片的位置,
示例代码:
<img src="a.jpg" style="position:absolute; top:0px; left:40%;" id="movpic">
<script>
var obj = document.getElementById("movpic");
var tops=0;
function movs1()
{tops+=5;<br/>obj.style.top = tops;<br/>}
setInterval('movs1()',500);
</script>

⑤ 求JS控制的图片由下向上滚动代码，需要滚动一次停留几秒的

使用jquery吧，很容易解决注意要包含jquery.js，网上下载吧，很多的。具内体实现如下：容
<script src="jquery.js"></script>
<script>
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',2000);
)};
</script>

<div id="scrollDiv">
<ul>
<li>滚动内容</li>
</ul>
</div>

⑥ 求一段js按钮控制图片上下滚动的代码。

代码：
var arrowImageHeight = 35; // Height of arrow image in pixels;
var displayWaitMessage=true; // Display a please wait message while images are loading?

var previewImage = false;
var previewImageParent = false;
var slideSpeed = 0;
var previewImagePane = false;
var slideEndMarker = false;
var galleryContainer = false;
var imageGalleryCaptions = new Array();
function getTopPos(inputObj)
{

var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
return returnValue;
}

function getLeftPos(inputObj)
{

var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}

function showPreview(newSrc,imageIndex)
{
if(!previewImage){
var images = document.getElementById('previewPane').getElementsByTagName('IMG');
if(images.length>0){
previewImage = images[0];
}else{
previewImage = document.createElement('IMG');
document.getElementById('previewPane').appendChild(previewImage);
}

}
if(displayWaitMessage){
document.getElementById('waitMessage').style.display='inline';
}
document.getElementById('largeImageCaption').style.display='none';
previewImage.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
previewImage.src = newSrc;

}
function hideWaitMessageAndShowCaption(imageIndex)
{
document.getElementById('waitMessage').style.display='none';
document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
document.getElementById('largeImageCaption').style.display='block';

}
function initSlide(e)
{
if(document.all)e = event;

if(this.src.indexOf('over')<0)this.src = this.src.replace('.gif','-over.gif');

slideSpeed = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop) - getTopPos(this);
if(this.src.indexOf('down')>=0){
slideSpeed = (slideSpeed)*-1;
}else{
slideSpeed = arrowImageHeight - slideSpeed;
}
slideSpeed = Math.round(slideSpeed * 10 / arrowImageHeight);
}

function stopSlide()
{
slideSpeed = 0;
this.src = this.src.replace('-over','');
}

function slidePreviewPane()
{
if(slideSpeed!=0){
var topPos = previewImagePane.style.top.replace(/[^\-0-9]/g,'')/1;

if(slideSpeed<0 && slideEndMarker.offsetTop<(previewImageParent.offsetHeight - topPos)){
slideSpeed=0;

}
topPos = topPos + slideSpeed;
if(topPos>0)topPos=0;

previewImagePane.style.top = topPos + 'px';

}
setTimeout('slidePreviewPane()',30);
}

function revealThumbnail()
{
this.style.filter = 'alpha(opacity=100)';
this.style.opacity = 1;
}

function hideThumbnail()
{
this.style.filter = 'alpha(opacity=50)';
this.style.opacity = 0.5;
}

function initGalleryScript()
{
previewImageParent = document.getElementById('theImages');
previewImagePane = document.getElementById('theImages').getElementsByTagName('DIV')[0];
previewImagePane.style.top = '0px';
galleryContainer = document.getElementById('galleryContainer');
var images = previewImagePane.getElementsByTagName('IMG');
for(var no=0;no<images.length;no++){
images[no].onmouseover = revealThumbnail;
images[no].onmouseout = hideThumbnail;
}
slideEndMarker = document.getElementById('slideEnd');

document.getElementById('arrow_up_image').onmousemove = initSlide;
document.getElementById('arrow_up_image').onmouseout = stopSlide;

document.getElementById('arrow_down_image').onmousemove = initSlide;
document.getElementById('arrow_down_image').onmouseout = stopSlide;
var divs = previewImageParent.getElementsByTagName('DIV');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
}
slidePreviewPane();

}

window.onload = initGalleryScript;

⑦ js实现图片自动的滚动效果

把你的代码放在“内容”中间就可以了宽度600px，你自己可以改宽度
<DIV id=demoleft style="OVERFLOW: hidden; WIDTH:600px;">
<TABLE border="0" align="left" cellPadding="0" cellSpacing="0" cellspace="0">
<TBODY>
<TR>
<TD width="600" align=middle vAlign=top id=demo1left>

<table width="600" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<%
set rs=server.CreateObject("adodb.recordset")
rs.open "select top 8 * from cp_aboutus where userid="&hid&" order by updatetime desc,articleid desc ",conn,1,1
if not rs.eof then
dim hang
hang = 0
do while not rs.eof
hang = hang + 1
%>
<td>
<table width="110" height="115" border="0" align="center" cellpadding="0" cellspacing="0" id="table12">
<tr>
<td width="110" height="87"><%if rs("headpic")<>"" then%><a href="huicpshow.asp?hid=<%=hid%>&id=<%=rs("articleid")%>" title="<%=rs("title")%>" target="_blank"><img src="<%=rs("headpic")%>" width="110" height="87" border="0" /></a><%else response.Write "<table width=110 height=87 border=0 cellpadding=0 cellspacing=0><tr><td height=23 bgcolor=#EBEBEB align=center>暂无图片</td></tr></table>" end if%></td>
</tr>

<tr>
<td align="center"><a href="huicpshow.asp?hid=<%=hid%>&id=<%=rs("articleid")%>" title="<%=rs("title")%>" target="_blank"><%=rs("title")%></a></td>
</tr>
</table>
</td>
<%
rs.movenext
loop
end if
rs.close
set rs=nothing
%>
</tr>
</table>


</TD>
<TD width="102" vAlign=top id=demo2left></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<SCRIPT>
var speed=18//速度数值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值
var demoleft = document.getElementById("demoleft");
var demo2left = document.getElementById("demo2left");
var demo1left = document.getElementById("demo1left");
demo2left.innerHTML=demo1left.innerHTML
function Marquee(){
if(demo2left.offsetWidth-demoleft.scrollLeft<=0)//其实demo.scrollLeft是有最大值的，和demo0.width,引用的图片的width有关系。demo过了一半（每半内容一样的），重新开始循环
demoleft.scrollLeft-=demo1left.offsetWidth
else{
demoleft.scrollLeft++//不断的增加，相当于父容器的滚动条不断是缩小；但由于OVERFLOW: hidden; （滚动条不可见）
}
}
var MyMarleft=setInterval(Marquee,speed)
demoleft.onmouseover=function() {clearInterval(MyMarleft)}
demoleft.onmouseout=function() {MyMarleft=setInterval(Marquee,speed)}
</SCRIPT>

导航:首页 > 编程语言 > jscss3图片上下滚动

jscss3图片上下滚动

与jscss3图片上下滚动相关的资料

友情链接