怎麼滾圖片_如何製作滾動圖片

㈠ html怎麼設置滾動圖片

方案一：直接使用HTML的滾動標簽 marquee ，把圖片放入滾滾標簽內部，代碼如下：

</marquee>

方案二：使用第三方插件，比如swiper.js，

插件

㈡如何製作論滾圖片

我暈圖片都沒齊全！

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

效果圖如下：

㈣怎麼設置滾動圖片

滾動的圖片很簡單的設置了背景圖片就不會滾動的至於設置背景圖片你用滑鼠點擊背景然後選擇插入圖片要是手寫代碼就更簡單了，添加一個background屬性我看你的那個Dreamwever8的頁面下面
，是不是可以看到
屬性這一欄，然後選擇頁面屬性再添加背景圖片，這樣也可以的。

㈤怎麼做滾字圖片

做滾字的圖片需要使用到PS，具體操作方法如下：

1、首先打開PS，點擊文件新建一塊畫布，如下圖所示：

㈥如何做滾字圖片

您好，空間只能做滾動字或圖片橫著的。豎著的目前還不可以。

㈦ ps怎麼讓圖片滾動

圖片滾動，這屬於動畫的范圍，使用PS製作動圖，其原理，就像電影膠片一樣，它是由若干個幀組成的，這若干個幀的連續播放，就構成了一個完整的動作鏈條。
在PS中，圖層就是動畫的幀，所以，製作動畫的實質，就是製作若干個幀，舉個例子，要讓圖片向右移動1厘米，那麼，可以製作成把圖片向右移動1毫米、2毫米、3毫米，一直到10毫米，這10個幀的連續播放，就構成了圖片向右移動1厘米的連續的過程，其中，每次移動的量越少，也就是幀越多項，動作的連貫性就越好。

㈧如何實現圖片無限循環滾動

我自己用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工程才能看效果

㈨怎麼製作滾動圖片

問題補充：是向左滾動的圖片，怎麼製作
謝謝
這里有一個無縫滾動效果
方向可以自己設置可以設置定高定寬停頓你把文字改成圖片就行裡面有源碼可以參考

㈩如何製作滾動圖片

1、電腦打開美圖秀秀，然後點擊左上角的打開。

導航:首頁 > 動漫圖片 > 怎麼滾圖片

怎麼滾圖片

與怎麼滾圖片相關的資料