最常用图片轮播代码示例

图片轮番代码<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]通⽤轮播图代码⽰例⾸先是准备好的⼏张图⽚, 它们的路径是: "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> <!--引⼊JS脚本, 脚本⽤来切换图--></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> <!--在这⾥, onClick调⽤的是⽤于设置当前图⽚的⽅法, 传⼊参数为图⽚节点的索引--><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默认状态向左。

jquery实现图⽚⾃动轮播效果本⽂实例为⼤家分享了jquery实现图⽚⾃动轮播效果的具体代码，供⼤家参考，具体内容如下HTML代码如下：<div id="container"><img src="icon1.jpg" class="left"><img src="icon2.jpg" class="right"><div id="scroll"><div id="scroll_pic"><ul class="count"><li><img src="1.jpg" title="1.jpg"><span>1</span></li><li><img src="2.jpg" title="2.jpg"><span>2</span></li><li><img src="3.jpg" title="3.jpg"><span>3</span></li><li><img src="4.png" title="4.png"><span>4</span></li><li><img src="3.jpg" title="3.jpg"><span>5</span></li></ul><ul><li><img src="1.jpg" title="1.jpg"><span>11</span></li><li><img src="2.jpg" title="2.jpg"><span>22</span></li><li><img src="3.jpg" title="3.jpg"><span>33</span></li><li><img src="4.png" title="4.png"><span>44</span></li><li><img src="3.jpg" title="3.jpg"><span>55</span></li></ul></div></div></div>以上是这个图⽚轮播效果的css的布局样式及html代码部分（相信⼤家很容易实现！就不赘述了……），下⾯⼀起来看⽤jquery如何实现此效果吧！jquery来实现图⽚⾃动⽆缝轮播的效果，步骤及代码如下：步骤⼀：引⼊jquery⽂件，代码如下：<script type="text/javascript" src="jquery-1.7.min.js"></script>步骤⼆：创建两个函数，分别控制图⽚向左右移动 - - moveRight() 和 moveLeft()，代码如下：//右移函数function moveRight(){var left=$('#scroll_pic').position().left; //获取元素相对于左端的偏移量$('#scroll_pic').animate({"left":"+="+oLiWidth+"px"},800) //函数每被调⽤⼀次匹配元素发⽣⽔平偏移}//左移函数function moveLeft(){var left=$('#scroll_pic').position().left;$('#scroll_pic').animate({"left":"-="+oLiWidth+"px"},800);}步骤三：完成对应事件的绑定，实现基本的⼿动播放效果，代码如下：//事件绑定$('.left').on('click',moveRight);$('.right').on('click',moveLeft);步骤四：实现⼿动轮播效果，即：分别为上述两个偏移函数【moveRight() 和 moveLeft()】添加条件判断。

Html、js图片轮播代码现在基本上每个网站都有一个自动轮播的banner广告图，在没有任何按钮的情况下，图片在规定的时间内进行自动切换。

下面是html、js 图片轮播代码详情。

代码效果图实例：第一秒：第二秒：第三秒：详细代码如下：Html代码部分：<body><ul class="banner"><li><img src="images/1.jpg"></li><li><img src="images/2.jpg"></li><li><img src="images/3.jpg"></li></ul></body>Css代码部分：<style type="text/css">ul,li{margin:0px;padding:0px}li{list-style:none}.banner{width:630px;height:250px;margin:100px auto;overflow:hidden;cursor:pointer} </style>Javascript代码部分：<script type="text/javascript"src="jquery.js"></script><script type="text/javascript">$(function(){var timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)$(".banner li").hover(function(){clearInterval(timer);},function(){timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)})})</script>【Jquery.js】是一个jquery库，只要百度一下搜索“jquery”下载这个文件就行。

js轮播图代码分享_大家喜爱的js轮播图片效果，分享给大家。

