導航:首頁 > 編程語言 > js圖片自動滾動

js圖片自動滾動

 發布時間：2023-07-08 03:59:20

① js如何實現圖片滑動

<script language="javascript" type="text/javascript">
//圖片滾動展示 Start
var counts = 4;
//大圖//
img1 = new Image();
img1.src = 'images/1.jpg';
img2 = new Image();
img2.src = 'images/2.jpg';
img3 = new Image();
img3.src = 'images/3.jpg';
img4 = new Image();
img4.src = 'images/4.jpg';

var smallImg = new Array();
//小圖
smallImg[0] = 'images/index_adb1.gif';
smallImg[1] = 'images/index_adb2.gif';
smallImg[2] = 'images/index_adb3.gif';
smallImg[3] = 'images/index_adb4.gif';

//鏈接地址
url1 = new Image();
url1.src = ' http://www..com';
url2 = new Image();
url2.src = ' http://www.qzxtg.com';
url3 = new Image();
url3.src = ' http://www.soso.com';
url4=new Image();
url4.src=' http://www.sina.com.cn'

//alt值
alt1 = new Image();
alt1.alt = '';
alt2 = new Image();
alt2.alt = '';
alt3 = new Image();
alt3.alt = ' ';
alt4 = new Image();
alt4.alt='';
////歡迎來到標准之路.
var nn = 1;
var key = 0;
function change_img() {
if (key == 0) {
key = 1;
} else if (document.all) {
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(ration = 2);
}
eval('document.getElementById("pic").src=img' + nn + '.src');
eval('document.getElementById("url").href=url' + nn + '.src');
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url").target = "_blank";
document.getElementById("url").style.cursor = "pointer";
} else {
document.getElementById("url").target = "_blank"
document.getElementById("url").style.cursor = "pointer"
}

for ( var i = 1; i <= counts; i++) {
document.getElementById("xxjdjj" + i).className = 'axx';
}
document.getElementById("xxjdjj" + nn).className = 'bxx';
nn++;
if (nn > counts) {
nn = 1;
}
tt = setTimeout('change_img()', 7000);
}
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
function imageshow() {
document.write('<div class="picshow_main">');
document.write('<div><a id="url"><img id="pic" class="imgbig" /></a></div>');
document.write('<div class="picshow_change">');
for ( var i = 0; i < counts; i++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ');" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>');
}
document.write('</div></div>');
change_img();
}
//圖片滾動展示 End
</script>
<script language="javascript" type="text/javascript">
imageshow();
</script>

② 圖片自動輪播圖片只往一個方向滾動，求一個原生JS程序

<!DOCTYPEHTML>
<html>
<head>
<title>JS無縫滾動圖片</title>
<metacharset=UTF-8/>
<styletype="text/css">
*{
	margin:0;
	padding:0;
}

#div2{
	margin:auto;
	width:602px;
	overflow:hidden;
	left:200px;
}

#div1{
	position:relative;
	left:0px;
	width:1200px;
}

#div1li{
	list-style-type:none;
	float:left;
	width:200px;
	height:180px;
}

img{
	width:200px;
	height:180px;
}

ul#ul1{
	position:relative;
}
</style>
<scripttype="text/javascript">
	window.onload=function()
{
	varoUl=document.getElementById('ul1');
	vart,o;
	varspeed=0;
	varfunny=function()
	{
		t&&clearInterval(t);
		t=setInterval(function()
		{
				speed-=200/11;
				if(speed<-200){
					speed=0;
					oUl.appendChild(oUl.children[0]);
					t&&clearInterval(t);
					t=null;
					o&&clearTimeout(o);
					o=setTimeout(funny,1000);
					}
			oUl.style.left=speed+"px";
		},60);
	}
		funny();
}
</script>
</head>
<body>
	<divid="div2">
		<divid="div1">
			<ulid="ul1">
				<li><imgsrc="../../images/choose.png">
				</li>
				<li><imgsrc="../../images/deck.png">
				</li>
				<li><imgsrc="../../images/el.png">
				</li>
				<li><imgsrc="../../images/list.png">
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

③ js圖片無縫滾動的原理是什麼

不斷減少圖片距離外面容器的間距，然後在間距為0的剎那將圖片重新回到初始位置。為了內不至於看出破容綻，滾動圖片要弄雙份兒，比如你需要滾動的是AB，那麼在容器里放的就是ABAB。那個外面的容器還要設置大小，然後將超出的內容隱藏。

