网页设计轮播图代码_网页HTML代码制作轮播图效果

1、网页设计中如何添加焦点切换轮播图呢

参考代码，还有一个js文件，留下邮箱发给你

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>jQuery图片放大变小切换代码</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.banner.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.banner{width:100%;overflow:hidden;height:470px;position:relative}
.banList{position:absolute;left:50%;margin-left:-960px;height:470px}
.banList li{height:470px;opacity:0;position:absolute;transform:scale(0);transition:transform 0.5s ease 0s, opacity 1.5s ease 0s;z-index:1;}
.banList li.active{opacity:1;transform:scale(1);z-index:2;}
.fomW{position:absolute;bottom:20px;left:50%;height:20px;z-index:9;width:1000px;margin-left:-500px}
.jsNav{text-align:center;}
.jsNav a{display:inline-block;background:#fff;width:15px;height:15px;border-radius:50%;margin:0 5px;}
.jsNav a.current{background:#fc8f0f;cursor:pointer}
</style>
</head>
<body>
<div class="banner">
<ul class="banList">
  <li class="active"><a href="http://sc.chinaz.com/"><img src="images/img1.jpg"/></a></li>
  <li><a href="http://sc.chinaz.com/"><img src="images/img2.jpg"/></a></li>
  <li><a href="http://sc.chinaz.com/"><img src="images/img3.jpg"/></a></li>
</ul>
<div class="fomW">
  <div class="jsNav">
   <a href="javascript:;" class="trigger current"></a>
   <a href="javascript:;" class="trigger"></a>
   <a href="javascript:;" class="trigger"></a>
  </div>
</div>
</div>

<script type="text/javascript">
$(function(){
$(".banner").swBanner();
});
</script>
</body>
</html>

2、网页制作图片轮播代码怎么插入DW

打开Macromedia Dreamweaver 8（网页制作专业工具），新建一个网页。 1. 双击桌面 Dreamweaver 8，网络中人们简称DW，单击左内上菜单“文容件”，单击“新建”，在弹出的“新建文档”中选择“类别”为基本页，右边选择“HTML”，再单击下面的“创建”，你就新建了一个网页了。2.单击拆分，这样既能看到代码部分，又能看到文档窗口，整个工作区一目了然。养成一个良好的习惯，马上在标题栏处输入网站标题，如“初学FLASH”。然后单击左上“文件”，另存为“index.html 在弹出的对话框中找到站点文件夹，保存。

插入表格，并对表格进行设置。在弹出的表格属性对话框中对表格进行如下设置。鼠标单击文档窗口的表格边框，也可以在表格中点右键，表格-选择表格，下面会显示表格的属性，我们对表格进一步进行设置。首先设置表格的对齐方式为居中，然后设置表格的高度。

复制代码后，鼠标再单击刚才我们新建的表格，看代码中是的鼠标光标在什么位置闪动，就在闪动的光标中点右键，贴上代码就行了。

3、网页设计的图片轮播，代码知道哪里错吗？

修改已有的代码要谨慎，主要是要注意路径的问题，还有就是样式的问题，回我也经常改轮播答代码，我都是现在要插入的代码里面先从头到尾看一遍，确定这个轮播的样式跟原来的样式不会有冲突，如果有则修改或删除，然后就看轮播的部分

4、网页设计图片轮播的代码插入问题。

修改已有的代码要谨慎，主要是要注意路径的问题，还有就是样式的问题，我也经常改轮播代码，我都是现在要插入的代码里面先从头到尾看一遍，确定这个轮播的样式跟原来的样式不会有冲突，如果有则修改或删除，然后就看轮播的部分，大体框架怎么拉的，还有就是它调用的js和css文件是在哪个路径下面，已经轮播图片的路径，修改轮播图片的宽高度，全部修改好了之后，先把轮播的框架拉过去，再添加link调用文件，再把js、css、文件放到正确路径下，还有图片也放到正确路径下，这样就ok了，如果这时候原来的网页发生了变形，不要慌，仔细看看样式文件，看看是否依然存在冲突。
建议在原网页中将轮播部分用注释符号在轮播的开头和结尾做个标记，以免后期修改很难找到，或漏找等问题。如：

=轮播部分=

5、网页制作中文字的轮播代码是什么

脚本说明：
将以下代码加入HTML的<Body></Body>之间

<body bgproperties="fixed">
<script language="Javascript">

bname=navigator.appName;
bversion=parseInt(navigator.appVersion)
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4))
window.onload=start
else
stop();
window.onunload=stop
if (bname=="Netscape"){
brows=true
dt=2
}
else{
brows=false
dt=20
}
var z=0;
var msg=0;
var rgb=0;
var link=false;
var status=true;
var updwn=false;
var message= new Array();
var value=0;
var h=window.innerHeight;
var w=window.innerWidth;
var timer1;
var timer2;
var timer3;
var convert = new Array()
var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");

var bgcolor="#0000FF"; //背景色
var color="#FF0000"; //字符颜色

message[0]='网页特效'
message[1]='免费资源'
message[2]='欢迎光临'
message[3]='★天天开心快乐★'

for (x=0; x<16; x++){
for (y=0; y<16; y++){
convert[value]= hexbase[x] + hexbase[y];
value++;
}
}

redx=color.substring(1,3);
greenx=color.substring(3,5);
bluex=color.substring(5,7);
hred=eval(parseInt(redx,16));
hgreen=eval(parseInt(greenx,16));
hblue=eval(parseInt(bluex,16));
eredx=bgcolor.substring(1,3);
egreenx=bgcolor.substring(3,5);
ebluex=bgcolor.substring(5,7);
ered=eval(parseInt(eredx,16));
egreen=eval(parseInt(egreenx,16));
eblue=eval(parseInt(ebluex,16));
red=ered;
green=egreen;
blue=eblue;

