当前位置：首页 » 编程语言 » html5的轮播

html5的轮播

发布时间: 2021-03-12 09:00:54

❶ 求一段html5图片轮播代码，手机上的

直接用swiper插件，你去官网看看，那里的demo直接拿来用就好了

❷ html中图片轮播怎么弄


一、数字键控制代码：
<divstyle="position:relative;top:-50px;left:240px;">
<ahref="javascript:show(1)"><spanid="I1"style="width:18px;text-align:left;background:gray">1</span></a>
<ahref="javascript:show(2)"><spanid="I2"style="width:18px;text-align:left;background-color:gray">2</span></a>
<ahref="javascript:show(3)"><spanid="I3"style="width:18px;text-align:left;background-color:gray">3</span></a>
<ahref="javascript:show(4)"><spanid="I4"style="width:18px;text-align:left;background-color:gray">4</span></a>
<ahref="javascript:show(5)"><spanid="I5"style="width:18px;text-align:left;background-color:gray">5</span></a>
<ahref="javascript:show(6)"><spanid="I6"style="width:18px;text-align:left;background-color:gray">6</span></a></div>
<scriptlanguage="javaScript">
varnowIndex=1;
varmaxIndex=6;
functionshow(index)
{
if(Number(index)){
clearTimeout(theTimer);
nowIndex=index;
}
for(vari=1;i<(maxIndex+1);i++){
if(i==nowIndex)
{document.getElementById('pic'+nowIndex).style.display='';
document.getElementById('I'+nowIndex).style.backgroundColor='red';}
else
{document.getElementById('pic'+i).style.display='none';
document.getElementById('I'+i).style.backgroundColor='gray';}
}{
if(nowIndex==maxIndex)
nowIndex=1;
else
nowIndex++;
}
theTimer=setTimeout('show()',3000);
}
</script>
</div>
二、图片自动播放：
<divid="butong_net_left"style="overflow:hidden;width:1000px;">
<tablecellpadding="0"cellspacing="0"border="0">
<tr><tdid="butong_net_left1"valign="top"align="center">
<tablecellpadding="2"cellspacing="0"border="0">
<tralign="center">

❸ html5能做图片轮播特吗

||能，
主要源代码：

<style >.f{width:400px;margin:20px;overflow:hidden;}.f_aaa{width: 2000px;height: 300px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}.f_aa {width: 400px;float:left;}.f_cfq{padding-top:10px;text-align:center;}</style><body onload=a()><div class="f"> <div id="aaa" class="f_aaa"> <img class="f_aa" src="a.jpg" width="400" height="300"> <img class="f_aa" src="b.jpg" width="400" height="300"> <img class="f_aa" src="c.png" width="400" height="300"> <img class="f_aa" src="d.jpg" width="400" height="300"> </div> <div id="cfq" class="f_cfq"> <a href="#1">111</a> <a href="#2">222</a> <a href="#3">333</a> <a href="#4">444</a> </div> </div>