這是我當年自己分析某人的JS圖片滾動代碼時總結的。

現在嘛都直接整jquery的插件了

④ js實現圖片左右滾動

根據樓上做了點修改，這是用jquery，所以一定要鏈接jquery庫。
<html>
<head>
<title></title>
<styletype="text/css">
body,ul,li{list-style:noneoutsidenone;padding:0;margin:0;}
#picScroll{width:350px;overflow:hidden;}
ul{width:1000%;}
ulli{float:left;}
liimg{width:100px;height:100px;}
</style>
<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>
</head>
<body>

<divid="picScroll">
<ul>
<li>
<a><imgsrc="../pic/1.jpg"/></a>
<a><imgsrc="../pic/2.jpg"/></a>
<a><imgsrc="../pic/3.jpg"/></a>
<a><imgsrc="../pic/4.jpg"/></a>
<a><imgsrc="../pic/5.jpg"/></a>
</li>
<li></li>
</ul>
</div>
<scripttype="text/javascript">
vartarget=$('#picScroll');//其實標準的寫法是var$target=$('#picScroll');
varleft=0;
varspeed=30;

varli=$('#picScrollulli');
li.eq(1).html(li.eq(0).html());//復制第一個li節點內容，賦值給第二個li目的是為了實現無限循環滾動
functionMarqeen(){
if(li[0].offsetWidth<=left){
left-=li[0].offsetWidth;
}
else{
left++;
}
target.scrollLeft(left);
}
$(function(){
varmarQueen=window.setInterval(Marqeen,speed);
target.mouseover(function(){
clearInterval(marQueen);
});
target.mouseout(function(){
marQueen=window.setInterval(Marqeen,speed);
});
});
</script>
</body>
</html>


下面是用 js 寫的，不用連接jquery庫了，可以對比一下上面的jquery代碼 

<scripttype="text/javascript">
	vartarget=document.getElementById('picScroll');
varleft=0;
varspeed=30;
	
	varLI=target.getElementsByTagName('li');
	LI[1].innerHTML=LI[0].innerHTML;
functionMarqeen(){
		
if(LI[0].offsetWidth<=left){
left-=LI[0].offsetWidth;
}
else{
left++;
}
target.scrollLeft=left;
}
		
	varmarQueen=window.setInterval(Marqeen,speed);
	target.mouseover=function(){
		clearInterval(marQueen);
	};
	target.mouseout=function(){
		marQueen=window.setInterval(Marqeen,speed);};
</script>

⑤ JS 圖片滾動怎麼做 求代碼

<SCRIPT language=JavaScript>
function marquee1()
{
document.write("<div style='width:100%;overflow:hidden;' id=marquee onmouseover=clearInterval(repeat) onmouseout=repeat=setInterval(scrollMarquee,1)>")
}
function marquee2()
{
document.write("</div>")
marquee.childNodes[0].align='left';

if(marquee.childNodes[0].offsetWidth>marquee.offsetWidth) {
marquee.appendChild(marquee.childNodes[0].cloneNode(true));
}
else {
for(var i=0;i<Math.round(marquee.offsetWidth/marquee.childNodes[0].offsetWidth)+1;i++) {
marquee.appendChild(marquee.childNodes[0].cloneNode(true));
}
}
repeat=setInterval(scrollMarquee,1);
}
function scrollMarquee() {
if(marquee.scrollLeft<marquee.childNodes[0].offsetWidth)
marquee.scrollLeft++;
else
marquee.scrollLeft=0;
}
</SCRIPT>

<SCRIPT language=JavaScript>marquee1();</SCRIPT>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>

<td><a href=/picture/00000133.asp target=_blank ><img border=0 height=67 src="http://www.51sql.com/articleimg/gundong1.jpg" alt="圖片" ></a></td>

<td><a href=/picture/00000132.asp target=_blank ><img border=0 height=67 src="http://www.51sql.com/articleimg/gundong2.jpg" alt="圖片7" ></a></td>

<td><a href=/picture/00000131.asp target=_blank ><img border=0 height=67 src="http://www.51sql.com/articleimg/gundong3.jpg" alt="圖片6" ></a></td>

<td><a href=/picture/00000130.asp target=_blank ><img border=0 height=67 src="http://www.51sql.com/articleimg/gundong4.gif" alt="圖片5" ></a></td>

