网页5张图片轮播代码

合集下载

图片轮番代码

图片轮番代码<div class="box J_TBox" ><div class="shop-slider"><div class="bd"><div class="slider-promo J_Slider J_TWidget" data-type="scroll"data-widget-type="Slide" style="height:图片高度值px;"data-widget-config="{'effect':'scrolly','contentCls': 'lst-main','navCls': 'lst-trigger', 'activeTriggerCls': 'current'}"><ul class="lst-main"><li><a href="连接地址1" style="height:图片1高度px;"><img src="图片1地址" alt="" /></a></li><li><a href="连接地址2" style="height:图片2高度px;"><img src="图片2地址" alt="" /></a></li><li><a href="连接地址3" style="height:图片3高度px;"><img src="图片3地址" alt="" /></a></li><li><a href="连接地址4" style="height:图片4高度px;"><img src="图片4地址" alt="" /></a></li></ul></div></div></div></div>另一<div class="col-main clearfix"><div class="shop-slider"><div class="bd"><div style="POSITION: relative; HEIGHT: 200px" class="slider-promo J_Slider J_TWidget" ksEventTargetId="1291389466017" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="scrolly"><ul style="POSITION: absolute" class="lst-main"></li><li style="DISPLAY: block"><a style="HEIGHT: 200px" target="_blank" href="目标链接网址1"><img alt="" src="图片地址1"></a></li></li><li style="DISPLAY: block"><a style="HEIGHT: 200px" target="_blank" href="目标链接网址2"><img alt="" src="图片地址2"></a></li></li><li style="DISPLAY: block"><a style="HEIGHT: 200px" target="_blank" href="目标链接网址3"><img alt="" src="图片地址3"></a></li></li><li style="DISPLAY: block"><a style="HEIGHT: 200px" target="_blank" href="目标链接网址4"><img alt="" src="图片地址4"></a></li></li><li style="DISPLAY: block"><a style="HEIGHT: 200px" target="_blank" href="目标链接网址5"><img alt="" src="图片地址5"></a></li></ul><ul class="lst-trigger"><li class="current" ksEventTargetId="1291389466015">1</li><li ksEventTargetId="1291389466016">2</li><li ksEventTargetId="1291389466017">3</li><li ksEventTargetId="1291389466018">4</li><li ksEventTargetId="1291389466019">5</li></ul></div></div></div></div>注解：紫色部分代表需要展示图片的长度，记得实践绿色部分代表翻页代码，你需要几张翻页就复制几个，记得实践哦<title>javascript图片轮换</title><style type="text/css">position:relative;width:400px;height:300px;border:10px solid #EFEFDA; overflow:hidden;}#album dt {margin:0;padding:0;width:400px;height:300px;overflow:hidden;}#album img {border:2px solid #000;}#album dd {position:absolute;right:0px;bottom:10px;}#album a {display:block;margin-right:10px;width:15px;height:15px;line-height:15px;text-align:center;text-decoration:none;color:#808080;background:transparent url(/jscss/demoimg/200910/o_button.gif) no-repeat -15px 0; }#album a:hover ,#album a.hover{color:#F8F8F8;background-position:0 0;}</style><dl id="album"><dt><img id="index1" alt=余秋的黄昏" src="/jscss/demoimg/wall3.jpg" /><img id="index2" alt="美丽欧洲" src="/jscss/demoimg/wall4.jpg" /><img id="index3" alt="巨石阵的神秘" src="/jscss/demoimg/wall5.jpg" /></dt><dd><a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</a></dd></dl><script type="text/javascript">function imageRotater(id){var cases = "",album = document.getElementById(id),images = album.getElementsByTagName("img"),links = album.getElementsByTagName("a"),dt = album.getElementsByTagName("dt")[0],length = images.length,aIndex = 1,aBefore = length;for(var i=0;i< length;i++){cases += images[i].id + ':"'+images[i].getAttribute("src")+'",'}images[0].style.cssText = "position:absolute;top:0;left:0;";//修正图片位置错误var tip = document.createElement("dd");tip.style.cssText ="position:absolute;bottom:0;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";album.insertBefore(tip,dt.nextSibling);if(!+"\v1"){tip.style.color = "#369";tip.style.filter = "alpha(opacity=67)"}else{tip.style.cssText += "background: rgba(164, 173, 183, .65);" }cases = eval("({"+cases.replace(/,$/,"")+"})");for(var i=0;i<length;i++){links[i].onclick = function(e){e =e || window.event;var index = this.toString().split("#")[1];aIndex = index.charAt(index.length-1);//☆☆☆☆images[0].src = cases[index];tip.innerHTML = images[aIndex -1].getAttribute("alt");!+"\v1" ?(e.returnValue = false) :(e.preventDefault()); }}var prefix = images[0].id.substr(0,images[0].id.length -1); (function(){setTimeout(function(){if(aIndex > length){aIndex = 1;}images[0].src = cases[prefix+aIndex];tip.innerHTML = images[aIndex -1].getAttribute("alt");tip.style.bottom = "-40px";links[aBefore-1].className = "";links[aIndex-1].className = "hover";aBefore = aIndex;aIndex++;move(tip);setTimeout(arguments.callee,1500)},1500)})()var move = function(el){var begin = parseFloat(el.style.bottom),speed = 1;el.bottom = begin;(function(){setTimeout(function(){el.style.bottom = el.bottom + speed + "px";el.bottom += speed;speed *= 1.5;//下一次移动的距离if(el.bottom >= 0){el.style.bottom = "0px";}else{setTimeout(arguments.callee,23);}},25)})()}}window.onload = function(){try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};imageRotater("album");}</script>说明：<li style="DISPLAY: block"><img alt="链接的宝贝地址" src="图片地址" width=750 height=316> </li>，这里面的链接的宝贝地址不用解释了吧就是点击图片进入什么地方的链接，这里是张张图片为例，比如下面一张你看不到怎么链接的宝贝，可以在淘宝自定义里点击这张图片，就可以链接你的宝贝地址就可以了，对于有些专家不喜欢就这两张，喜欢多一点，没关系，只要把第一张图片的所有代码复印，按下回车键，然后粘贴，依次这样就可以了，还有后面的数字看你所要添加几张，仿前面写一些代码就可以好了，比如第四张（<li>4</li>)具体情况，如有我说的清楚的地方，随时联系我好了。

