① 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>

效果图如下：

另外 新手建议还是直接选用已有的，现在网上很多的！