<td><a href=/picture/00000129.asp target=_blank ><img border=0 height=67 src="http://www.51sql.com/articleimg/gundong4.gif" alt="圖片4" ></a></td>

<td><a href=/picture/00000128.asp target=_blank ><img border=0 height=67 src="http://www.51sql.com/articleimg/gundong3.jpg" alt="圖片3" ></a></td>

<td><a href=/picture/00000127.asp target=_blank ><img border=0 height=67 src="http://www.51sql.com/articleimg/gundong2.jpg" alt="圖片2" ></a></td>

<td><a href=/picture/00000126.asp target=_blank ><img border=0 height=67 src="http://www.51sql.com/articleimg/gundong1.jpg" alt="圖片1" ></a></td>

</tr>
</table>
<SCRIPT language=JavaScript>marquee2(); </SCRIPT>

⑥ JavaScript代碼實現圖片循環滾動效果

1.概述
循環滾動圖片，不僅可以增添Web頁面的動態效果，而且可以節省頁面空間，有效地保證在有限的頁面中顯示更多的圖片。
2.技術要點
主要應用setTimeout()方法實現圖片的循環滾動效果。setTimeout()方法的語法格式如下：
setTimeout（function,milliseconds,[arguments]）
參數說明：
a.
function：要調用的JavaScript自定義函數名稱。
b.
Milliseconds：設置超時時間（以毫秒為單位）。
功能：經過超時時間後，調用函數。此值可以用clearTimeout()函數清除。
3.具體實現
（1）在頁面的合適位置添加一個id屬性為demo的<div>標記，並在該標記中添加表格及要要滾動顯示的圖片。關鍵代碼如下：
<div
id="demo"
style="
overflow:
hidden;
width:
455px;
height:
166px;">
<table
border="0"
cellspacing="0"
cellpadding="0">
<tr>
<td
valign="top"
id="marquePic1">
<!--
要循環滾動的圖片
-->
<table
width="455"
border="0"
align="center"
cellpadding="0"
cellspacing="0"
>
<tr
align="center">
<%for(int
i=1;i<8;i++){%>
<td>
<img
src="Images/<%=i%>.jpg"
width="118"
height="166"
border="1">
</td>
<%}%>
</tr>
</table>
</td>
<td
id="marquePic2"
width="1"></td>
</tr>
</table>
</div>
（2）編寫自定義的JavaScript函數move()，用於實現無間斷的圖片循環滾動效果。speed數值越大圖片滾動的越快，具體代碼如下：
<script
language="javascript">
var
speed=30
;
//設置間隔時間
marquePic2.innerHTML=marquePic1.innerHTML;
var
demo=document.getElementById("demo");
//獲取demo對象
function
Marquee(n){
//實現圖片循環滾動的方法
if(marquePic1.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft=0;
}
else{
demo.scrollLeft=demo.scrollLeft+n;
}
}
var
MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function()
{
//停止滾動
clearInterval(MyMar);
}
demo.onmouseout=function()
{
//繼續滾動
MyMar=setInterval("Marquee(5)",speed);
}
</script>
以上所述是小編給大家介紹的JavaScript代碼實現圖片循環滾動效果的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

⑦ 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>

<!--end 內容-->
</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>

閱讀全文

與js圖片自動滾動相關的資料

熱點內容
網路評選一般有哪些 瀏覽：476
2021三支一扶報名數據在哪裡看 瀏覽：914
網路未備案怎麼打得開 瀏覽：987
計算機程序用什麼編程語言 瀏覽：324
linux入門常用命令 瀏覽：497
江寧區哪裡有數控編程培訓 瀏覽：778
java寫一個shape形狀類 瀏覽：744
win7如何設置word背景顏色 瀏覽：484
如何創造電腦編程語言 瀏覽：56
昂達平板電腦圖形密碼忘記怎麼辦 瀏覽：92
組織文件內容是什麼 瀏覽：183
0基礎如何學習智能編程 瀏覽：366
java程序員全攻略下載 瀏覽：715
網路逆向教程 瀏覽：135
iso文件如何重裝系統 瀏覽：750
ghost鏡像文件路徑如何恢復 瀏覽：832
搭建網站需要多少錢啊 瀏覽：599
編程貓怎麼設置背景亮度 瀏覽：177
qq文件破損 瀏覽：414
javapoi配置 瀏覽：608

友情鏈接