[Web]通用轮播图代码示例

[Web]通⽤轮播图代码⽰例⾸先是准备好的⼏张图⽚, 它们的路径是: "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg"代码最基本的 HTML 代码:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Test</title><link rel="stylesheet" href="css/index.css" /> <script src="js/index.js"></script> </head><body><div id="test" class="slider"><img id="img1" src="img/1.jpg" class="current"><img id="img2" src="img/2.jpg"><img id="img3" src="img/3.jpg"></div><button onclick="setCurrent(0)">1</button> <button onclick="setCurrent(1)">2</button><button onclick="setCurrent(2)">3</button><button onclick="setCurrent(3)">4</button><button onclick="setCurrent(4)">5</button><button onclick="setCurrent(5)">6</button><script>setInterval(moveNext, 5000); // 每隔5s, 切换到下⼀张图⽚</script></body></html>引⼊的样式表:.slider { /* 指定轮播图容器尺⼨, 相对定位, 隐藏溢出内容 */width: 750px;height: 450px;position: relative;overflow: hidden;}.slider img { /* 指定每⼀个图⽚的尺⼨, 过渡时间, 绝对定位 */width: 100%;height: 100%;transition: all 0.5s;position: absolute;}.slider img { /* 指定所有图⽚⽔平位移-100% */transform: translateX(-100%);}.slider img.current { /* 指定带有current类的图⽚不进⾏⽔平移动 */transform: translateX(0);}.slider img.current~img{ /* 指定位于带有current类的图⽚之后的所有图⽚⽔平位移为100% */transform: translateX(100%);}.slider img.current, /* 指定带有current或last类的图⽚置顶 */.slider st{z-index: 999;}引⼊的JavaScript:function getImages() {return document.getElementById("test").querySelectorAll("img"); // 搜找该页⾯下轮播图容器中的所有img}function getCurrent() {return document.getElementById("test").querySelector("img.current"); // 搜找该页⾯下轮播图容器中当前展⽰的img}function setCurrent(index) {var imgs = getImages();var cur = getCurrent();imgs.forEach(v => v.className = ""); // 清空所有图⽚的类名cur.className = "last"; // 设置当前展⽰的图⽚的类名为 "last", 意为: "上⼀次展⽰的图⽚"imgs[index].className = "current"; // 设置要设置的图⽚的类名为 "current"}function moveNext() { // 移动展⽰图⽚到下⼀个var imgs = getImages();var curIndex;for (curIndex = 0; curIndex < imgs.length; curIndex++) {if (imgs[curIndex].className == "current") {break;}}if (curIndex + 1 < imgs.length) {setCurrent(curIndex + 1);} else {setCurrent(0);}}原理图⽚集为⼀个序列, 当前展⽰的图⽚在中间, 展⽰图⽚之前的图⽚则是在左边, ⽽之后的图⽚则是在右边.任意设置⼀个图⽚为当前展⽰的图⽚(即设置类名为current), 那么该图⽚将移动到中间. ⽽其它的图⽚, ⾃然也会移动到它两边.由于滑动时, 需要显⽰将要展⽰的图⽚, 以及将要隐藏的图⽚, 所以这两张图⽚需要置顶, 否则, 进⾏多张图⽚的切换时, 将由于默认层级关系⽽导致异常, 故设置 .current 与 .last 的 z-index 为 999.效果。

多张图片滚动代码大全

多张图片滚动代码大全图片滚动代码(从右向左滚动)<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"><img border="0" src="要滚动的图片地址1"><img border="0" src="要滚动的图片地址2"></marquee>图片滚动代码(从下往上滚动)<marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"><img border="0" src="要滚动的图片地址1"><img border="0" src="要滚动的图片地址2"></marquee>改版：<marquee ONMOUSEOUT=this.scrollDelay=1 ONMOUSEOVER=this.scrollDelay=600 scrollamount=1SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle> <img border="0" src="要滚动的图片地址1"><img border="0" src="要滚动的图片地址2"></marquee>说明：1.direction属性:决定文本的滚动方向，分为向左left和向右right，up和down默认状态向左。

图片滚动代码

