网页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，表示已经执行过一次了。

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 后面的内容。