導航:首頁 > 萬維百科 > 網頁設計如何設置圖片循環滾動
網頁設計如何設置圖片循環滾動
發布時間：2020-10-13 07:37:051、html網頁設計中，如何設置無間斷循滾動環圖片
這是我曾經寫的一個簡易二次方緩動輪播器/**
* Player 輪播器
* @param object obj
* @author [email protected]
* obj{
* frame //內容框架，position:absolute;
* lists //輪播內容節點數組，注意這個父容器的lists復寫一次,如果是ul,則ul.innerHTML+=ul.innerHTML,呈現不間斷滾動
* time //跳幀時間3000ms
*
* }
*/
function Player(obj){
this.frame=obj.frame, //內容框架
this.lists=obj.lists, //移動節點
this.time=obj.time||3000, //幀翻滾間隔
this.index=0, //初始化第一幀位置
this.step=this.lists[0].offsetHeight||0 ; //翻滾步長
this.run();
}
Player.prototype={
//跳幀
skip:function(time){
this.skipInterval&&clearInterval(this.skipInterval);
var _this=this;
var des=this.lists[this.index].relatedPosition;
var t=0;
this.skipInterval=setInterval(function(){
t+=10;
_this.frame.style.top=_this.lists[_this.index-1].relatedPosition-Math.ceil(_this.step*Math.pow(t/time,2))+"px";
if(t==time){
clearInterval(_this.skipInterval);
}
},10);
},
//下一幀
next:function(){
this.index+=1;
if(this.index>this.lists.length/2) {
this.frame.style.top="0px";
this.index=1;
}
this.skip(300);
},
//開始跳幀
start:function(){
var _this=this;
this.interval=setInterval(function(){
_this.next();
},this.time);
},
//停止跳幀
stop:function(){
clearInterval(this.interval);
},
//初始化輪播器
run:function(){
this.start();
this.deal();
},
//幀處理
deal:function(){
var _this=this;
for(var i=0;i<this.lists.length;i++){
this.lists[i].relatedPosition=-this.lists[i].offsetTop;
this.lists[i].onmouseover=function(){
_this.stop();
}
this.lists[i].onmouseout=function(){
_this.start();
}
}
}
}
2、網頁製作中 無限循環滾動的圖片代碼
我自己用jquery寫的縱向的，想要橫向的我可以幫你改改。
<!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-Type" content="text/html; charset=utf-
8" />
<title>無標題文檔</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
var height = $("ul li").height();
var ul = $("ul");
var picTimer;
var btn = "<div class='scroll_btn pre'></div><div
class='scroll_btn next'></div>";
//$("ul").append(btn);
$("ul").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(
function() {
var field = $("ul
li:first");
field.animate
({marginTop:-height+'px'},600,function(){
field.appendTo
(ul).css('marginTop',0);
})
},3000
);
}).trigger("mouseleave");
//下一個需要 研究
$(".pre").click(function() {
var field = $("ul li:first");
var lastField = $("ul li:last");
field.animate({marginTop:height
+'px'},600,function(){
lastField.insertBefore(field);
});
});
$(".next").click(function() {
var field = $("ul li:first");
field.animate
({marginTop:-height+'px'},600,function(){
field.appendTo
(ul).css('marginTop',0);
}) ;
});
});
</script>
<style type="text/css">
* { margin:0px; padding:0px;}
ul { width:200px; height:200px; border:1px solid #030;
position:relative; overflow:hidden;}
li { list-style:none; width:200px; height:200px; display:block;}
.scroll_btn { width:100px; height:20px; position:absolute;
background:#000; z-index:100}
.pre { left:10px; top:10px;}
.next { left:10px; bottom:10px;}
</style>
</head>
<body>
<ul>
<li style="background:red"></li>
<li style="background:green"></li>
<li style="background:blue"></li>
<li style="background:yellow"></li>
</ul>
</body>
</html>
記得：<script language="javascript" src="jquery.js"></script>
載入jquery工程 才能看效果
3、DW中如何製作這種圖片循環滾動？
用代碼:
基本代碼如下：
<marquee direction="right" onmouseover="this.stop();" onmouseout="this.start();" >
<a href="http://www.baidu.com" target="_blank"><img src="1.jpg" border="1" /></a>
<img src="2.jpg" border="1" />
<img src="3.jpg" border="1" />
</marquee>
代碼需要改進的很多，如果速度，及不間斷顯示
在鏈接的地方改成你的圖片的位置。
4、html 如何讓圖片進行滾動
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 600px; HEIGHT: 190px; top:485px; left:252px;position: absolute;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id=demo1>
<!-- 要循環滾動的圖片 -->
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="200" align="center" style="height: 151px">
<a href="WebDeSign.aspx">
<img src="images/indexpic1.gif" width="194" height="147" border="0" /></a>
</td>
<td width="200" align="center" style="height: 151px">
<a href="SoftWare.aspx">
<img src="images/indexpic2.gif" width="194" height="147" border="0" /></a>
</td>
<td align="center" style="height: 151px; width: 200px;">
<a href="VhostIndex.aspx">
<img src="images/indexpic3.gif" width="194" height="147" border="0" /></a>
</td>
</tr>
</table>
</td>
<TD id=demo2 width=1></TD>
</tr>
</table>
</DIV>
<SCRIPT>
var speed=30//速度數值越大速度越慢
var demo2 = document.getElementById("demo2");
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
5、如何在HTML頁面中實現圖片循環滾動
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 600px; HEIGHT: 190px; top:485px; left:252px;position: absolute;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id=demo1>
<!-- 要循環滾動的圖片 -->
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="200" align="center" style="height: 151px">
<a href="WebDeSign.aspx">
<img src="images/indexpic1.gif" width="194" height="147" border="0" /></a>
</td>
<td width="200" align="center" style="height: 151px">
<a href="SoftWare.aspx">
<img src="images/indexpic2.gif" width="194" height="147" border="0" /></a>
</td>
<td align="center" style="height: 151px; width: 200px;">
<a href="VhostIndex.aspx">
<img src="images/indexpic3.gif" width="194" height="147" border="0" /></a>
</td>
</tr>
</table>
</td>
<TD id=demo2 width=1></TD>
</tr>
</table>
</DIV>
<SCRIPT>
var speed=30//速度數值越大速度越慢
var demo2 = document.getElementById("demo2");
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
自己站的效果
你可以訪問 http://b1.gd.cn
希望對你有幫助。。(*^__^*)
6、製作網頁中的滾動圖片，怎樣循環播放。
1.打開Dreamweaver創建新頁面，如圖：
2.插入如下代碼，如圖：
<%
set rs3=server.CreateObject("ADODB.RecordSet")
rs3.Source ="select top " & top_img & " * from "& db_News_Table &" where picnews=1 and checkked=1 and picname<>'null' order by NewsID DESC"
rs3.Open rs3.Source,conn,3,3
if not rs3.EOF Then
%>
<div align='center' id='demo' style='overflow:hidden;height:125px;width:990px;'><!--滾動區的高度和寬度-->
<table align='center' cellpadding='0' cellspace='0' border='0'>
<tr>
<td id='demo1' valign='top'>
<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>
<tr valign='top'>
<%
while not rs3.EOF
fileExt=lcase(getFileExtName(rs3("picname")))
%>
<td align='center'>
<TABLE width=100% border=0 align=center cellPadding=0 cellSpacing=0>
<TR>
<TD width=8 rowspan=3 > </TD>
<TD vAlign=top width=8><img src='Images/bg_0ltop.gif' width=10 height=10></TD>
<TD background=images/bg_01.gif></TD>
<TD vAlign=top width=7><img src='Images/bg_0rtop.gif' width=10 height=10></TD>
<TD width=7 rowspan=3 vAlign=top> </TD>
</TR>
<TR>
<TD background='Images/bg_03.gif'> </TD>
<TD align="center" bgcolor="#E9E9E9">
<%if fileext="jpg" or fileext="bmp" or fileext="png" or fileext="gif" then%>
<table style="TABLE-LAYOUT: fixed" height=80 cellSpacing=0 cellPadding=0 width=105 border=0>
<tr>
<td style="HEIGHT: 80px">
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'><img src='<%=FileUploadPath & rs3("picname")%>' width='105' border=0></a>
</td>
</tr>
</table>
<%else if fileext="swf" then%>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0' width='105' height='80'>
<param name=movie value='<%=FileUploadPath & rs3("picname")%>'>
<param name=quality value=high>
<param name='Play' value='-1'>
<param name='Loop' value='0'>
<param name='Menu' value='-1'>
<param name='wmode' value='transparent'>
<embed src='<%=FileUploadPath & rs3("picname")%>' width='105' height='80' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash'></embed>
</object>
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'></a>
<%
end if
end If
%>
</TD>
<TD background='Images/bg_04.gif'> </TD>
</TR>
<TR>
<TD><img src='Images/bg_0lbottom.gif' width=10 height=10></TD>
<TD><img src='Images/bg_02.gif'></TD>
<TD><img src='Images/bg_0rbottom.gif' width=10 height=10></TD>
</TR>
<TR>
<TD> </TD>
<TD colspan=3 align=center height=20 valign='top' background='Images/bg_05.gif'>
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'><%=CutStr(htmlencode4(rs3("title")),14)%></a>
</TD>
<TD> </TD>
</TR>
</TABLE>
</td>
<%
rs3.MoveNext
wend
%>
</tr>
</table>
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<%if top_img >4 then%>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script>
<%
end if
else
Response.Write "暫 無 最 新 圖 文"
end if
rs3.close
set rs3=nothing
%>
<!--最新圖文代碼結束-->
3.編寫完成代碼後查看預覽效果圖，如下：
注意事項:代碼中select top " & top_img & " * from "& db_News_Table &" where picnews=1 and checkked=1 and picname<>'null' order by NewsID DESC"根據網站的資料庫路徑來定義數據表，包括ID編號的降序和順序。
7、請問網頁上的滾動圖片怎麼讓他循環滾動
<div align='center' id='demo' style='overflow:hidden;height:130px;width:700px;'><!--滾動區的高度和寬度-->
<table align='center' cellpadding='0' cellspace='0' border='0'>
<tr>
<td id='demo1' valign='top'>
<table width="600" border="1" cellpadding="0" cellspacing="0" bgcolor="#FEFEE7" >
<tr>
<td height="3" colspan="9"></td>
</tr>
<tr>
<td width="7"></td>
<td><table width="87" border="0">
<tr>
<td><img src="img/bccx.gif" width="87" height="87"></td>
</tr>
<tr>
<td><div align="center">白菜炒蝦</div></td>
</tr>
</table></td>
<td width="7"></td>
<td><table width="87" border="0">
<tr>
<td><img src="img/hdxr.gif" width="87" height="87"></td>
</tr>
<tr>
<td><div align="center">滑蛋蝦仁</div></td>
</tr>
</table></td>
<td width="7"></td>
<td><table width="87" border="0">
<tr>
<td><img src="img2/wbhl.gif" width="87" height="87"></td>
</tr>
<tr>
<td><div align="center">溫拌海螺</div></td>
</tr>
</table></td>
<td width="7"></td>
<td><table width="87" border="0">
<tr>
<td><img src="img/lbhs.gif" width="87" height="87"></td>
</tr>
<tr>
<td><div align="center">涼拌海參</div></td>
</tr>
</table></td>
<td width="7"></td>
<td><table width="87" border="0">
<tr>
<td><img src="img/lczt.gif" width="87" height="87"></td>
</tr>
<tr>
<td><div align="center">老醋蟄頭</div></td>
</tr>
</table></td>
<td width="7"></td>
<td><table width="87" border="0">
<tr>
<td><img src="img/mgxh.gif" width="87" height="87"></td>
</tr>
<tr>
<td><div align="center">木瓜雪哈</div></td>
</tr>
</table></td>
<td width="7"></td>
<td><table width="87" border="0">
<tr>
<td><img src="img/stwwc.gif" width="87" height="87"></td>
</tr>
<tr>
<td><div align="center">正湯嫩菜</div></td>
</tr>
</table></td>
<td width="7"></td>
<td><table width="87" border="0">
<tr>
<td><img src="img2/yehx.gif" width="87" height="87"></td>
</tr>
<tr>
<td><div align="center">雲耳蝦腰</div></td>
</tr>
</table></td>
<td width="7"></td>
<td><table width="87" border="0">
<tr>
<td><img src="img2/bczt.gif" width="87" height="87"></td>
</tr>
<tr>
<td><div align="center">白菜蟄頭</div></td>
</tr>
</table></td>
<td width="7"></td>
<td><table width="87" border="0">
<tr>
<td><img src="img2/wbhc.gif" width="87" height="87"></td>
</tr>
<tr>
<td><div align="center">溫拌海腸</div></td>
</tr>
</table></td>
<td width="7"></td>
</tr>
</table>
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var Picspeed=15
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,Picspeed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)}
</script>
這個改一下，就行了
8、網頁製作怎樣讓圖片滾動？
網頁圖片無縫滾動實現代碼：
<style type="text/css">
<!--
ul,li,div{margin:0; padding:0; font-size:12px;}
#demo {
width:678px; float:right; overflow:hidden;height:144px; border:none;
}
#indemo {
float: left;
width: 800%;
}
#demo1,#demo2{height:144px;float:left; display:inline-table;}
#demo1 li,#demo2 li{ width:127px; height:144px; float:left; padding-left:8px; }
#demo1 li img,#demo2 li img{ display:block; background:#ccc; padding:1px; border:1px solid #ccc;}
#demo1 li span,#demo2 li span{ width:127px; height:30px; line-height:30px; text-align:center; overflow:hidden;}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul>
<li><a href="#"><img src="http://boaer.comimg/temp01.gif" width="123" height="110" /></a><span><a href="#">產品名稱</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp02.gif" width="123" height="110" /></a><span><a href="#">產品名稱</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp03.gif" height="110" /></a><span><a href="#">產品名稱</a></span></li>
</ul></div><div id="圖片展示代碼例子"></div></div></div><script>
<!--
var speed=20; //數字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script></td>
</tr>
</table>
9、怎樣才能讓網頁上的圖片滾動循環
<div id="butong_net_right" style="overflow:hidden;width:1000px;">要注意width的值,這個值要比你要滾動的圖片寬度總和小才可以,,在這里設設成<div id="butong_net_right" style="overflow:hidden;width:200px;">就可以了
10、網頁製作如何讓圖片從左到右循環移動
網頁製作(HTML)讓圖片從左到右循環移動使用 css +js完成。
例如：從左向右循環移動
<html>
<head><title>圖片向右循環滾動</title><head>
<body>
<div id=demo style="overflow:hidden;height:68px;width:800px;"><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top nowrap="nowrap">
<img src="http://www.newxing.com/skins/NewXing/logo.gif">
<img src="http://www.newxing.com/skins/NewXing/logo.gif">
<img src="http://www.newxing.com/skins/NewXing/logo.gif">
<img src="http://www.newxing.com/skins/NewXing/logo.gif">
</td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed = 30;
demo2.innerHTML = demo1.innerHTML;
function Marquee() {
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else {
demo.scrollLeft--;
}
};
var MyMar = setInterval(Marquee, speed);
demo.onmouseover = function() {
clearInterval(MyMar)
};
demo.onmouseout = function() {
MyMar = setInterval(Marquee, speed)
};
</SCRIPT>
</body>
</html>
與網頁設計如何設置圖片循環滾動相關的知識
- 網頁設計中怎樣鏈接css
- 站長扣除是什麼意思
- 農機站長主要表現
- 權威的贛州網站建設
- 大客流值班站長的職責
- 二段煤氣爐站長招聘
- 表單在動態網頁設計中的作用
- 帝國cms瀑布流模板
- 網站建設功能需求有哪些
- 比較好的圖片設計網站有哪些
- cms對接網
- 簡單的網頁頁面設計用什麼軟體
- 競選廣播站長
- 傾世cms破解
- 鶴壁超限站站長
- 濟南產經報站長是什麼級別
- 網頁設計師能力
- cms是什麼牌子的點歌機
- 中國最牛逼的設計網站
- 收費站站長主要職能
- 新浪cms稿源系統指的是
- 400路終點站長鳴路
- 站長工具收入信息
- 魔方小站站長教學視頻6
- 朝宋站長爬牆
- 三毛室內設計網站
- 鐵路長沙站站長級別
- 網頁設計怎樣添加flash
- 簽名設計好網站
- 廣播站站長和大隊長
- cms是哪個監控
- 服裝設計網站哪個好
- 網站設計計劃
- 貓網頁設計
- 精通html5網頁設計
- 下一站長沙
- 路政副站長年度考核表
- 網站建設技術規范
- 自己設計旅行路線網站
- 誰有電商網站的mongodb設計
- 帝國cms變數標簽
- 河南省住房建設廳網站
- 設計裝修風格網站
- 上海高端網站建設服
- 新會邊檢站現任站長
- 福彩站長
- 帝國cms復選框
- 湖南腫瘤醫院離哪站長沙城鐵近