<script type="text/javascript"> function a() { var $ = function(id){return document.getElementById(id);}; var tp = $("aaa"); var lj = $("cfq").getElementsByTagName("a"); var ljsl = lj.length; if (tp && ljsl) { for( var i = 0; i < ljsl; i += 1) { lj[i].onclick = function() { var index = Number(this.href.replace(/.*#/g, "")) || 1; tp.style.marginLeft = (1 - index) * 400 + "px"; return false; }; }}};</script>

❹ html5 app开发实现广告轮播广告图片为5个，实现循环播放

<!--html5和app都可,演示地址http://www.swiper.com.cn/demo/index.html-->
<!--下载Swiper插件并引入-->
<linkrel="stylesheet"href="path/to/swiper.min.css">
<scriptsrc="path/to/swiper.min.js"></script>
<divclass="swiper-container">
<divclass="swiper-wrapper">
<divclass="swiper-slide">图1</div>
<divclass="swiper-slide">图2</div>
<divclass="swiper-slide">图3</div>
<divclass="swiper-slide">图4</div>
<divclass="swiper-slide">图5</div>
</div>
</div>
<scripttype="text/javascript">
varmySwiper=newSwiper('.swiper-container',{
loop:true,
});
</script>

❺ HTML图片轮播代码怎么写

（1）<div id="butong_net_left" style="overflow:hidden;width:1000px。

（2）"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="butong_net_left1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center">

❻ HTML5轮播效果……


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jQuery背景和banner图片一起切换全屏焦点图切换代码</title>
</head>

<body>

<styletype="text/css">
/*reset*/
*{margin:0;padding:0;list-style-type:none;}
a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
:focus{outline:0;}
label{cursor:pointer;}
img{vertical-align:middle;}
table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
h1{font-size:16px;}h2,h3,h4{font-size:14px;}h5,h6{font-size:12px;}
abbr,acronym{border:0;font-variant:normal}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
a,img{border:0;}
a,a:visited{color:#5e5e5e;text-decoration:none;}
a:hover{color:#4183C4;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}/*HidesfromIE-mac*/
*html.clearfix{height:1%;}
.clearfix{display:block;}/*EndhidefromIE-mac*/
*+html.clearfix{min-height:1%;}
body{font:12px/180%Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/*shortcut*/
.shortcut{height:32px;line-height:32px;font-size:12px;background:#eee;text-transform:uppercase;box-shadow:1px0px2pxrgba(0,0,0,0.2);border-bottom:1pxsolid#DDDDDD;}
.shortcuth1{font-size:14px;font-family:"微软雅黑","宋体";}
.shortcuta,.shortcuth1{padding:0px10px;letter-spacing:1px;color:#333;text-shadow:0px1px1px#fff;display:block;float:left;width:360px;height:32px;overflow:hidden;}
.shortcuta:hover{background:#fff;}
.shortcutspan.right{float:right;display:inline-block;width:468px;height:15px;overflow:hidden;margin:8px5px00;}
.shortcut.close{
background:url(/Public/images/close-demo.gif)no-repeat00;width:20px;height:20px;line-height:99em;overflow:hidden;display:inline-block;margin:6px10px010px;float:right;padding:0;
-webkit-transition:all.3sease-out0s;
-moz-transition:all.3sease-out0s;
-ms-transition:all.3sease-out0s;
-o-transition:all.3sease-out0s;
transition:all.3sease-out0s;
}
.shortcut.close:hover{background:url(/Public/images/close-demo.gif)no-repeat0-20px}
.shortcut.close:active{background:url(/Public/images/close-demo.gif)no-repeat0-40px}
</style>

<divclass="shortcut">


<spanclass="right">
<scripttype="text/javascript">
/*新468*15*/
varcpro_id="u1425128";
</script>
<scripttype="text/javascript"src="http://cpro.static.com/cpro/ui/c.js"></script>
</span>

</div><!--shortcutend-->

<scripttype="text/javascript"src="http://www.17sucai.com/static/js/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){

variframeHeight=function(){
var_height=$(window).height()-34;
$('#content').height(_height);
}
window.onresize=iframeHeight;
$(function(){
iframeHeight();
});

});

</script>


</body>
</html>

❼ 求助HTML5 图片轮播

<!DOCTYPEhtml><html>

<head>
<metacharset="utf-8"/>
<title>轮播图</title>
<styletype="text/css">
*{margin:0px;padding:0px;
}#lunbotu{width:1226px;height:460px;overflow:hidden;position:relative;margin:0pxauto;position:relative;
}#banner{height:460px;width:6130px;position:absolute;transition:2s;left:0px;
}#bannerimg{float:left;
}#biao{position:absolute;top:430px;left:43%;
}#biao_1{height:20px;width:20px;border:1pxsolid#000;z-index:10;float:left;list-style:none;border-radius:50%;margin-left:20px;text-align:center;cursor:pointer;
}</style>
</head>

<body>
<divid="lunbotu">
<divid="banner">
<imgclass="m"src="img/T1hiDvBvVv1RXrhCrK.jpg"/>
<imgclass="m"src="img/T1jrxjB_VT1RXrhCrK.jpg"/>
<imgclass="m"src="img/T1oTJjBKKT1RXrhCrK.jpg"/>
<imgclass="m"src="img/T1RICjB7DT1RXrhCrK.jpg"/>
<imgclass="m"src="img/T1vWdTBKDv1RXrhCrK.jpg"/>
</div>
<divid="biao">
<ul>
<liid="biao_1">1</li>
<liid="biao_1">2</li>
<liid="biao_1">3</li>
<liid="biao_1">4</li>
<liid="biao_1">5</li>
</ul>
</div>
</div>

</body>
<scripttype="text/javascript">
varslid=document.getElementById("banner");//varid=document.getElementById("bt");
varimgwidth=document.getElementsByClassName("m");varoli=document.getElementsByTagName("li");//console.log(oli);
//console.log(imgwidth);
vari=0;
auto();
oli[0].style.cssText="background:#ff6700;color:#fff;";functionauto(){

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(varj=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如何快速在页面中写出多个轮播图效果

使用bootstrap可以快速编写N个轮播（注意代码冲突）

❾ HTML图片轮播代码怎么写

（）<div id="butong_net_left" style="overflow:hidden;width:1000px。

（2）"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="butong_net_left1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center">

❿ 怎么用html5+css3 实现图片轮播

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

阅读全文

html5的轮播

与html5的轮播相关的阅读推荐