我把“图片轮播”代码跟大家分享一下，代码如下：<DIV style="WIDTH: 宽度px; HEIGHT: 高度px" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'fade','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="fade"><ul class=lst-main><li><A style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blank><img alt="" src="图片地址"></A></li><li><A style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blank><img alt="" src="图片地址"></A></li></ul></DIV>上下切换代码：<DIV style="WIDTH: 宽度px; HEIGHT: 高度px" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="scroll"><ul class=lst-main><li><A style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blank><img alt="" src="图片地址"></A></li><li><A style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blank><img alt="" src="图片地址"></A></li></ul></DIV>多图滚动<!doctype html><html><head><meta charset="UTF-8"><title>auto-image</title><script src="image/jquery.js"></script><style type="text/css">body,ul,li{padding: 0; margin: 0;}ul,li{list-style: none;}body{font-size: 14px;}#demo1{position: relative;margin: 50px auto;width: 700px;border:1px solid #ccc;}#demo1 .img_list{overflow: hidden; position: relative; height: 260px;}/* 根据图片的张数来设定ul的宽度*/.img_list ul{ width: 3500px; position: absolute; height: 260px; left: 0px;}.img_list li{ float: left; width: 700px;}.img_list img{ margin: 1px; width: 698px; height: 258px;}/* 图片对应的按钮样式*/.btn_list { overflow: hidden;padding: 4px;border: 1px solid #ccc;}.btn_list li{ float: left; margin-right: 10px; color: #999; border: 1px solid #ccc; } .btn_list li:hover,.btn_list li.on{ cursor: pointer; border: 1px solid #E204A4;}.btn_list li img{ width: 163px; height: 60px; display: block;}.btn_list .last{ margin-right: 0;}/* 左右点击的按钮样式*/#demo1 .toLeft,#demo1 .toRight{display: none;position: absolute;width: 20px;height: 30px;top: 110px;background: url(image/zbbg_24.png) no-repeat 0 -150px;}/* 图片对应的说明*/.img_intro{position: absolute;bottom: 0;left: 0;width: 100%;height: 25px;}.img_intro .img_intro_bg,.img_intro .text{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}.img_intro .img_intro_bg{background: #000;opacity: .3;z-index: 999;}.img_intro .text{padding: 5px 10px;z-index: 1000;color: #999;}#demo1 .toLeft{left: 20px;}#demo1 .toRight{right: 20px;background-position: -50px -150px;}</style></head><body><div id="demo1"><div class="wrap"><div class="img_list"><ul><li><a href="" target="_blank"><img src="image/gsh_banner1.jpg" alt="寻花故事"></a></li><li><a href="" target="_blank"><img src="image/gsh_banner2.jpg" alt="金瓶梅"></a></li><li><a href="" target="_blank"><img src="image/gsh_banner3.jpg" alt="视频听书"></a></li><li><a href="" target="_blank"><img src="image/gsh_banner4.jpg" alt="盗墓故事"></a></li></ul><a href="#" id="toLeft" class="link toLeft"></a><a href="#" id="toRight" class="link toRight"></a><div class="img_intro"><div class="text"><a href="#" target="_blank"></a></div><div class="img_intro_bg"></div></div></div><div class="btn_list"><ul></ul></div></div></div><script>var index = 0;var timer = 0;var ulist = $('.img_list ul');var blist = $('.btn_list ul');var list = ulist.find('li');var llength = list.length;//li的个数，用来做边缘判断var lwidth = $(list[0]).width();//每个li的长度，ul每次移动的距离var uwidth = llength * lwidth;//ul的总宽度function init(){//生成按钮(可以隐藏)addBtn(list);//显示隐藏左右点击开关$('.link').css('display', 'none');$('.link').bind('click', function(event) {var elm = $(event.target);doMove(elm.attr('id'));return false;});//初始化描述var text = ulist.find('li').eq(0).find('img').attr('alt');var link = ulist.find('li').eq(0).find('a').attr('href');$('.img_intro .text a').text(text);$('.img_intro .text a').attr('href',link);//显示和隐藏左右切换按钮$('.wrap').hover(function() {$('.link').fadeIn(1000);}, function() {$('.link').fadeOut(1000);});auto();}function auto(){//定时器timer = setInterval("doMove('toRight')",3000);$('.img_list a, .btn_list li').hover(function() {clearInterval(timer);}, function() {timer = setInterval("doMove('toRight')",3000);});}function changeBtn(i){blist.find('li').eq(i).addClass('on').siblings().removeClass('on');var text = ulist.find('li').eq(i).find('img').attr('alt');var link = ulist.find('li').eq(i).find('a').attr('href');$('.img_intro .text a').text(text);$('.img_intro .text a').attr('href',link);}function addBtn (list){for (var i = 0; i < list.length; i++) {var imgsrc = $(list[i]).find('img').attr('src');var listCon = '<li><img src="'+imgsrc+'""></li>';$(listCon).appendTo(blist);//隐藏button中的数字//list.css('text-indent', '10000px');};blist.find('li').first().addClass('on');blist.find('li').last().addClass('last');blist.find('li').click(function(event) {var _index = $(this).index();doMove(_index);});}function doMove(direction){//向右按钮if (direction =="toRight") {index++;if ( index< llength) {uwidth = lwidth *index;//ulist.css('left',-uwidth);ulist.animate({left: -uwidth}, "slow");}else{//ulist.css('left','0px');ulist.animate({left: '0px'}, "slow");index = 0;};//向左按钮}else if(direction =="toLeft"){index--;if ( index < 0) {index = llength - 1;}uwidth = lwidth *index;//ulist.css('left',-uwidth);ulist.animate({left: -uwidth}, "slow");//点击数字跳转}else{index = direction;uwidth = lwidth *index;//ulist.css('left',-uwidth);ulist.animate({left: -uwidth}, "slow");};changeBtn(index);}init();</script></body></html>。

