❶ Html中怎麼實現背景圖每5秒輪播呢
每個LI標簽都是一張圖片，再讓這個DIV超出部分隱藏，這樣只能看到一張圖片很簡單的啊。
一個DIV內放一個UL, 三個li 標簽，再5秒種把整個UL向左或者向右移動一張圖片的寬度的距離，這種類似於圖片輪播了。
你要簡單點的話，可以直接在DIV裡面放一個IMG標簽，過5秒直接改他的src屬性
❷ html5如何實現圖片輪播
靜態獲取圖片寫法，給定圖片的個數，用js實現輪播圖自動轉換。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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>
❸ HTML圖片輪播代碼怎麼寫
一、數字鍵控制代碼：
<div style="position:relative; top:-50px; left:240px;">
<a href="javascript:show(1)"><span id="I1" style="width:18px; text-align:left; background:gray">1</span></a>
<a href="javascript:show(2)"><span id="I2" style="width:18px;text-align:left;background-color:gray">2</span></a>
<a href="javascript:show(3)"><span id="I3" style="width:18px;text-align:left;background-color:gray">3</span></a>
<a href="javascript:show(4)"><span id="I4" style="width:18px;text-align:left;background-color:gray">4</span></a>
<a href="javascript:show(5)"><span id="I5" style="width:18px;text-align:left;background-color:gray">5</span></a>
<a href="javascript:show(6)"><span id="I6" style="width:18px;text-align:left;background-color:gray">6</span></a></div>
<script language="javaScript">
var nowIndex=1;
var maxIndex=6;
function show(index)
{
if(Number(index)){
clearTimeout(theTimer);
nowIndex=index;
}
for(var i=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>
二、圖片自動播放：
<div id="butong_net_left" style="overflow:hidden;width:1000px;">
<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">
❹ HTML中的圖片輪播怎麼做
可以上jquery插件庫這個網站看看，大部分資源是免費的。輪播圖也有好多。
bootstrap也提供輪播模板。
自己寫的話，假如放3張輪播圖，pic1，pic2，pic3。創建一個ul，ul中放5張圖片，順序是pic3，pic1，pic2，pic3，pic1，這樣銜接起來。設置ul的寬度是500%，li的寬度是20%，這樣圖片就能一字排開，設置ul的父元素的樣式為overflow:hidden;再用CSS3的動畫屬性，讓li中的圖片元素位移或者讓ul位移。