function start(){
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
link=false;
updwn=true;
if (brows)
res=document.layers['textanim'].top
else{
textanim.style.width=document.body.offsetWidth-20;
textanim.innerHTML='<Pre><P Class="main" Align="Center">'+message[msg]+'</P></Pre>'
res=textanim.style.top
for (x=0; x<document.all.length; x++)
if(document.all[x].id=="textanimlink")
link=true;
}
up()
}
}

function stop(){
clearTimeout(timer1);
clearTimeout(timer2);
clearTimeout(timer3);
}

function resz(){
h=window.innerHeight;
w=window.innerWidth;
if (updwn)
timer1=setTimeout('up()',1000)
else
timer2=setTimeout('down()',1000)
}

function breakf(){
if (status){
clearTimeout(timer1);
clearTimeout(timer2);
status=false
return;
}
else{
status=true;
if (updwn)
timer1=setTimeout('up()',dt)
else
timer2=setTimeout('down()',dt)
}
}

function up(){
if (red<hred){
if ((red+7)<hred)
red+=7;
else
red=hred
redx = convert[red]
}
else{
if ((red-7)>hred)
red-=7;
else
red=hred
redx = convert[red]
}

if (green<hgreen){
if ((green+7)<hgreen)
green+=7;
else
green=hgreen
greenx = convert[green]
}
else{
if ((green-7)>hgreen)
green-=7;
else
green=hgreen
greenx = convert[green]
}

if (blue<hblue){
if ((blue+7)<hblue)
blue+=7;
else
blue=hblue
bluex = convert[blue]
}
else{
if ((blue-7)>hblue)
blue-=7;
else
blue=hblue
bluex = convert[blue]
}

rgb = "#"+redx+greenx+bluex;
if (brows){
document.layers['textanim'].document.linkColor=rgb;
document.layers['textanim'].document.vlinkColor=rgb;
if (window.innerHeight!=h || window.innerWidth!=w){
clearTimeout(timer1);
resz()
return;
}
else{
document.layers['textanim'].document.write('<Pre><P Class="main" Align="Center"><font color="'+rgb+'">'+message[msg]+'</font></P></Pre>')
document.layers['textanim'].document.close();
}
}
else{
textanim.style.color=rgb;
if(link)
textanimlink.style.color=rgb;
}
if (z<38){
if (brows)
document.layers['textanim'].top--
else
textanim.style.posTop--
z++
timer1=setTimeout('up()',dt)
}
else
{
updwn=false;
down()
}
}

function down(){
if (red<ered){
if ((red+7)<ered)
red+=7;
else
red=ered
redx = convert[red]
}
else{
if ((red-7)>ered)
red-=7;
else
red=ered
redx = convert[red]
}

if (green<egreen){
if ((green+7)<egreen)
green+=7;
else
green=egreen
greenx = convert[green]
}
else{
if ((green-7)>egreen)
green-=7;
else
green=egreen
greenx = convert[green]
}

if (blue<eblue){
if ((blue+7)<eblue)
blue+=7;
else
blue=eblue
bluex = convert[blue]
}
else{
if ((blue-7)>eblue)
blue-=7;
else
blue=eblue
bluex = convert[blue]
}

rgb = "#"+redx+greenx+bluex;
if (brows){
document.layers['textanim'].document.linkColor=rgb;
document.layers['textanim'].document.vlinkColor=rgb;
if (window.innerHeight!=h || window.innerWidth!=w){
clearTimeout(timer2);
resz()
return;
}
else{
document.layers['textanim'].document.write('<Pre><P Class="main" Align="Center"><font color="'+rgb+'">'+message[msg]+'</font></P></Pre>')
document.layers['textanim'].document.close();
}
}
else{
textanim.style.color=rgb;
if(link)
textanimlink.style.color=rgb;
}

if (z<76){
if (brows)
document.layers['textanim'].top--
else
textanim.style.posTop--
z++
timer2=setTimeout('down()',dt)
}
else
{
if (brows){
document.layers['textanim'].document.write('')
document.layers['textanim'].document.close();
}
else
textanim.innerHTML='';
window.clearInterval(timer2);
if(msg<message.length-1){
msg++;
z=0;
if (brows){
document.layers['textanim'].top=res;
}
else
textanim.style.top=res;
timer3=setTimeout('start()',100);
}
else
{
msg=0;
z=0;
if (brows)
document.layers['textanim'].top=res;
else
textanim.style.top=res;
timer3=setTimeout('start()',2000);
}
}
}
</script>
<div id="textanim" onclick="breakf()"
style="left: 36; position: absolute; top: 60; width: 447; height: 19">　</div>

</body>
</html>

希望可以帮到你

6、网页HTML代码制作轮播图效果

用marquee 这个是没法解决的，网上现在的解决办法都是 javascript+css 来解决

你可也搜索一下焦点图或是焦点轮转图，有很多的jquery 的插件或是javascript 原生代码，
这个原理也不是控制table 而是控制div 样式层 id 、 class 的样式表来，做的轮转。

7、网页设计中的图片轮播是怎么写代码的？

搜一下bcastr，一个flash+xml幻灯片播放器

8、网页轮播图怎么做啊，搜了好多代码自己也做不出来

网页轮播图主要包含三部分：

1、轮播图片；2、css和html代码部分；3、轮播js代码部分

下面的可以参考：

<!DOCTYPE html>

<head>

<title>Document</title>

.swiper-container{

width: 790px;

height: 340px;

}

</style>

</head>

<body>

</div>

</div>

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>

</html>

效果图如下：

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

导航:首页 > 万维百科 > 网页设计轮播图代码

网页设计轮播图代码

与网页设计轮播图代码相关的知识