软件技术《分步实现轮播与参考代码》

使用纯CSS3代码实现简单的图片轮播。

设计思路：以5张图片为例：1.基本布局：将5张图片左浮动横向并排放入一个div容器（#photos）内，图片设置统一尺寸，div宽度设置5个图片的总尺寸，然后放入相框容器div（#frame），相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。

2.设置动画：然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。

5张图片，需要切换4次，定义动画0%，20%，40%，80%，100%。

3.动画分解：为了让图片切换后静置一段时间，可以将动画细分为：位移切换和静置两个阶段。

即20%~40%里面包含切换到第二张图片并且将第二张图片静置。

另外，根据需要可以对各个图片添加相应的序号和图片简介。

4.其他事件：如果需要点击事件的话，配合js完成其他特效（如：点击序号显示相应的图片、上一张下一张等）5.效果图：补充：~ 选择器，作用是查找某一个指定元素的后面的所有兄弟结点。

例如，span~p{background: green;}具体实施步骤：1、html页面内容元素<body><div id="photoPanel"><span class="nums" id="">1</span><span class="nums">2</span><span class="nums">3</span><span class="nums">4</span><span class="nums">5</span><div id="photos"><img src="./images/1.jpg"><img src="./images/2.jpg"><img src="./images/3.jpg"><img src="./images/4.jpg"><img src="./images/5.jpg"><ul id="dis"><li>图片1简介</li><li>图片2简介</li><li>图片3简介</li><li>图片4简介</li><li>图片5简介</li></ul></div></div></body>2、初步设置图片、图片的容器div的样式。

多张图片串联式放映代码-粉红玖瑰的日志-网易博客

多张图片串联式放映代码-粉红玖瑰的日志-网易博客多张图片串联式放映代码默认分类 2010-11-23 16:27:34 阅读17 评论1 字号：大中小订阅一、多张图片串联式向左放映代码：<MARQUEE><IMG src="图片地址"><IMG src="图片地址"><IMG src="图片地址"><IMG src="图片地址"><IMG src="图片地址"></MARQUEE>二、多张图片串联式向右放映代码：<MARQUEE direction=right><IMG src="图片地址"><IMG src="图片地址"><IMG src="图片地址"><IMG src="图片地址"><IMG src="图片地址"></MARQUEE>三、多张图片串联式向上放映代码：<MARQUEE direction=up><IMG src="图片地址"><br><IMG src="图片地址"><br><IMG src="图片地址"><br><IMG src="图片地址"><br><IMG src="图片地址"></MARQUEE>四、多张图片串联式向下放映代码<MARQUEE direction=down><IMG src="图片地址"><br><IMG src="图片地址"><br><IMG src="图片地址"><br><IMG src="图片地址"><br><IMG src="图片地址"></MARQUEE>五、多张图片串联式来回放映代码：<MARQUEE behavior=alternate><IMG src="图片地址"> <IMG src="图片地址"><IMG src="图片地址"><IMG src="图片地址"><IMG src="图片地址"></MARQUEE>说明:在图片地址处粘贴上每张图片的地址就行.。

网页设计图片循环滚动代码

