网页设计里面图片轮播是_网页设计中如何添加焦点切换轮播图呢

1、网页设计图片轮播的按钮问题大家帮忙看看（详细加分）

按你的这思路改的，不过一般情况不会这么去写, id="img1" id="img2" 这两个属性可以去了，<DIV>里面添加一个属性 id="images"
<html>
<head>
<title>Untitled</title>
<style>
img{display:none;}
</style>
<script>
var index=1;
var timer;
var ImageList;
function switchImg(id){
/*
document.getElementById("img"+index).style.display="none";
if(index<2){index++;}
else{index=1;}
document.getElementById("img"+index).style.display="block";
*/
ImageList = document.getElementById(id).getElementsByTagName('img');
if(ImageList){
timer = window.setInterval(changeImage,1000);
}
}
function changeImage(){
index = ++index >= ImageList.length ? 0 : index;
for(var i = 0; i < ImageList.length; i++){
ImageList[i].style.display = 'none';
}
ImageList[index].style.display = 'block';
}
</script>
</head>
<body onLoad="switchImg('images')">
<div id="images" style="border:1px solid black;width:300px;height:100px;">
<img src="hang.jpg" width="15" height="30" id="img1">
<img src="beijing111.jpg" width="20" height="30" id="img2">
</div>
</body>
</html>

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

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

3、网页设计图片轮播的问题大家帮忙看看（详细加分）

这个你只要知道下面几个就好了
1.if(index<5){index++;} 这里的5就是图片的张数图片有几张写几张
2.timer = window.setTimeout("switchImg()",5000); 这里的5000是转换时间数字越小越快
3.<img src="hang.jpg" width="15" height="30" id="img1">
......
这些是你要展示的图片 src="hang.jpg" 这个是图片路径 width 图片宽 height 图片高 id 定义的名字

主要就这3个其他的你可以不管如果也就只有5张图片就把第3点里面的换掉就好了

4、【急】html网页制作,如何实现对图片轮播脚本的调用

<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">

</script><script src="jquery.flexslider.js"></script>

<script type="text/javascript" charset="utf-8">  $(window).load(function() {    $('.flexslider').flexslider();  });</script>
</head>

<body>

<div class="flexslider">
  <ul class="slides">
   <li>
    <img src="slide1.jpg" />
   </li>
   <li>
    <img src="slide2.jpg" />
   </li>
   <li>
    <img src="slide3.jpg" />
   </li>
  </ul>
</div>
</body>

剩下的配置部分根据网页上的提示来就行了

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

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

=轮播部分=

6、dw网页制作的图片轮播问题

没太明白你的意思。图片轮播通常是一个css样式里加上一个图片轮播的数组实现循环播放，你要在数组遍历到某一点的时候做跳转吗？

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

参考代码，还有一个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>

8、请问怎么在制作网页上插入图片轮播？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pic player</title>
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/tween.js"></script>
</head>
<style type="text/css">
img{border:0;}
</style>
<body>
<div id="picplayer" style="position:relative;overflow:hidden;width:300px;height:300px;clear:none;border:solid 1px #ccc;">
there is a pic-player
</div>
<script>
var p = $('#picplayer');
var pics1 = [{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net/#',time:5000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net/#',time:4000},{url:'http://img.jb51.net/online/picPlayer/3.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net',time:6000}];
initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0]);
//
//
function initPicPlayer(pics,w,h)
{
//选中的图片
var selectedItem;
//选中的按钮
var selectedBtn;
//自动播放的id
var playID;
//选中图片的索引
var selectedIndex;
//容器
var p = $('#picplayer');
p.text('');
p.append('<div id="piccontent"></div>');
var c = $('#piccontent');
for(var i=0;i<pics.length;i++)
{
//添加图片到容器中
c.append('<a href="'+pics[i].link+'" target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>');
}
//按钮容器，绝对定位在右下角
p.append('<div id="picbtnHolder" style="position:absolute;top:'+(h-25)+'px;width:'+w+'px;height:20px;z-index:10000;"></div>');
//
var btnHolder = $('#picbtnHolder');
btnHolder.append('<div id="picbtns" style="float:right; padding-right:1px;"></div>');
var btns = $('#picbtns');
//
for(var i=0;i<pics.length;i++)
{
//增加图片对应的按钮
btns.append('<span id="picbtn'+i+'" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> '+(i+1)+' </span> ');
$('#picbtn'+i).data('index',i);
$('#picbtn'+i).click(
function(event)
{
if(selectedItem.attr('src') == $('#picitem'+$(this).data('index')).attr('src'))
{
return;
}
setSelectedItem($(this).data('index'));
}
);
}
btns.append(' ');
///
setSelectedItem(0);
//显示指定的图片index
function setSelectedItem(index)
{
selectedIndex = index;
clearInterval(playID);
//alert(index);
if(selectedItem)selectedItem.fadeOut('fast');
selectedItem = $('#picitem'+index);
selectedItem.fadeIn('slow');
//
if(selectedBtn)
{
selectedBtn.css('backgroundColor','#eee');
selectedBtn.css('color','#000');
}
selectedBtn = $('#picbtn'+index);
selectedBtn.css('backgroundColor','#000');
selectedBtn.css('color','#fff');
//自动播放
playID = setInterval(function()
{
var index = selectedIndex+1;
if(index > pics.length-1)index=0;
setSelectedItem(index);
},pics[index].time);
}
}

</script>
</body>
</html>

详细出处参考：http://www.jb51.net/article/17008.htm

导航:首页 > 万维百科 > 网页设计里面图片轮播是

网页设计里面图片轮播是

与网页设计里面图片轮播是相关的知识