一、要点：1.页面加载时，图片重合，叠在一起[肯定定位];2.第一张显示，其它隐蔽;3.设置下标,给下标设置颜色让它随图片移动;4.鼠标移动到图片上去，显示左右移动图标，鼠标移走，连续轮播;二、实现代码：html代码:!DOCTYPE htmlhtml xmlns="l"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8"/title轮播图/titlelink href="css/LunBimg.css" rel="stylesheet" /script src="js/jquery-1.10.2.min.js"/scriptscript src="js/LunBimg.js"/script/headbodydiv id="allswapImg"div class="swapImg"img src="image/1.jpg" //div div class="swapImg"img src="image/2.jpg" //div div class="swapImg"img src="image/3.jpg" //div div class="swapImg"img src="image/4.jpg" //div div class="swapImg"img src="image/5.jpg" //div div class="swapImg"img src="image/6.jpg" //div /divdiv class="btn btnLeft"/divdiv class="btn btnRight"/divdiv id="tabs"div class="tab bg"1/divdiv class="tab"2/divdiv class="tab"3/divdiv class="tab"4/divdiv class="tab"5/divdiv class="tab"6/div/div/body/htmlcss代码：* {padding:0px;margin:0px;}.swapImg {position:absolute;}.btn {position:absolute;height:90px;width:60px;background:rgba(0,0,0,0.5);/*设置背景颜色为黑色，透亮度为50%*/color:#ffffff;text-align:center;line-height:90px;font-size:40px;top:155px;/*图片高度400/2-45*/cursor:pointer;/*display:none;*/}.btnRight {left:840px;/*图片宽度900-导航宽度60*/}#tabs {position:absolute; top:370px;margin-left:350px; }.tab {height:20px;width:20px;background:#05e9e2; line-height:20px; text-align:center; font-size:10px;float:left;color:#ffffff;margin-right:10px; border-radius:100%; cursor:pointer;}.bg {background:#00ff21; }js代码：/// reference path="_references.js" /var i = 0;//全局变量//定义一个变量用来猎取轮播的过程var time;$(function (){//1.页面加载后,找到Class等于swapImg的第一个对象，让它显示，它的兄弟元素隐蔽$(".swapImg").eq(0).show().siblings().hide();showTime();//当鼠标放到下标上显示该图片，鼠标移走连续轮播$(".tab").hover(function (){//猎取到当前鼠标所在的下标的索引i = $(this).index();show();//鼠标放上去之后，怎么停止呢？猎取到变量的过程，清除轮播，把变量传进去clearInterval(time);}, function (){showTime();});//要求四，当我点击左右切换$(".btnLeft").click(function (){//1.点击之前要停止轮播clearInterval(time);//点了之后，-1if (i == 0){i =6;}i--;show();showTime();});$(".btnRight").click(function () { //1.点击之前要停止轮播clearInterval(time);//点了之后，-1if (i == 5) {i = -1;}i++;show();showTime();});});function show() {//$("#allswapImg").hover(function ()//{// $(".btn").show();//}, function ()//{// $(".btn").hide();//});//fadeIn(300)淡入，fadeout(300)淡出，过滤时间0.3s$(".swapImg").eq(i).fadeIn(300).siblings().fadeOut( );$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");}function showTime(){time = setInterval(function () {i++;if (i == 6) {//只有6张图片，所以i不能超过6，假如i等于6时，我们就让它等于第一张i = 0;}show();}, 3000);}以上就是本文的全部内容，盼望对大家的学习有所关心...。

滚动图片、友情链接代码-时氏膏药老店的日志-网易博客滚动图片、友情链接代码2008-12-28 21:25分类：博客技能字号：大中小1. 进入编辑→2. 排版→3. 模块→4. 添加自定义html（显示）（出现在网页左下角）→5. 复制下列代码後贴上→6. 新增→7. 将模块移到想显示的位置→8. 再保存（右上角）→9. 预览我的博客。

→10. 就可以看到出现在你的博客上了！如果你没有成功添加，可以留下问题，我会随时更新博客。

1、图片滚动代码 (从右向左滚动)<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"><img border="0" src=" http://要滚动的图片地址1"><img border="0" src=" http://要滚动的图片地址2"></marquee>2、图片滚动代码 (从下往上滚动)<marquee align=center direction=upscrollamount=1 scrolldelay=3 valign=middle behavior="scroll"><img border="0" src=" http://要滚动的图片地址1"><img border="0" src=" http://要滚动的图片地址2"></marquee>选编辑-排版-模块-添加自定义HTML 然后把<marqueebehavior="scroll" direction=right width="90%" height="100" scrollamount="2"scrolldelay="30" ><a target="cont" href="对方地址"><img src="对方图片"width="100" height="100" border="0"></a></marquee> 复制上去就行了.。

最简单的JavaScript图片轮播代码(两种方法)通过改变每个图片的opacity属性：素材图片：代码一：最简单的轮播广告代码二：第二步，布局好一个DIV,如：上一张下一张第三步，就到了写CSS的时候了．下面的CSS懂基础的人都看得懂．#croll{width:100%;height:180p;background-color:white;poition:relative;border-bottom:1polidgray;}、、这里是给整个大的ＤＩＶ设定属性．#crollul{height:180p;lit-tyle:none;}、、ＤＩＶ下的ＵＬ属性．#crollulli{width:100%;height:180p;margin:0p;padding:0p;dipla y:none;}、、ＤＩＶ下的ＵＬ下的ＬＩ属性．注意：diplay:none;因为要将所有的ｌｉ隐藏了先．当点击的时候在显示出来．。