图片循环滚动代码(无缝滚动)(分别向上、下、左、右)向上：程序代码<div id=demo style="overflow:hidden; width:128px; height:300px;"><div id=demo1><img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> </div><div id=demo2></div></div><script language="javascript">var speed=30demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetTop-demo.scrollTop<=0)demo.scrollTop-=demo1.offsetHeightelse{demo.scrollTop++}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>向下：程序代码<div id=demo style="overflow:hidden; width:128px; height:300px;"><div id=demo1><img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> </div><div id=demo2></div></div><script language="javascript">var speed=30demo2.innerHTML=demo1.innerHTMLdemo.scrollTop=demo.scrollHeightfunction Marquee(){if(demo1.offsetTop-demo.scrollTop>=0)demo.scrollTop+=demo2.offsetHeightelse{demo.scrollTop--}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>向左：程序代码<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=leftcellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><imgsrc="gfjs.gif"><imgsrc="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><imgsrc="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>向右：程序代码<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=leftcellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><imgsrc="gfjs.gif"><imgsrc="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><imgsrc="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30demo2.innerHTML=demo1.innerHTMLdemo.scrollLeft=demo.scrollWidthfunction Marquee(){if(demo.scrollLeft<=0)demo.scrollLeft+=demo2.offsetWidthelse{demo.scrollLeft--}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>。

网页图片轮转javascript代码

图片轮转javascript代码1.简单的图片轮转（红色字体是修改地方）<script language=Javascript></script><IMG style="FILTER: revealTrans(duration=2,transition=20)" src="images/1.jpg" width="398" height="250"border=0 name=bannerADrotator><script language=Javascript>nextAd()</script>2.复杂的图片轮转（红色字体是修改地方）效果图2.1编写一个静态网页（调用lunzhuan.js）<html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>测试</title><style type="text/css">*{ margin:0px; padding:0px;}#ceshi{ width:300px; height:225px; margin:0 auto; border:1px red solid;}</style></head><body><div id="ceshi"><script language="JavaScript" src="images/lunzhuan.js"></script></div></body></html>2.2编写lunzhuan.js文件存放在images文件夹内<!--var widths=300; //焦点图片宽var w=0;var widthss=widths+w;var heights=225; //焦点图片高var heightss=heightss+w;var heightt=0;var counts=6; //总条数//img1=new Image();在这里是声明了一个图片元素的对象//后面是对图像的属性进行赋值或设置,如imgs.src="xxxx.jpg"是指定图片的索引地址.//这个代码一般用于head区,用于预加载图片,即加快图片显示.//只有用new Images()得到的图片IE7才认,img1=new Image();img1.src='images/1.jpg';url1=new Image();url1.src='http://localhost/';txt1=new Image();txt1.txt='我是11111111111';img2=new Image();img2.src='images/2.jpg'; url2=new Image();url2.src='http://localhost/'; txt2=new Image();txt2.txt='我是2222222222';img3=new Image();img3.src='images/3.jpg'; url3=new Image();url3.src='http://localhost/'; txt3=new Image();txt3.txt='我是3333333333';img4=new Image();img4.src='images/4.jpg'; url4=new Image();url4.src='http://localhost/'; txt4=new Image();txt4.txt='我是4444444444'; img5=new Image();img5.src='images/5.jpg'; url5=new Image();url5.src='http://localhost/'; txt5=new Image();txt5.txt='我是5555555555'; img6=new Image();img6.src='images/6.jpg'; url6=new Image();url6.src='http://localhost/'; txt6=new Image();txt6.txt='我是6666666666'; var nn=1; //当前所显示的滚动图var key=0; //标识是否为第一次开始执行var tt; //标识作用function change_img()if(key==0){key=1;} //如果第一次执行KEY=1，表示已经执行过一次了。

两种方法实现显示多张图片的轮播

两种⽅法实现显⽰多张图⽚的轮播两种⽅法实现显⽰多张图⽚的轮播第⼀种：jQuery ⽅法.animate + 浮动排列布局1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="utf-8" />5 <title>显⽰多张图⽚的轮播</title>6 <style type="text/css">7 html,body{8 padding:0;9 margin:10px auto;10 }11 #warpper{12 width:1120px;/*⼀列展⽰⼏个的宽度 ,4*280 动态算*/13 height:150px;14 margin:0 auto;15 position:relative;16 overflow:hidden;17 border:1px solid red;18 }19 #inner{20/*元素个数*280(div宽度) 动态算 1120px[4个元素] 1440px[5个元素] 1680px[6个元素] 2240px[8个元素]21⽤JS动态设置改值22*/23 width:2520px;24 position:absolute;25 }26 #inner div{27 width:270px;28 height:150px;29/*使⽤浮动元素排列*/30float:left;31 margin:0 5px;32 }33 #optrbtn{34 text-align:center;35 font-size:20px;36 }37 #optrbtn span {38 display:inline-table;39 border:1px solid red;40 width:50px;41 cursor:pointer;42 margin-right:5px;43 }44 #inner div img{45 width: 100%;46 height: 100%;47 }48 </style>4950 <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>51 <script type="text/javascript">5253 $(function(){5455var curNum=0;56var count=$("#inner").children('div').length;//85758//左滑动59 $(".btnleft").click(function(){60//如果到了最后⼀个元素，停⽌61if((count-curNum)<=4){62return false;63 }64 curNum+=1;65 $("#inner").animate({66// 每次点击都从左边裁剪280像素67 left:'-=280'68 },500);69 });7071//右滑动72 $(".btnright").click(function(){73//如果到了第⼀个元素，停⽌74if(curNum<=0){75return false;76 }77 curNum-=1;78 $("#inner").animate({79// 每次点击都从左边补充280像素80 left:'+=280'81 },500);82 });83 });8485 </script>86 </head>8788 <body>8990 <div id="main">91 <div id="warpper">92 <div id="inner">93 <div><img src="../img/sucai/full1.jpg"/></div>94 <div><img src="../img/sucai/full2.jpg"/></div>95 <div><img src="../img/sucai/full3.jpg"/></div>96 <div><img src="../img/sucai/full4.jpg"/></div>97 <div><img src="../img/sucai/full5.jpg"/></div>98 <div><img src="../img/sucai/full6.jpg"/></div>99 <div><img src="../img/sucai/full7.jpg"/></div>100 <div><img src="../img/sucai/full8.jpg"/></div>101 <div><img src="../img/sucai/full9.jpg"/></div>102 </div>103 </div>104 </div>105106 <br />107 <br />108109 <div id="optrbtn">110 <span class="btnleft">«</span>111 <span class="btnright">»</span>112 </div>113114 </body>115 </html>第⼆种：负边距 + flex排列布局1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>显⽰多张图⽚的轮播</title>6 <style type="text/css" rel="stylesheet">7 *{8 margin: 0;9 padding: 0;10 }11 #main{12 width: 100%;13 height: 125px;14 display: flex;15 margin-top: 120px;16 }17 #d1{18 width: 1162px;19 height: 125px;20 display: flex;21 overflow:hidden;22 }23 #d11{24 width: 64px;25 height: 125px;26 line-height: 125px;27 text-align: center;28 font-size: 28px;29 cursor: pointer;30 z-index: 2;31 background: #FFFFFF;32 }33 #d13{34 width: 64px;35 height: 125px;36 line-height: 125px;37 text-align: center;38 font-size: 28px;39 cursor: pointer;40 z-index: 2;41 background: #FFFFFF;42 }43 #d12{44/*元素个数*207(div宽度) 动态算 828px[4个元素] 1035px[5个元素] 1242px[6个元素] 2070px[10个元素] 45⽤JS动态设置改值46*/47/*先预设⾜够放10张图⽚的宽度*/48 width: 2070px;49 height: 125px;50/*使⽤弹性布局排列*/51 display: flex;52 transition:all 0.3s linear 0s;53/*再将多出来的5张图⽚的宽度⽤负边距隐藏起来*/54 margin-right: -1035px;55 }56 #d12 .d120{57 width: 207px;58 height: 125px;59 z-index: 1;60 }61 .ddd{62 width: 170px;63 height: 80px;64 margin-left: 18px;65 margin-top: 23px;66 }67 .ddd img{68 width: 100%;69 height: 100%;70 }71 </style>72 </head>73 <body>7475 <div id="main">76 <div style="width: 102px;height:125px;background: #FFFFFF;z-index: 3;"></div>77 <div id="d1">78 <div id="d11">《</div>79 <div id="d12">80 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full1.jpg"></div></div>81 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full2.jpg"></div></div>82 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full3.jpg"></div></div>83 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full4.jpg"></div></div>84 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full5.jpg"></div></div>85 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full6.jpg"></div></div>86 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full7.jpg"></div></div>87 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full8.jpg"></div></div>88 <div class="d121 d120"><div class="ddd"><img src="../img/sucai/full9.jpg"></div></div>89 <div class="d122 d120"><div class="ddd"><img src="../img/sucai/full1.jpg"></div></div>90 </div>91 <div id="d13">》</div>92 </div>93 <div style="width: 102px;height:125px;background: #FFFFFF;z-index: 3;"></div>94 </div>9596 </body>97 <script type="text/javascript">9899 let $ = function(id){100return document.getElementById(id);101 };102103//移动的宽度104var moveLength = 0;105106// 右移107 $("d13").addEventListener("click",function () {108 moveLength +=207;109// 判断移动的宽度有没有超出5张图⽚的宽度，如果超出，则减掉⼀张图⽚的宽度110if (moveLength<=1035){111 $("d12").style = "transform:translateX(-"+moveLength+"px);"112 }else if(moveLength>1035){113 moveLength -= 207;114 }115 });116117// 定时器，每个3秒移动⼀次118 setInterval(function () {119 moveLength +=207;120if (moveLength<=1035){//是否移动到尽头121 $("d12").style = "transform:translateX(-"+moveLength+"px);"122 }else if(moveLength>1035){//是否移动到尽头123 moveLength -= 1242;124 $("d12").style = "transform:translateX(-"+moveLength+"px);"125 }126 },3000);127128// 左移129 $("d11").addEventListener("click",function () {130// ⾸先判断图⽚是不是移动过了，是否移到尽头，然后再做调整移动的宽度131if (moveLength===1035){//是否移到了尽头132 $("d12").style = "transform:translateX(-"+moveLength+"px);";133 moveLength -=207;134 $("d12").style = "transform:translateX(-"+moveLength+"px);";135 }else if(moveLength>0&&moveLength<1035){//是否在原点与尽头之间136 moveLength -=207;137 $("d12").style = "transform:translateX(-"+moveLength+"px);";138 }else if(moveLength===0){//是否回到原点139 moveLength -= 207;140 moveLength += 207;141 }142 })143144 </script>145 </html>其实⽅法并不⽌两种，这⾥只⽤两种简单的案例来实现⽽已，你也可以举⼀反三⽤多种⽅法实现。

HTML5轮播图全代码

HTML5轮播图全代码轮播图原理⼤概是这样的，假定三张图⽚需要做轮播效果，⾸先需要将这三张图⽚并列放置，然后将这个整体并列向左移动，每当⼀张图⽚完整的从显⽰框⾛出，则将这张图⽚放置到最后⾯，循环往复就可以实现图⽚向左（或⼀个⽅向）移动。

然后，需要有两个定时器，⼀个定时器A控制三张图⽚整体左移速度，另⼀个定时器B控制每当⼀张完整的图⽚⾛进这个显⽰框就等待⼀到两秒得到更好的⽤户体验。

我这⾥⽤三个div框当作轮播图来演⽰。

在html的body中添加⼀个div作为显⽰框，然后在这个div内部添加三个⼦div作为图⽚显⽰。

代码如下：<div id="box"><div id="red" class="slide"></div><div id="green" class="slide"></div><div id="blue" class="slide"></div></div>头部添加css样式：此时⽹页中应该是有⼀个⿊⾊显⽰框div，内部有红、绿、蓝三个div框,三个框从上到下排列。

第⼀步，需要将三张图⽚都并列显⽰。

要实现将div挪动，且div⽐较⽅便控制每时每刻的位置(移动)，只能使⽤相对定位，且为⽅便，三个⼦div位置移动应该是相对box，所以box应该作为相对的参照点。

分别为box和slide代码添加position属性：#box{width:100px;height:100px;border:1px solid black;position:relative;}.slide{width:100px;height:100px;position:absolute;}为整个页⾯添加onload加载完成事件，当浏览器打开并加载完并⾃动执⾏事件中的代码块。

怎么使用html+css实现轮播图效果（代码分享）

怎么使⽤html+css实现轮播图效果（代码分享）本篇⽂章给⼤家介绍怎么使⽤html+css实现轮播图效果，我们⼀起看看怎么做。

推动轮播实现效果图如下⾸先写Html部分，你可以理解这个div标签，如果你写CSS或者JS的时候可以⽤到这⼏个div标签，就是⼀个ID为container的div，先不说多，下⾯给⼤家代码⽰例。

<div id="container"><div id="screen">id="screen" 这个可以给div标签那个块状设置属性，⽐如宽、⾼、颜⾊、等等。

<a href="#" onclick="window.close()"></a>分类内部连接：锚记：name外部链接：建⽴⼀个以name为表象的⽹址链接。

链接说明⽂字：img src=""⽤法图⽚和HTML⽂本在同⼀⽬录下：例如index.html和img.jpg<img src="img.jpg">图⽚和HTML不在同⼀⽬录下：图⽚img.jpg在⽂件夹images中，index.html和images⽂件夹在同⼀个⽬录下<img src="images/img.jpg">图⽚img.jpg在⽂件夹images中，index.html在controller⽂件夹中，images和controller⽂件夹在同⼀个⽬录下<img src="../images/img.jpg">将图像宽度和⾼度分别设置为 200 像素：标签的height和width属性设置图像的尺⼨。

<img src="#" height="200" width="200" >html完整代码<body><div id="container"><div id="screen"><a href="#"><img src="001.jpg" width="200" height="200" target="_blank"></a><a href="#"><img src="002.jpg" width="200" height="200" target="_blank"></a><a href="#"><img src="003.jpg" width="200" height="200" target="_blank"></a></div></body>ok,写完html编辑代码，接下来使⽤css写编辑⽤内外边距均设置为0px，再来screen中a标签设置为【左浮动】并且设置动画属性，周期为1s并且⽆限循环。

网站首页图片轮转代码，很好用

网站首页图片轮转代码，很好用网站首页图片轮转代码聪明的朋友可以把它用到自己的网店里面做装修，非常好用的代码如下，注释的地方需要改变即可<SCRIPT>var widths =500;var heights =410;var counts =6;var times = 4000;img1=new Image ();img1.src='/07.jpg';img2=new Image ();img2.src='/06.jpg';img3=new Image ();img3.src='/05.jpg';img4=new Image ();img4.src='/04.jpg';img5=new Image ();img5.src='/03.jpg';img6=new Image ();img6.src='/02.jpg';url1=new Image ();url1.src='/';url2=new Image ();url2.src='/';url3=new Image ();url3.src='/';url4=new Image ();url4.src='/';url5=new Image ();url5.src='/';url6=new Image ();url6.src='/';//联盟商贸技术支持友情提供var nn=1;var key=0;function change_img(){if(key==0){key=1;}else if(document.all){document.getElementByIdx("pic").filters[0].Apply();document.getElementByIdx("pic").filters[0].Play(duration=2);}eval_r('document.getElementByIdx("pic").src=img'+nn+'.src' );eval_r('document.getElementByIdx("url").href=url'+nn+'.src' );for (var i=1;i<=counts;i++){document.getElementByIdx("xxjdjj"+i).className='axx';}document.getElementByIdx("xxjdjj"+nn).className='bxx';nn++;if(nn>counts){nn=1;}tt=setTimeout('change_img()',4000);}function changeimg(n){nn=n;window.clearInterval(tt);change_img();}document.write('<style>');document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');document.write('</style>');document.write('<divstyle="width:'+widths+'px;height:'+heights+'px;overflow:hidde n;text-overflow:clip;">');document.write('<div><a id="url" target="_blank"><img id="pic"style="border:0px;filter:progid:dximagetransform.microsoft.wip e(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');document.write('<divstyle="filter:alpha(style=1,opacity=10,finishOpacity=80);backgr ound: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;marg in:0px;border:0px;">');for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}document.write('</div></div>');change_img();</SCRIPT>。

网页中滚动多张图片特效

注意: 各参数详解：（1）scrollAmount。

它表示速度，值越大速度越快。

如果没有它，默认为6，建议设为1～3比较好。

（2）width和height，表示滚动区域的大小，width是宽度，height是高度。

特别是在做垂直滚动的时候，一定要设height的值。

（3）direction。

表示滚动的方向，默认为从右向左：←←←。

可选的值有right、down、up。

滚动方向分别为：right表示→→→，up表示↑，down表示↓。

（4）scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。

通常scrollDelay 是不需要设置的。

（5）behavior。

用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)（6）蓝色地方是图片地址，可以换上自己喜欢的图片。

向上循环<center>><MARQUEE width=220 scrollAmount=3 height=275 direction=up><A><IMG height=275 src="图片地址" width=220></A><A><IMG height=275 src="图片地址" width=220></A><A><IMG height=275 src="图片地址" width=220></A></MARQUEE></CENTER>效果：2.图片向下循环滚动代码：<CENTER><MARQUEE width=220 scrollAmount=3 height=275 direction=down><A><IMG height=275 src="图片地址" width=220></A><A><IMG height=275 src="图片地址" width=220></A><A><IMG height=275 src="图片地址" width=220></A></MARQUEE></CENTER>3.图片向左循环滚动代码：<CENTER><MARQUEE width=220 scrollAmount=3 height=275><A><IMG height=275 src="图片地址" width=220></A><A><IMG height=275 src="图片地址" width=220></A><A><IMG height=275 src="图片地址" width=220></A></MARQUEE></CENTER>4.图片向右循环滚动代码：<CENTER><MARQUEE width=220 scrollAmount=3 height=275 direction=right><A><IMG height=275 src="图片地址" width=220></A><A><IMG height=275 src="图片地址" width=220></A><A><IMG height=275 src="图片地址" width=220></A></MARQUEE></CENTER>效果：5.图片来回滚动代码：<CENTER><MARQUEE width=380 scrollAmount=3 height=275 behavior="alternate"><A><IMG height=275 src="图片地址" width=220></A><A><IMG height=275 src="图片地址" width=220></A><A><IMG height=275 src="图片地址" width=220></A></MARQUEE></CENTER>以上五种图片滚动效果代码说明：1.“width=380”表示滚动的宽度范围，数值可以按自己喜欢的调整2.“height=275”表示滚动的高度范围，数值可以随意调整3.“scrollAmount=3”表示滚度速度为3，1到3为最佳数值，默认为64.“height=275”表示图片的高度为275（建议按自己喜欢的图片高度调整）5.“width=220”表示图片的宽度为220（建议按自己喜欢的图片宽度调整）6.“图片地址”表示图片的属性地址粘贴处（因本人太懒，所以所有的滚动图片都只用一张代替；(*^__^*)，当然，每个“图片地址”都可以换上不同的图片地址，效果会更好。

网页轮播图（功能最全）

⽹页轮播图（功能最全）布局：slider > ul > lislider > arrow > a> imgarrow : z-index:2 ;注意，ul ⾥⾯放着所有轮播图的图⽚，所以 ul 的宽度必须⾜够⼤能够容纳所有图⽚，这⾥有4张图⽚，ul宽度设置为 600%功能需求：1，⿏标经过轮播图模块，左右按钮显⽰，离开隐藏左右按钮slider.addEventListener（“mouseover",function(){arrowLeft.style.display="block";arrowRight.style.display="block";})slider.addEventListener("mouseout",function(){arrowLeft.style.display="none";arrowRight.style.display="none";})2，动态⽣成⼩圆圈①：核⼼思路：⼩圆圈的个数要跟图⽚张数⼀致②：所以⾸先先得到 ul ⾥⾯图⽚的张数（图⽚放⼊ li 中，所以就是 li 的个数）③：利⽤循环动态⽣成⼩圆圈（这个⼩圆圈要放⼊ ol ⾥⾯）④：创建节点 createElement("li")⑤：插⼊节点：ol.appendChild (li)⑥：第⼀个⼩圆圈需要添加 current 类var ul=document.querySelector("ul");var ol=document.querySelector(".circle");var imgs=ul.children;for(var i=0; i<imgs.length; i++){document.createElement("li");ol.appendChild(li);}ol.children[0].className="current";3, ⼩圆圈的排他思想①点击哪个⼩圆圈，哪个⼩圆圈就添加 " current " 类②其余的⼩圆圈就移除这个 current 类③注意：我们在刚才⽣成⼩圆圈的同时，就可以直接绑定这个点击事件了。

swiper5张卡片轮播图实现效果

swiper5张卡⽚轮播图实现效果直接上代码：<template> <div class="swiper-out"> <swiper :options="swiperOption"> <swiper-slide v-for="(item, index) in 5" data-index="index" :key="index"> <div class="swiper-item"> <div class="swiper-img"> <img :src="imgUrl" width="400px" alt=""> </div> </div> </swiper-slide> </swiper> </div></template><script>import sortBox from '../aacomponents/sortBox/sortBox.vue'import swiperBanner from '../aacomponents/swiper/swiperBanner.vue'export default {name: 'EnterpriseLicense',components: { sortBox,swiperBanner },props: [],data() {return {bannerData:[ require('../../../assets/templateDefault05/banner5.png')],//banner数据imgUrl:require('../../../assets/templateDefault05/img2.png'),//轮播swiperOption: {loop: true, // 循环模式选项autoplay: true,//⾃动循环slidesPerView: 3.8, //设置slider容器能够同时显⽰的slides数量(carousel模式)。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<title>pic player</title>
<script type="text/javascript" src="/jslib/jquery/jquery-1.2.6.js"></script> <script type="text/javascript" src="/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:'/online/picPlayer/1.jpg',link:'',time:5000},{url: '/online/picPlayer/2.jpg',link:'',time:4000},{url:'http :///online/picPlayer/3.jpg',link:'',time:6000},{url:'http://im
/online/picPlayer/2.jpg',link:'',time:6000},{url:'http://img.jb
/online/picPlayer/1.jpg',link:'',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>
黄色的地方修改显示大小和显示的图片
如增加图片可以通过增加var pics1 后面的内容。