最常用图片轮播代码示例

合集下载

图片轮番代码

图片轮番代码<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默认状态向左。

jquery实现图片自动轮播效果

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图片轮播代码

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实现图片轮播效果代码(一)

color: #999;
font-weight: bold;
opacity: .5;
font-size: 40px;
z-index: 3;
}
.carousel-control:hover{
color:fff;
text-decoration: none;
opacity: .9;
outline: none;
imgs[i].style.display = 'block';
lis[i].style.fontSize = '26px';
lis[i].style.color = '#fff';
}
//自动播放的事件处理
function autobofang(){
if(pic_index >= lis.length){
<div class="item "><img src="./img/lunbo1.jpg" alt="第一张图片"></div>
<div class="item"><img src="./img/lunbo2.jpg" alt="第二张图片"></div>
var imgs = lunbo.getElementsByTagName('img');
var uls = lunbo.getElementsByTagName('ul');

js轮播图代码分享_

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);}以上就是本文的全部内容，盼望对大家的学习有所关心...。

图片连续循环滚动代码(向上、下、左、右)

</script>
<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>
</script>
向下：
<base
href="/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/">
<div id=demo style="overflow:hidden; width:128px; height:300px;">
<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>

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

最常用图片轮播代码示例
因为要做taobao，这个店铺的基础装修不得不学，搞到自定义区域，就需要玩点花样了，弄点动图，活跃一下访客的视野，不懂代码也会用，是在店铺里增加一个自定义区，然后把代码复制到自定义区的代码编辑区。

觉得有用的进店支持一下，谢谢大家！
图片轮番上下滚动
<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" ><img src="图片地址"></a></li>
<li><a href="连接地址1" ><img src="图片地址"></a></li>
<li><a href="连接地址1" ><img src="图片地址"></a></li>
</ul>
</div>
</div>
</div>
</div>
第二种渐变轮番
<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 class="slider-promo J_Slider J_TWidget" style="HEIGHT: 图片高度px"
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 href="商品连接" target=_blank><IMG style="WIDTH: 750px; HEIGHT: 480px" alt="" src="图片地址"></A>
<LI><A href="商品连接" target=_blank><IMG style="WIDTH: 750px; HEIGHT: 480px" alt="" src="图片地址"></A>
<LI><A href="商品连接" target=_blank><IMG style="WIDTH: 750px; HEIGHT: 480px" alt="" src="图片地址"></A>
</LI></UL></DIV>。