ubl{poition:abolute;bottom:20p;left:40%;width:80p;height:20p;lin e-height:20p;tet-align:center;font-ize:16p;font-weight:bold;curor:pointer;}、、上一张按钮的属性．注意一个绝对定位．。

ubr{poition:abolute;bottom:20p;right:40%;width:80p;height:20p;line-height:20p;tet-align:center;font-ize:16p;font-weight:bold;curor:pointer;}、、下一张按钮的属性．注意一个绝对定位．。

ubr:hover{background:yellow;border-radiu:10p;}。

ubl:hover{background:yellow;border-radiu:10p;}、、以上两个hover是鼠标经过的效果．第四步，就是ｊｑｕｅｒｙ代码了！也很简单．先将代码看一遍，你就会用了！四步轻松搞定一个简单的轮！。

淘宝店铺装修模板图片轮播代码店铺装修模板图片轮播代码是一款能够美化店铺装修，吸引客户注意力，激发购买热情，提高宝贝转化率的产品。

该产品分为A款、B款、C款三种，每款都包含左右滚动、上下滚动、渐变三种效果代码。

其中，A款左右滚动代码如下：div style="" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls':'lst-main','navCls':'lst-trigger','activeTriggerCls':'current'}" data-widget-type="Slide"> ul class="lst-main">li>a style="" href="/" target="_blank">img src="" alt="图片1">a>li>li>a style="" href="/" target="_blank">img src="" alt="图片2">a>li>ul>div>以上是A款左右滚动代码演示，使用该代码能够为店铺增添不少美观度，同时吸引客户的注意力，提高宝贝转化率。

把图片轮播代码粘贴进去，点击保存即可。

使用图片轮播功能可以让店铺更加生动有趣，吸引更多的顾客。

网站首页图片轮转代码，很好用网站首页图片轮转代码聪明的朋友可以把它用到自己的网店里面做装修，非常好用的代码如下，注释的地方需要改变即可<SCRIPT><!--以下分别是，宽，高，图片数，间隔时间-->var widths =500;var heights =410;var counts =6;var times = 4000;<!--以下12行代码中的如：/07.jpg ，改成自己需要的图片URL 即可，下面一部分的链接换成商品的地址即可-->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>。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>生活有诀窍</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"/><script type="text/javascript">var maxWidth=600;var curTimer=null;var imageCount=4;function play(index){var targetLeft=-((index-1)*maxWidth);if(curTimer){clearTimeout(curTimer);curTimer=null;}trunLeft(targetLeft);for(var i=1;i<=imageCount;i++){document.getElementById("play"+i).style.backgroundColor="#a5a5a5";}document.getElementById("play"+index).style.backgroundColor="#e1e1e1";}function trunLeft(targetLeft){var curLeft=parseInt(getStyle(document.getElementById("imageUL"), "left"));var offset=Math.abs(Math.abs(curLeft)-Math.abs(targetLeft)); //此处可以采用Tween.js缓动来实现更多的效果if(offset>30){offset=30;}if(curLeft>targetLeft){curLeft-=offset;}else if(curLeft<targetLeft){curLeft+=offset;}else{if(curTimer){clearTimeout(curTimer);curTimer=null;}return;}document.getElementById("imageUL").style.left=curLeft+"px";curTimer=setTimeout("trunLeft("+targetLeft+")",10);}function getStyle(elem,name){var elem = (!elem) ? alert("ERROR: It is short of getStyle==>elem!") : elem;var name = (!name) ? alert("ERROR: It is short of getStyle==>name!") : name.toString();if((!elem) && (!name)){return false;}if(elem.style[name]){return elem.style[name];}else if(elem.currentStyle){return elem.currentStyle[name];}else if(document.defaultView && document.defaultView.getComputedStyle){name = name.replace(/([A-Z])/g,"-$1");name = name.toLowerCase();var s = document.defaultView.getComputedStyle(elem,"");return s && s.getPropertyValue(name);}else{return null;};}</script></head><body>本代码由<a href="" target="_blank">生活有诀窍网站()</a>QQ:2450882851提供,仅供学习使用，请务必写明来源<div style="width:600px;"><div style="position:relative;width:600px;height:200px;overflow: hidden;"><ul id="imageUL" style="position: absolute;width:2400px;margin:0px;padding:0px;left:0px;"><li style="float:left;list-style:none;width: 600px;height: 200px;"><a href="" target="_blank"><img src="image/1.jpg" style="border: none;"/></a></li><li style="float:left;list-style:none;width: 600px;height: 200px;"><a href="" target="_blank"><img src="image/2.jpg" style="border: none;"/></a></li><li style="float:left;list-style:none;width: 600px;height: 200px;"><a href="" target="_blank"><img src="image/m.jpg" style="border: none;"/></a></li><li style="float:left;list-style:none;width: 600px;height: 200px;"><a href="" target="_blank"><img src="image/3.jpg" style="border: none;"/></a></li></ul></div><div style="position:relative;top:-20px;float:right;"><ul style="margin:0px;padding:0px;left:0px;"><li id="play1" style="background-color:#e1e1e1;float:left;list-style: none;margin-left:5px;padding:1px 5px;cursor: pointer;"><span onmouseover="javascript:play(1)">1</span></li><li id="play2" style="background-color:#a5a5a5;float:left;list-style: none;margin-left:5px;padding:1px 5px;cursor: pointer;"><span onmouseover="javascript:play(2)">2</span></li><li id="play3" style="background-color:#a5a5a5;float:left;list-style: none;margin-left:5px;padding:1px 5px;cursor: pointer;"><span onmouseover="javascript:play(3)">3</span></li><li id="play4" style="background-color:#a5a5a5;float:left;list-style: none;margin-left:5px;padding:1px 5px;cursor: pointer;"><span onmouseover="javascript:play(4)">4</span></li></ul></div></div></body></html>。

