html5怎么做图片轮播(html5图片轮播制作教程)

http://www.itjxue.com  2023-02-16 14:13  来源:未知  点击次数: 

求助HTML5 图片轮播

!DOCTYPE?htmlhtml

????head

????????meta?charset="utf-8"?/

????????title轮播图/title

????????style?type="text/css"

????????????*?{????????????????margin:?0px;????????????????padding:?0px;

????????????}????????????#lunbotu?{????????????????width:?1226px;????????????????height:?460px;????????????????overflow:?hidden;????????????????position:?relative;????????????????margin:?0px?auto;????????????????position:?relative;

????????????}????????????#banner?{????????????????height:?460px;????????????????width:?6130px;????????????????position:?absolute;????????????????transition:?2s;????????????????left:?0px;

????????????}????????????#banner?img?{????????????????float:?left;

????????????}????????????#biao?{????????????????position:?absolute;????????????????top:?430px;????????????????left:?43%;

????????????}????????????#biao_1?{????????????????height:?20px;????????????????width:?20px;????????????????border:?1px?solid?#000;????????????????z-index:?10;????????????????float:?left;????????????????list-style:?none;????????????????border-radius:?50%;????????????????margin-left:?20px;????????????????text-align:?center;????????????????cursor:pointer;

????????????}????????/style

????/head

????body

????????div?id="lunbotu"

????????????div?id="banner"

????????????????img?class="m"?src="img/T1hiDvBvVv1RXrhCrK.jpg"?/

????????????????img?class="m"?src="img/T1jrxjB_VT1RXrhCrK.jpg"?/

????????????????img?class="m"?src="img/T1oTJjBKKT1RXrhCrK.jpg"?/

????????????????img?class="m"?src="img/T1RICjB7DT1RXrhCrK.jpg"?/

????????????????img?class="m"?src="img/T1vWdTBKDv1RXrhCrK.jpg"?/

????????????/div

????????????div?id="biao"

????????????????ul

????????????????????li?id="biao_1"1/li

????????????????????li?id="biao_1"2/li

????????????????????li?id="biao_1"3/li

????????????????????li?id="biao_1"4/li

????????????????????li?id="biao_1"5/li

????????????????/ul

????????????/div

????????/div

????/body

????script?type="text/javascript"

????????var?slid?=?document.getElementById("banner");????????//var?id?=?document.getElementById("bt");

????????var?imgwidth?=?document.getElementsByClassName("m");????????var?oli=document.getElementsByTagName("li");????????//console.log(oli);

????????//console.log(imgwidth?);

????????var?i?=0;

????????auto();

????????oli[0].style.cssText="background:#ff6700;color:#fff;";????????function?auto(){

????????????time?=?setInterval(function(){

????????????????i++;????????????if(i?=?4)?{

????????????????slid.style.left?=?slid.offsetLeft?-?1226?+?"px";

????????????????oli[i].style.cssText="background:#ff6700;color:#fff;";

????????????????oli[i-1].style.cssText="background:none;color:#000;";

????????????}?else?{

????????????????slid.style.left?="0px";

????????????????oli[4].style.cssText="background:none;color:#000;";

????????????????oli[0].style.cssText="background:#ff6700;color:#fff;";

????????????????i=0;

????????????}????????????console.log(i);

????????},?3000)

????????}????????????for(var?j=0;j=4;j++){????????????????//console.log(imgwidth[j].index);

????????????imgwidth[j].index=j;

????????????oli[j].index=j;

????????????oli[j].onmouseover=function(){????????????????this.style.cssText="background:#ff6700;color:#fff;"????

????????????????this.onmouseout=function(){????????????????????this.style.cssText="background:none;color:#000;"

????????????????}

????????????}

????????????oli[j].onclick=function(){

????????????????clearInterval(time);

????????????????m=this.index;

????????????????slid.style.left=-m*1226+"px";????

????????????????i=m;

????????????????auto();????????????????console.log(i);

????????????}

????????????}????

????/script/html

html5如何实现图片轮播

静态获取图片写法,给定图片的个数,用js实现轮播图自动转换。

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleDocument/title

!-- *******设置样式********** --

style type="text/css"

.show_div{

width: 400px;

height: 400px;

margin: ?0 auto;

border: 2px solid block;

overflow: hidden;

}

.scroll_div{

width: 2000px;

height: 400px;

}

.scroll_div img{

width: 400px;

height: 400px;

float: left;

}

/style

!-- end --

/head

body

div class="show_div"

div class="scroll_div"

img src="img/b.jpg" alt=""

img src="img/c.jpg" alt=""

img src="img/d.jpg" alt=""

img src="img/a.jpg" alt=""

img src="img/b.jpg" alt=""

/div

/div

/body

!-- *********js代码******** --

script type="text/javascript"

var scrollDiv = document.getElementsByClassName("scroll_div")[0];

// 定义初始值

var left =0;

// 定义一个定时器 走一步

function move(){

var timer = setInterval(function(){

left --;

if (left = -1600) {

left = 0;

}

if (left % -400 == 0) {

clearInterval(timer);

timer = null;

}

scrollDiv.style.marginLeft = left + "px";

},10);

}

// 定义一个定时器 每隔固定时间 走一张

setInterval(function(){

move();

},5000);

/script

/html

Html5如何快速在页面中写出多个轮播图效果

光是html的话很难实现轮播,轮播一般都是html+js才能完成。

给你一个最简单的html+js轮播例子:

html代码:

div?class="side"?id?=?"lunbo"????

????????ul"????

????????????liimg?src="../images/1.jpg"/li????

????????????liimg?src="../images/2.jpg"/li????

????????????liimg?src="../images/3.jpg"/li????

????????/ul????

/div

js代码:

var?li=document.getElementById('lunbo').getElementsByTagName("li");??

????var?num=0;??

????var?len=li.length;??

??

????setInterval(function(){??

????????li[num].style.display="none";??

????????num=++num==len?0:num;??

????????li[num].style.display="inline-block";??

??

},3000);//切换时间

html5怎么做图片轮播居中

用一个div将轮播图装着 然后居中显示。可以用相对布局也可以用弹性布局

(责任编辑:IT教学网)

更多

推荐ASP.NET教程文章