导航:首页 > 万维百科 > 网页设计实现图片轮播

网页设计实现图片轮播

发布时间:2021-02-08 19:22:02

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

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

2、网页设计中如何实现图片的自动切换,好想动画效果似的,但不是插入的视频,如下图所示

试试这个图片轮播
有12345数字一起切换
有小图大图一起切换
里面有教程和源码

3、如何用只用html 制作图片轮播效果?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="zh" lang="zh">
<head>
<title>完全利用CSS实现图片切换特效_网页代码站()</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style>
dl { position:absolute;width:240px;height:170px;border:10px solid #eee; }
dd { margin:0;width:240px;height:170px;overflow:hidden; }
img { border:1px solid black }
dt { position:absolute;right:3px;top:50px; }
a { display:block;margin:1px;width:20px;height:20px;text-align:center;font:700 12px/20px "宋体",sans-serif;color:#fff;text-decoration:none;background:#666;border:1px solid #fff;filter:alpha(opacity=40);opacity:.4; }
a:hover {background:#000}
</style>
</head>
<body>
<dl$amp;>amp;$lt;dt$amp;>amp;$lt;a #a" title="">1</a>
<a #b" title="">2</a>
<a #c" title="">3</a>
</dt>
<dd$amp;>amp;$lt;img src="" alt="" id="a" />
<img src="" alt="" id="b" />
<img src="" alt="" id="c" />
</dd>
</dl>
</body>
</html>

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

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

5、求指点网页设计图片轮播!

指点网页设计图片轮播这类文章,多查点儿资料,仿照格式,充实内容,就ok了。

6、【急】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">
<!--这里改成你自己的jQuery文件位置,因为谷歌被墙了-->
</script><script src="jquery.flexslider.js"></script>
<!-- 把下面这行代码放在 <head> 标签里面, 前面三个链接js脚本的代码后面 -->
<script type="text/javascript" charset="utf-8">  $(window).load(function() {    $('.flexslider').flexslider();  });</script>
</head>

<body>
<!-- Place somewhere in the <body> of your page -->
 <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>

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

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

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

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

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

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

与网页设计实现图片轮播相关的知识