① html輪播代碼

<script>
window.onload=function(){//頁面載入完成執行
varimages=document.getElementsByTagName('img');//取得所有img圖片
varpos=0;//定義pos變數初始值=0
varlen=images.length;//取得圖片個數
setInterval(function(){//定每1秒時執行
images[pos].style.display='none';//第一個圖片隱藏,
pos=++pos==len?0:pos;//pos在圖片個數范圍內遞增
images[pos].style.display='inline';//下一個圖片顯示
},1000);
};
</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">

③ 網站怎麼做圖片輪播

有賞是什麼賞呢。。。6000財富值也就10塊錢而已

O(∩_∩)O~

重要位置都給你做好了代碼解釋 非常完善


<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>簡單的自動播放</title>
<style>
body{margin:0px;padding:0px;}
#banner{margin:auto;width:600px;height:300px;border:1pxsolid#ddd;position:relative;}
#bannerimg{width:100%;height:100%;}
#xd{position:absolute;right:0px;bottom:0px;}
#xdspan{display:block;float:left;margin-right:10px;margin-bottom:10px;cursor:pointer;}
#xdspan:hover{color:#069;}
.xd1{color:#eee;}
.xd2{color:#069;}
#foot{text-align:center;font-size:14px;}
</style>
</head>
<body>
<divid="banner">
<imgid="imgs"src="images/b1.jpg">
<divid="xd">
<spanclass="xd2">●</span>
<spanclass="xd1">●</span>
<spanclass="xd1">●</span>
<spanclass="xd1">●</span>
<spanclass="xd1">●</span>
<spanclass="xd1">●</span>
</div>
</div>
<divid="foot"><ahref="http://www.boaer.com">柏艾爾</a></div>
<script>
vartimer=setInterval("AutoPlay()",1300);//全局變數，定義定時器，每隔1300毫秒執行一次AutoPlay()函數
varp=1;//全局變數，存儲當前播放的第幾張圖片
varxdspan=document.getElementById("xd").getElementsByTagName("span");//獲取xd下的所有span標簽
varxdspanlength=xdspan.length;//獲取span標簽的數量
for(vari=0;i<xdspanlength;i++){
	xdspan.item(i).onclick=function(){//通過for循環為所有span標簽添加點擊事件
		for(vari=0;i<xdspanlength;i++){//通過for循環為所有span標簽設置class="xd1"
			xdspan.item(i).className="xd1";
			}
		this.className="xd2";//設置點擊的span標簽class="xd2"
		for(vari=0;i<xdspanlength;i++){
			if(xdspan.item(i).className=="xd2"){//通過for循環判斷當前點擊的是第幾個小圓點，然後修改圖片地址
				document.getElementById("imgs").src='images/b'+(i+1)+'.jpg';
				p=i+1;////全局變數，存儲當前播放的第幾張圖片，以便從當前圖片開始播放下一張圖片
				}
			}
		}
	}
functionAutoPlay(){//自動播放函數
	if(p>=7){p=1;}//只有6張圖片，當p大於等於7時就從第一張圖片開始
	for(vari=0;i<xdspanlength;i++){//通過for循環為所有span標簽設置class="xd1"
			xdspan.item(i).className="xd1";
			}
	xdspan.item(p-1).className="xd2";//設置當前播放的span標簽class="xd2"
	document.getElementById("imgs").src='images/b'+p+'.jpg';//修改圖片地址
	p++;
	}
document.getElementById("banner").onmouseover=function(){clearInterval(timer);}//當滑鼠移入輪播區域時，停止自動播放
document.getElementById("banner").onmouseout=function(){timer=setInterval("AutoPlay()",1300);}//當滑鼠移出輪播區域時，繼續自動播放
</script>
</body>
</html>


width:600px; height:300px

對應的width是寬度 height是高度 自行調整即可

④ html代碼做圖片輪播效果問題

試試這個圖片切換

有12345數字一起切換

滑鼠點一下數字會變換到另一張圖片，不點就會自動換

裡面有教程和源碼

⑤ 網頁HTML代碼製作輪播圖效果

用marquee 這個是沒法解決的，網上現在的解決辦法都是 javascript+css 來解決

你可也搜索一下 焦點圖 或是焦專點輪轉圖，有很多的屬jquery 的插件 或是javascript 原生代碼，
這個原理也不是控制table 而是控制div 樣式層 id 、 class 的樣式表來，做的輪轉。

⑥ html網頁里圖片輪換效果是怎麼製作.

呵呵，這種效果網上有專門的模板的

不過一般是ASP的，可能HTML是做好以後

自動生成的，

⑦ 如何在網頁上添加輪播圖片

1.程序說明
原理就是通過不斷設置滑動對象的left(水平切換)和top(垂直切換)來實現圖片切換的動態效果。
首先需要一個容器，程序會自動設置容器overflow為hidden，如果不是相對或絕對定位會同時設置position為relative，
滑動對象會設置為絕對定位：
var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";

如果沒有設置Change切換參數屬性，會自動根據滑動對象獲取：
this.Change = this.options.Change ? this.options.Change :
this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;

執行Run方法就會開始進入切換，其中有一個可選參數用來重新設置要切換的圖片索引：
index == undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
== undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
之後就到設置使用tween緩動時需要的參數了，
包括_target(目標值)、_t(時間)、_b(初始值)和_c(變化量)：
this._target = -Math.abs(this.Change) * (this.Index = index);
this._t = 0;
this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
this._c = this._target - this._b;
還有Duration(持續時間)是自定義屬性。
參數設置好後就執行Move程序開始移動了。
裡面很簡單，首先判斷_c是否有值（等於0表示不需要移動）和_t是否到達Duration，
未滿足條件就繼續移動，否則直接移動到目標值並進行下一次切換：
if (this._c && this._t < this.Duration) {
this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
this._timer = setTimeout(Bind(this, this.Move), this.Time);
}else{
this.MoveTo(this._target);
this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
}
使用說明
實例化需要3個參數，分別是容器對象，滑動對象和切換數量，之後可以直接執行Run方法運行：
new SlideTrans("idContainer", "idSlider", 3).Run();
還有以下可選屬性：
Vertical: true,//是否垂直方向（方向不能改）
Auto: true,//是否自動
Change: 0,//改變數
Duration: 50,//滑動持續時間
Time: 10,//滑動延時
Pause: 2000,//停頓時間(Auto為true時有效)
onStart: function(){},//開始轉換時執行
onFinish: function(){},//完成轉換時執行
Tween: Tween.Quart.easeOut//tween運算元
其中Vertical初始化後就不能修改，Tween運算元可參照這里的緩動效果選擇（實例中選了其中3個）。
還有提供了以下方法：
Next: 切換下一個
Previous: 切換上一個
Stop: 停止自動切換
還有上面說到的Run
程序代碼:
var SlideTrans = function(container, slider, count, options) {
this._slider = $(slider);
this._container = $(container);//容器對象
this._timer = null;//定時器
this._count = Math.abs(count);//切換數量
this._target = 0;//目標值
this._t = this._b = this._c = 0;//tween參數

this.Index = 0;//當前索引

this.SetOptions(options);

this.Auto = !!this.options.Auto;
this.Duration = Math.abs(this.options.Duration);
this.Time = Math.abs(this.options.Time);
this.Pause = Math.abs(this.options.Pause);
this.Tween = this.options.Tween;
this.onStart = this.options.onStart;
this.onFinish = this.options.onFinish;

var bVertical = !!this.options.Vertical;
this._css = bVertical ? "top" : "left";//方向

//樣式設置
var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";

this.Change = this.options.Change ? this.options.Change :
this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;
};
SlideTrans.prototype = {
//設置默認屬性
SetOptions: function(options) {
this.options = {//默認值
Vertical: true,//是否垂直方向（方向不能改）
Auto: true,//是否自動
Change: 0,//改變數
Duration: 50,//滑動持續時間
Time: 10,//滑動延時
Pause: 2000,//停頓時間(Auto為true時有效)
onStart: function(){},//開始轉換時執行
onFinish: function(){},//完成轉換時執行
Tween: Tween.Quart.easeOut//tween運算元
};
Extend(this.options, options || {});
},
//開始切換
Run: function(index) {
//修正index
index == undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
//設置參數
this._target = -Math.abs(this.Change) * (this.Index = index);
this._t = 0;
this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
this._c = this._target - this._b;

this.onStart();
this.Move();
},
//移動
Move: function() {
clearTimeout(this._timer);
//未到達目標繼續移動否則進行下一次滑動
if (this._c && this._t < this.Duration) {
this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
this._timer = setTimeout(Bind(this, this.Move), this.Time);
}else{
this.MoveTo(this._target);
this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
}
},
//移動到
MoveTo: function(i) {
this._slider.style[this._css] = i + "px";
},
//下一個
Next: function() {
this.Run(++this.Index);
},
//上一個
Previous: function() {
this.Run(--this.Index);
},
//停止
Stop: function() {
clearTimeout(this._timer); this.MoveTo(this._target);
}
};

⑧ Html5如何快速在頁面中寫出多個輪播圖效果

使用bootstrap可以快速編寫N個輪播（注意代碼沖突）

⑨ 我想在網頁設計上弄圖片輪播的效果。求個代碼。

直接在網路上面搜一下

js特效，就有一大堆了。這里給你的代碼你也調試不了。
去那些js特效網可以直接調試。希望可以幫到你。
我的網站是
sb網
，你可以網路一下，借鑒。

⑩ 網頁輪播圖怎麼做啊，搜了好多代碼自己也做不出來

網頁輪播圖主要包含三部分：

1、輪播圖片；2、css和html代碼部分；3、輪播js代碼部分

下面的可以參考：

  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  • <meta charset="UTF-8">

  • <title>Document</title>

  • <link rel="stylesheet" type="text/css" href="swiper-3.4.1.min.css">

  • <script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>

  • <script type="text/javascript" src="swiper-3.4.1.jquery.min.js"></script>

  • <style type="text/css">

  • .swiper-container{

  • width: 790px;

  • height: 340px;

  • }

  • </style>

  • </head>

  • <!-- 結構以及class的類名不允許更改 -->

  • <body>

  • <div class="swiper-container">

  • <div class="swiper-wrapper">

  • <div class="swiper-slide">![]((1).jpg)</div>

  • <div class="swiper-slide">![]((2).jpg)</div>

  • <div class="swiper-slide">![]((3).jpg)</div>

  • <div class="swiper-slide">![]((4).jpg)</div>

  • <div class="swiper-slide">![]((5).jpg)</div>

  • <div class="swiper-slide">![]((6).jpg)</div>

  • <div class="swiper-slide">![]((7).jpg)</div>

  • <div class="swiper-slide">![]((8).jpg)</div>

  • </div>

  • <!-- 如果需要分頁器 -->

  • <div class="swiper-pagination"></div>

  • <!-- 如果需要導航按鈕 -->

  • <div class="swiper-button-prev"></div>

  • <div class="swiper-button-next"></div>

  • <!-- 如果需要滾動條 -->

  • <!-- <div class="swiper-scrollbar"></div> -->

  • </div>

  • <script type="text/javascript">

  • var mySwiper = new Swiper ('.swiper-container', {

  • // 滾動方向 horizontal/vertical

  • direction: 'horizontal',

  • // 自動播放

  • autoplay:2000,

  • // 是否循環播放

  • loop: true,

  • // 如果需要分頁器（小圓點）

  • // 是否需要分頁器

  • pagination: '.swiper-pagination',

  • // 點擊分頁器是否切換到對應的圖片 是 true 否 false

  • paginationClickable:true,

  • // 如果需要前進後退按鈕

  • nextButton: '.swiper-button-next',

  • prevButton: '.swiper-button-prev',

  • // 用戶操作swiper之後，是否禁止autoplay。默認為true：停止。

  • // 如果設置為false，用戶操作swiper之後自動切換不會停止，每次都會重新啟動autoplay。

  • // 操作包括觸碰，拖動，點擊pagination等。

  • autoplayDisableOnInteraction:false,

  • })

  • </script>

  • </body>

  • </body>

  • </html>

效果圖如下：

另外 新手建議還是直接選用已有的，現在網上很多的！