html+CSS实现图⽚轮播要使⽤html+css实现⽹站轮播，代码如下⾸先引⼊bootstrap外包裹div class="carousel" data-ride="carousel"创建轮播，使⽤carousel类，让图⽚动起来data-ride="carousel"内部第⼀层，轮播图⽚<div class="carousel-inner"><div class="carousel-item active">img</div><div class="carousel-item">img</div><div class="carousel-item">img</div></div>需要使⽤div把所有图⽚包裹，使⽤类名carousel-inner每⼀个img还需要包裹⼀个div,使⽤carousel-itemcarousel-item ---->display:none;把所有图⽚隐藏.carousel-item.active 会把隐藏的div显⽰在carousel-item内部，可以添加div.carousel-caption添加⽂字内测第⼆部分，导航标识符使⽤ul class="carousel-indicators".carousel-indicators>li 样式已经写好，并且随着图⽚轮播，改变表⽰但是不能点击便是改变图⽚li class="active" 背景变为⽩⾊，被激活的li点击li，改变图⽚在li中 data-slide-to="0" 图⽚的下标data-target="#当前轮播图ID"内部第三部分：左右箭头a class=" carousel-control-prev"画的左箭头<span class="carousel-control-prev-icon">a class=" carousel-control-next"画的右箭头<span class="carousel-control-next-icon">需要事件，data-slide="prev/next" data-target="#轮播图ID"。

先给大家展示下bootstrap图片轮播图，效果如下所示，如果大家感觉效果还不错，请继续往下阅读，参考实现代码。

直接给大家贴代码了，具体代码如下所示：代码如下:&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;&lt;!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！--&gt;&lt;title&gt;图片轮播_01&lt;/title&gt;&lt;!-- Bootstrap --&gt;&lt;link href="../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"&gt;&lt;script src="../js/jquery-2.1.4.min.js"&gt;&lt;/script&gt;&lt;script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;!--作者：凯尔时间：2016-02-20描述：carouseldate-interval="4000"停留时间/幅图支持键盘左右方向键对图片进行轮播方向选择--&gt;&lt;div class="container"&gt;&lt;div style="width:960px;height: 400px;margin: auto;padding: auto;"&gt;&lt;div id="carousel-example-generic" class="carousel slide"&gt;&lt;ol class="carousel-indicators"&gt;&lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;&lt;li data-target="#carousel-example-generic" data-slide-to="1" class=""&gt;&lt;/li&gt;&lt;li data-target="#carousel-example-generic" data-slide-to="2" class=""&gt;&lt;/li&gt;&lt;li data-target="#carousel-example-generic" data-slide-to="3" class=""&gt;&lt;/li&gt;&lt;/ol&gt;&lt;div class="carousel-inner"&gt;&lt;div class="item active"&gt;&lt;img src="../img/图片轮播/pic01.jpg" /&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src="../img/图片轮播/pic02.jpg" /&gt;&lt;!--图片上要显示的文字--&gt;&lt;div class="carousel-caption"&gt;&lt;h3&gt;联想校园大使&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src="../img/图片轮播/pic03.jpg" /&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src="../img/图片轮播/pic04.jpg" /&gt;&lt;/div&gt;&lt;/div&gt;&lt;!-- Controls --&gt;&lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="sr-only"&gt;Previous&lt;/span&gt;&lt;/a&gt;&lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="sr-only"&gt;Next&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--设定时间间隔，通过JavaScript，这样做相对于css属性设定而言，可以自启动，无需人为进行干预--&gt;&lt;script&gt;$(".carousel").carousel({interval: 4000})&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;以上所述是小编给大家介绍的基于BootStrap的图片轮播效果展示实例代码，希望对大家有所帮助。