導航:首頁 > 好看圖片 > 簡單html圖片滾動
簡單html圖片滾動
發布時間：2022-01-06 15:49:44Ⅰ html 圖片滾動代碼
<div id="gpic" style="overflow:hidden; width:600px; height:182px;">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="gpic1" valign="top" align="center"><table width="974" border="0" align='center' cellpadding="0" cellspacing="0">
<tr>
<td height="120" bgcolor="#FF00FF">圖片/鏈接</td>
<td valign='top' bgcolor="#00FFFF">圖片/鏈接</td>
<td valign='top' bgcolor="#FFFF00">圖片/鏈接</td>
<td valign='top' bgcolor="#0000FF">圖片/鏈接</td>
<td valign='top' bgcolor="#00FF00">圖片/鏈接</td>
<td valign='top' bgcolor="#FF0000">圖片/鏈接</td>
</tr>
<tr>
<td height="24" align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
</tr>
</table></td>
<td id="gpic2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30
gpic2.innerHTML=gpic1.innerHTML
function Marquee(){
if(gpic2.offsetWidth-gpic.scrollLeft<=0)
gpic.scrollLeft-=gpic1.offsetWidth
else{
gpic.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
gpic.onmouseover=function() {clearInterval(MyMar)}
gpic.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
Ⅱ HTML圖片滾動的代碼
你的結構寫錯了，<html><head><title></title></head><body><script>
var speed=30//速度數值越大速度越慢
butong_net_right2.innerHTML=butong_net_right1.innerHTML
function Marquee4(){
if(butong_net_right.scrollLeft<=0)
butong_net_right.scrollLeft+=butong_net_right2.offsetWidth
else{
butong_net_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
butong_net_right.onmouseover=function() {clearInterval(MyMar4)}
butong_net_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<div id="butong_net_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="imags/1.jpg" width="100" height="133"></td>
<td><img src="imags/2.jpg" width="100" height="133"></td>
<td><img src="imags/3.jpg" width="100" height="133"></td>
<td><img src="imags/4.jpg" width="100" height="133"></td>
<td><img src="imags/5.jpg" width="100" height="133"></td>
</tr>
</table>
</td>
<td id="butong_net_right2" valign="top"></td>
</tr>
</table>
</body></html>
Ⅲ html滾動圖片代碼
你把正面的代碼弄到HTML文件的<body>區應該就行了：
<div id="ShowDiv" style="position:relative; overflow:hidden; width:306px; height:102px;">
<div id="div1" style="position:absolute; width: 310px; height: 103px;">
<img src="圖片地址1" width="100" height="100" />
<img src="圖片地址2" width="100" height="100" />
<img src="圖片地址3" width="100" height="100" />
</div>
</div>
<script type='text/javascript'>
var adiv=document.getElementById('div1');
var imgs=document.getElementsByTagName('img');
adiv.style.width=620+'px';
adiv.innerHTML+=adiv.innerHTML;
setInterval(function()
{
adiv.style.left=adiv.offsetLeft-3+'px';
if(adiv.offsetLeft<-adiv.offsetWidth/2)
{
adiv.style.left=0+'px';
}
},10)
</script>
Ⅳ html圖片無縫滾動代碼怎麼寫
marquee和js兩種方法，我建議使用js的，marquee兼容性不好，只兼容IE瀏覽器。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<metacharset="utf-8"/>
<TITLE>分別用marquee和div+js實現首尾相連循環滾動效果</TITLE>
</HEAD>
<BODY>
用marquee實現首尾相連循環滾動效果（僅IE）：<br/><br/>
<MARQUEEbehavior="scroll"contenteditable="true"onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"scrollamount="3"width="100"><SPANunselectable="on"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"></SPAN></MARQUEE>
<br/><br/>用DIV+javascript實現首尾相連循環滾動效果（兼容firefox）：<br/><br/>
<DIVid="scrollobj"style="white-space:nowrap;overflow:hidden;width:500px;"><span>這里是要滾動的內容</span></DIV>
<scriptlanguage="javascript"type="text/javascript">
<!--
functionscroll(obj){
vartmp=(obj.scrollLeft)++;
//當滾動條到達右邊頂端時
if(obj.scrollLeft==tmp)obj.innerHTML+=obj.innerHTML;
//當滾動條滾動了初始內容的寬度時滾動條回到最左端
if(obj.scrollLeft>=obj.firstChild.offsetWidth)obj.scrollLeft=0;
}
setInterval("scroll(document.getElementById('scrollobj'))",20);
//-->
</script>
</BODY>
</HTML>
望採納！
Ⅳ 如何在HTML中實現圖片的滾動效果
素材的准備。為了更好的表現網站的風格和特色，具備一些更富表現力和吸引力的圖片是必不可少的。同理，小編也准備了一些與網頁主題密切相關的圖片，用於做為實現圖片滾動效果的素材。
打開Dreamweaver8，新建一網頁文件，並保存為名為「index.html"文件。
切換至代碼編輯界面，輸入如下代碼：
<body><div id="photo-list"> <ul id="scroll">
<li><a href="#"><img src="images/1.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/5.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/6.jpg" width="100px" height="100px" alt=""/></a></li> </ul> </div></body>
新建一CSS樣式表文件，並將該文件保存到與「index.html」相同的目錄下，文件名稱為「MyStyle.css"。
在新建的樣式表文件"MyStyle.css」文件中輸入如下代碼：
* { padding:0; margin:0;} /*設置所有對像的內邊距為0*/
body { text-align:center;} /*設置頁面居中對齊*/
#photo-list {
/* 6張圖片的寬度（包含寬度、padding、border、圖片間的留白）
計算：6*(100+2*2+1*2+9) - 9
之所以減去9是第6張圖片的右邊留白 */
width:681px;
/* 圖片的寬度（包含高度、padding、border）
計算：100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份將被隱藏*/
border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}
#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}
在網頁文件"index.html"中添加對該樣式表的引用：
<link rel="stylesheet" type="text/css" href="MyStyle.css">
新建一個JS文件，並將該文件另存為「MoveEffect.js"。
在」MoveEffect.js「文件中輸入如下所示代碼：
var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {
var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //獲得每個img容器的寬度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //當 c.scrollLeft 和 width 相等時，把第一個img追加到最後面
ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //數值越大越慢
ul.style.width = width*itemCount + 'px'; //載入完後設置容器長度
var timer = setInterval(marquee, speed);
c.onmouseover = function() {
clearInterval(timer);
};
c.onmouseout = function() {
timer = setInterval(marquee, speed);
};
};
然後在主頁文件"index.html」中添加對該「MoveEffect.js」文件的引用。
<script type="text/javascript" src="MoveEffect.js"></script>
打開「index.html」網頁文件，最終效果如果所示：
Ⅵ html如何設置圖片滾動
你說的應該是輪播圖吧，這需要配合JavaScript知識。給你具體代碼：（圖片自己更換）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>heartmv.com</title>
<style>
* {
margin: 0;
padding: 0
}
html {
font-size: 15px;
}
.box {
width: 50rem;
height: 32rem;
border: 3px dashed red;
margin: 15px 0;
position: relative;
left: 50%;
top: 5%;
transform: translate(-50%, 0);
overflow: hidden;
}
.box>ul {
width: 500%;
height: 32rem;
position: absolute;
}
.box>ul>li {
width: 50rem;
height: 32rem;
list-style: none;
float: left;
}
.box li img {
width: 50rem;
height: 32rem;
}
.box>ol {
position: absolute;
left: 50%;
bottom: 15px;
transform: translate(-50%, 0);
}
.box>ol>li {
width: 1.5rem;
height: 1.5rem;
list-style: none;
margin-left: 15px;
float: left;
border-radius: 1.5rem;
background: rgba(191, 0, 3, 0.5);
cursor: pointer;
}
.box>ol>li.now {
width: 3rem;
}
.box span {
color: #00f;
display: none;
width: 6rem;
text-align: center;
height: 32rem;
line-height: 32rem;
font-size: 5rem;
position: absolute;
top: 0;
cursor: pointer;
}
.box span:hover {
background: rgba(110, 110, 110, 0.3);
}
.box>.spanL {
left: 0;
}
.box>.spanR {
right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="javascript:;">
<img src="images/game_001.jpg" alt="輪播圖">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/game_002.jpg" alt="輪播圖">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/game_003.jpg" alt="輪播圖">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/game_004.jpg" alt="輪播圖">
</a>
</li>
</ul>
<!--輪播圖指示圖標-->
<ol>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
</ol>
<!--向左向右圖標-->
<span class="spanL">‹</span>
<span class="spanR">›</span>
</div>
<script>
var box = document.querySelector('.box');
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
var spanL = document.querySelector('.spanL');
var spanR = document.querySelector('.spanR');
//滑鼠移入時向左、向右圖標顯示
box.addEventListener('mouseenter', function() {
spanL.style.display = 'block';
spanR.style.display = 'block';
//停止定時器
clearInterval(timer);
})
//滑鼠移出時向左、向右圖標隱藏
box.addEventListener('mouseleave', function() {
spanL.style.display = 'none';
spanR.style.display = 'none';
//運行定時器
timer=setInterval(function(){
//調用向右運動事件
spanR.click();
},3000);
})
//動畫函數
function run(obj, target, callback) { //obj指運動的對象，target指目標運動距離，callback指回調函數
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft === target) {
clearInterval(obj.timer);
//回調函數要等到定時器函數運行結束才能運行
if (callback) { //若存在回調函數就調用
callback();
};
} else {
//設置動畫的步長值變數bc，使運行速度逐漸變小
var bc = (target - obj.offsetLeft) / 10 > 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target -
obj.offsetLeft) / 10);
obj.style.left = obj.offsetLeft + bc + 'px';
};
}, 15);
}
//要實現無縫滾動，需要將第一張輪播圖復制並添加到最後(注意：ul的寬度也要相應增加)
var imglast = ul.children[0].cloneNode(true);
ul.appendChild(imglast);
var num = 0; //代替輪播圖的序號
var num2 = 0; //代替輪播圖指示圖標的序號
var lis = ol.children.length;
var flag = true; //此變數用於阻止快速點擊時導致運動過快的情況
//點擊向右圖標，向右運動
spanR.addEventListener('click', function() {
if (flag) {
flag = false;
if (num === ul.children.length - 1) { //注意num的判斷條件必須寫在num++的前面
num = 0;
ul.style.left = 0;
}
num++;
//輪播圖指示圖標
for (var i = 0; i < lis; i++) {
ol.children[i].className = '';
}
num2++;
if (num2 === lis) {
num2 = 0;
}
ol.children[num2].className = 'now';
//調用運動函數
run(ul, -num * ul.children[0].offsetWidth, function() {
flag = true;
});
}
})
//點擊向左圖標，向左運動
spanL.addEventListener('click', function() {
if (flag) {
flag = false;
if (num === 0) {
num = ul.children.length - 1;
ul.style.left = -num * ul.children[0].offsetWidth + 'px';
}
num--;
//輪播圖指示圖標
for (var i = 0; i < lis; i++) {
ol.children[i].className = '';
}
num2--;
if (num2 < 0) {
num2 = lis-1;
}
ol.children[num2].className = 'now';
//調用運動函數
run(ul, -num * ul.children[0].offsetWidth, function() {
flag = true;
});
}
})
//點擊指示圖標定點陣圖片
for(var i=0; i<lis; i++){
ol.children[i].index=i; //獲取循環對象的下標號
ol.children[i].addEventListener('click', function(){
run(ul, -this.index*ul.children[0].offsetWidth);
for(var j=0; j<lis; j++){
ol.children[j].className='';
};
this.className='now';
num=num2=this.index;
})
}
//設置定時器
var timer=setInterval(function(){
//調用向右運動事件
spanR.click();
},3000);
</script>
</body>
</html>
效果圖如下：
Ⅶ html怎麼實現圖片滾動效果
純HTML腳本是不可以實現圖片的滾動的，一般是配合JQuery腳本實現圖片的輪轉切換的。
Ⅷ 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>
Ⅸ HTML滾動圖片
var speed=30
butong_net_left2.innerHTML=butong_net_left1.innerHTML
function Marquee3(){
if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)
butong_net_left.scrollLeft-=butong_net_left1.offsetWidth
else{
butong_net_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
butong_net_left.onmouseover=function() {clearInterval(MyMar3)}
butong_net_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
用多次會語法錯誤？檢查下格式復制對沒有，有時候少一個標點括弧啥的，
Ⅹ 如何在HTML頁面中實現圖片循環滾動
marquee標記是不能實現銜接滾動的，頭尾肯定是有空白。樓下的哥們兒用的是JS腳本實現的，沒啥更好的方法了
與簡單html圖片滾動相關的資料
- 雞的畫畫圖片簡單
- 牡丹花葉子怎麼畫簡單圖片
- 舊衣服回收廣告詞以及圖片
- 舊衣服做裝飾品圖片
- 香港娃娃衣服圖片
- 西行紀唐僧簡單圖片
- 農村畫圖片大全簡單
- 穿大花衣服女人圖片
- 漫畫圖片手繪簡單少女有顏色
- 果綠色皮鞋搭配衣服圖片
- 簡單事復雜做圖片
- 韭菜雞蛋簡單圖片
- 簡單小邊框圖片
- 大衣衣服圖片黑色
- 為啥網拍衣服圖片更好看
- 簡單的教具圖片
- 教師簡單節手抄報圖片大全
- 讀書簡單的手抄報圖片大全
- 魔方教程圖片大全簡單易學
- 模特衣服造型圖片男
- 給剛出生的寶寶穿衣服的圖片
- 簡單動物手抄報圖片大全
- 衣服上的勵志圖片大全
- 小狗圖片素描簡單
- 簡單雕刻西瓜皮圖片
- 服裝廠裁剪衣服圖片
- 簡單臉部彩繪圖片
- 價目表簡單設計圖片
- 紙杯做衣服圖片
- 簡單時裝秀圖片
- 人物背影畫畫圖片大全簡單
- 高幫紅鞋配什麼衣服圖片
- 瘦子衣服創意圖片
- 小孩古代的衣服圖片
- 幼兒園畫畫簡單圖片螃蟹
- 手工花瓶簡單又漂亮圖片
- 放一個簡單的圖片
- 動漫網格畫畫圖片簡單
- 簡單的星星畫法圖片
- 抗洪手抄報圖片簡單漂亮一等獎
- 五穀衣服圖片
- 女人微信頭像簡筆畫圖片大全簡單