html怎么设置滚动图片？ html 如何让图片进行滚动
html\u5982\u4f55\u8bbe\u7f6e\u56fe\u7247\u6eda\u52a8\u4f60\u8bf4\u7684\u5e94\u8be5\u662f\u8f6e\u64ad\u56fe\u5427\uff0c\u8fd9\u9700\u8981\u914d\u5408JavaScript\u77e5\u8bc6\u3002\u7ed9\u4f60\u5177\u4f53\u4ee3\u7801\uff1a\uff08\u56fe\u7247\u81ea\u5df1\u66f4\u6362\uff09
heartmv.com* {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;}‹›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');//\u9f20\u6807\u79fb\u5165\u65f6\u5411\u5de6\u3001\u5411\u53f3\u56fe\u6807\u663e\u793abox.addEventListener('mouseenter', function() {spanL.style.display = 'block';spanR.style.display = 'block';//\u505c\u6b62\u5b9a\u65f6\u5668clearInterval(timer);})//\u9f20\u6807\u79fb\u51fa\u65f6\u5411\u5de6\u3001\u5411\u53f3\u56fe\u6807\u9690\u85cfbox.addEventListener('mouseleave', function() {spanL.style.display = 'none';spanR.style.display = 'none';//\u8fd0\u884c\u5b9a\u65f6\u5668timer=setInterval(function(){//\u8c03\u7528\u5411\u53f3\u8fd0\u52a8\u4e8b\u4ef6spanR.click();},3000);})//\u52a8\u753b\u51fd\u6570function run(obj, target, callback) { //obj\u6307\u8fd0\u52a8\u7684\u5bf9\u8c61\uff0ctarget\u6307\u76ee\u6807\u8fd0\u52a8\u8ddd\u79bb\uff0ccallback\u6307\u56de\u8c03\u51fd\u6570clearInterval(obj.timer);obj.timer = setInterval(function() {if (obj.offsetLeft === target) {clearInterval(obj.timer);//\u56de\u8c03\u51fd\u6570\u8981\u7b49\u5230\u5b9a\u65f6\u5668\u51fd\u6570\u8fd0\u884c\u7ed3\u675f\u624d\u80fd\u8fd0\u884cif (callback) { //\u82e5\u5b58\u5728\u56de\u8c03\u51fd\u6570\u5c31\u8c03\u7528callback();};} else {//\u8bbe\u7f6e\u52a8\u753b\u7684\u6b65\u957f\u503c\u53d8\u91cfbc\uff0c\u4f7f\u8fd0\u884c\u901f\u5ea6\u9010\u6e10\u53d8\u5c0fvar 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);}//\u8981\u5b9e\u73b0\u65e0\u7f1d\u6eda\u52a8\uff0c\u9700\u8981\u5c06\u7b2c\u4e00\u5f20\u8f6e\u64ad\u56fe\u590d\u5236\u5e76\u6dfb\u52a0\u5230\u6700\u540e(\u6ce8\u610f\uff1aul\u7684\u5bbd\u5ea6\u4e5f\u8981\u76f8\u5e94\u589e\u52a0)var imglast = ul.children[0].cloneNode(true);ul.appendChild(imglast);var num = 0; //\u4ee3\u66ff\u8f6e\u64ad\u56fe\u7684\u5e8f\u53f7var num2 = 0; //\u4ee3\u66ff\u8f6e\u64ad\u56fe\u6307\u793a\u56fe\u6807\u7684\u5e8f\u53f7var lis = ol.children.length;var flag = true; //\u6b64\u53d8\u91cf\u7528\u4e8e\u963b\u6b62\u5feb\u901f\u70b9\u51fb\u65f6\u5bfc\u81f4\u8fd0\u52a8\u8fc7\u5feb\u7684\u60c5\u51b5 //\u70b9\u51fb\u5411\u53f3\u56fe\u6807\uff0c\u5411\u53f3\u8fd0\u52a8spanR.addEventListener('click', function() {if (flag) {flag = false;if (num === ul.children.length - 1) { //\u6ce8\u610fnum\u7684\u5224\u65ad\u6761\u4ef6\u5fc5\u987b\u5199\u5728num++\u7684\u524d\u9762num = 0;ul.style.left = 0;}num++;//\u8f6e\u64ad\u56fe\u6307\u793a\u56fe\u6807for (var i = 0; i
\u6548\u679c\u56fe\u5982\u4e0b\uff1a
var speed=30//\u901f\u5ea6\u6570\u503c\u8d8a\u5927\u901f\u5ea6\u8d8a\u6162
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)}
方案一：直接使用HTML的滚动标签 marquee ，把图片放入滚滚标签内部，代码如下：
<marquee>
<img src='1.jpg'>
<img src='2.jpg'>
<img src='3.jpg'>
<img src='4.jpg'>
</marquee>
方案二：使用第三方插件，比如swiper.js，
插件
把图片放在<scroll>标签中，就可以实现滚动了，不过这个不会连续对接，只能滚动完成一遍才会开始另外一遍。
html只能设置静态网页，不能设置滚动图片，要使得图片滚动起来需要编写JavaScript脚本实现
绛旓細鏂规涓锛氱洿鎺ヤ娇鐢℉TML鐨勬粴鍔ㄦ爣绛 marquee 锛屾妸鍥剧墖鏀惧叆婊氭粴鏍囩鍐呴儴锛屼唬鐮佸涓嬶細<marquee> <img src='1.jpg'> <img src='2.jpg'> <img src='3.jpg'> <img src='4.jpg'> </marquee> 鏂规浜岋細浣跨敤绗笁鏂规彃浠讹紝姣斿swiper.js锛屾彃浠
绛旓細鍦html涓闇瑕佸皢鎻掑叆鐨鍥剧墖宸﹀彸鏉ュ洖绉诲姩锛屽彧闇瑕佸湪鍥剧墖img鏍囩澶栧涓涓猰arquee鏍囩锛屽湪閲岄潰鍐欎笂 behavior=alternate 杩欏彞璇濆氨鍙互瀹炵幇銆俛lternate鏄婊氬姩鏍囩<marquee>鐨勫睘鎬с俿crolldelay锛屾粴鍔ㄥ欢鏃讹紝鐢ㄤ簬璁惧畾涓ゆ婊氬姩鎿嶄綔涔嬮棿鐨勯棿闅旀椂闂达紝璇ユ椂闂翠互姣涓哄崟浣嶃俠ehavior锛屾粴鍔ㄦ柟寮忋俛lternate锛 琛ㄧず鍦ㄤ袱绔箣闂...
绛旓細1銆佸湪html缂栬緫鍣ㄨ蒋浠跺唴锛屾柊寤篽tml椤甸潰锛岋紙涓鑸垜浠父浣跨敤鐨勪袱娆剧紪杈戝櫒鏄疕Builder鍜孉dobe Dreamweaver锛岃繖閲屾垜浣跨敤鐨勮蒋浠舵槸HBuilder锛夈2銆佸湪<body></body>娣诲姞<div class="nav"></div>,浜<div class="nav"></div>涓棿娣诲姞<ul></ul>,鍦<ul>鍐呮坊鍔<li>鏍囩锛<li>鍐呭悓鏃舵坊鍔<a>鏍囩锛屾柟渚...
绛旓細鏂板缓涓CSS鏍峰紡琛ㄦ枃浠讹紝骞跺皢璇ユ枃浠朵繚瀛樺埌涓庘渋ndex.html鈥濈浉鍚岀殑鐩綍涓嬶紝鏂囦欢鍚嶇О涓衡淢yStyle.css"銆傚湪鏂板缓鐨勬牱寮忚〃鏂囦欢"MyStyle.css鈥濇枃浠朵腑杈撳叆濡備笅浠ｇ爜锛歿 padding:0; margin:0;} /*璁剧疆鎵鏈夊鍍忕殑鍐呰竟璺濅负0*/body { text-align:center;} /*璁剧疆椤甸潰灞呬腑瀵归綈*/#photo-list {/* 6寮...
绛旓細1銆佹柊寤轰竴涓枃浠跺す锛岀敤鏉ュ瓨鏀剧綉椤垫枃浠跺拰鍥剧墖锛屽揩鎹烽敭ctrl+shift+n銆2銆佽繘鍏ユ柊寤烘枃浠跺す閲岄潰锛屽彸閿柊寤烘枃鏈枃妗ｃ3銆佽繘鍏ユ柊寤虹殑鏂囨湰鏂囨。锛屽鍒朵笅鏂逛唬鐮侊紝鐐瑰嚮蹇嵎閿甤trl+s淇濆瓨鍚庨鍑恒<!doctype html> <html> <head> <meta charset="utf-8"> <title>鐧惧害鐭ラ亾</title> </head> <body> <!-- posit...
绛旓細闇瑕婊氬姩鐨勫唴瀹筨ehaviour鏄〃绀鸿蛋鍚慳lternate鏄蛋鍒板彸杈瑰悗鐩存帴鍐嶅掑洖鍘籨irection鏄斁蹇僺crollmount鏄熷害onmouseout=this start()琛ㄧず褰撻紶鏍囩寮鍚鍥剧墖寮濮嬫粴鍔╫nmouseover=this stop()鎰忔濇槸褰撻紶鏍囧湪婊氬姩鐨勫唴瀹逛笂鏂规椂婊氬姩鍋滄锛
绛旓細html涓marquee鏍囩璁╁浘鐗囨粴鍔鏄繖鏍峰仛鐨勶細<marquee onmouseover="this.stop()"onmouseout="this.start()"scrollamount="2"scrolldelay="3"direction="up"></marquee>鍙鎶婂浘鐗囨斁鍦╩arquee涓棿灏卞ソ銆傚叾涓 direction="up"杩欎釜鏄瀭鐩存粴鍔紱锛堣繕鏈変釜down锛塪irection="left"杩欎釜鏄按骞虫粴鍔紙杩樻湁涓猺ight锛塵arquee...
绛旓細杩欎釜寰楃敤鍒癹query鐨勪竴涓嚱鏁般傚彨鍋歛nimate 渚嬪鎴戞兂璁鏌愪釜div婊氬姩鍒板彸杈癸紝鍗冲鍔犲畠宸﹂潰鐨勫杈硅窛銆 $("div").animate({margin-left:400px},600); //600姣鐨勬椂闂村皢璇iv 鐨勫乏杈硅窛鍙樺寲涓400px锛岀幇鍦ㄤ綘闇瑕佽皟鏁撮熷害锛屾敼鍙樺悗闈竴涓椂闂村弬鏁扮殑鍊煎嵆鍙
绛旓細<title>鍥剧墖婊氬姩</title> </head> <body> <style type="text/css"> <!-- demo { background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 500px;} demo img { border: 3px solid #F2F2F2;} indemo { float: left;width: 800%;} demo1 { float: left;} demo2 { float...
绛旓細html鍥剧墖寰幆婊氬姩鏃犵紳闅欎唬鐮侊細<!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=gb...
