图片轮播代码
[Web]通用轮播图代码示例
![[Web]通用轮播图代码示例](https://img.taocdn.com/s3/m/a67ed75bce84b9d528ea81c758f5f61fb7362827.png)
[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.效果。
动易图片滚动代码
一、向左滚动1、调用“图片”栏目图片的向左滚动代码（效果演示）以下是最新图片标签说明。
以下是引用片段：-----------------------------------〈tr〉〈td class=main_title_575〉〈B〉最新图片〈/B〉〈/td〉〈/tr〉〈tr〉〈td class=main_tdbg_575 vAlign=center align=middle height=131〉〈!--{$GetPicPhoto(3,0,True,0,4,False,False,0,1,1,130,90,20,0,True,4)}--〉〈/td〉〈/tr〉------------------------------------用以下是滚动代码代替上面红色的标签部分，注意红色部分的变化。
------------------------------------〈!--滚动代码开始--〉〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉〈table cellPadding=0 align=left border=0 cellspace="0"〉〈tr〉〈td id=demo11 vAlign=top〉〈!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--〉〈/td〉〈td id=demo12 vAlign=top〉〈/td〉〈/tr〉〈/table〉〈/div〉〈SCRIPT〉var speed=15demo12.innerHTML=demo11.innerHTMLfunction Marquee11(){if(demo12.offsetWidth-demo.scrollLeft〈=0)demo.scrollLeft-=demo11.offsetWidthelse{demo.scrollLeft++}}var MyMar1=setInterval(Marquee11,speed)demo.onmouseover=function() {clearInterval(MyMar1)}demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}〈/SCRIPT〉〈!--滚动代码结束--〉-----------------------------------2、文章频道图片向左滚动代码（效果演示）以下是文章频道模板最新图片部分代码-----------------------------------〈tr〉〈td Class="main_title_575"〉〈b〉最新图片{$ChannelShortName}〈/b〉〈/td〉〈/tr〉〈tr〉〈td Class="main_tdbg_575"〉{$GetPicArticle(ChannelID,0,True,0,4,false,false,0,3,2,130,90,20,0,True,4)} 〈/ td〉〈/tr〉〈tr〉〈td Class="main_shadow"〉〈/td〉〈/tr〉------------------------------------用以下是滚动代码代替上面红色的标签，注意红色部分的变化。
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”下载这个文件就行。
最常用图片轮播代码示例
最常用图片轮播代码示例因为要做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>。
C#winform实现图片轮播
C#winform实现图⽚轮播作为⼀个C#winform刚刚⼊门的我觉得这可能是初学者都会遇到的我⾃⼰也觉得很神奇⾸先窗体⾥有⼀个Button按钮，和⼀个pictureBox 图⽚框定义⼀个线程⽅法/// <summary>/// 改变图⽚/// </summary>/// <param name="img">图⽚</param>/// <param name="millisecondsTimeOut">切换图⽚间隔时间</param>private void ChangeImage(Image img, int millisecondsTimeOut){this.Invoke(new Action(() =>{pictureBox1.Image = img;}));Thread.Sleep(millisecondsTimeOut);}在button1 添加单击事件如下代码Thread th;private void button1_Click(object sender, EventArgs e){//timer1.Enabled = true;th = new Thread(delegate(){// 3就是要循环轮数了for (int i = 0; i < 3; i++){//调⽤⽅法ChangeImage(WindowsFormsApplication2.Properties.Resources.img__5_, 1000); ChangeImage(WindowsFormsApplication2.Properties.Resources.img__6_, 1000); ChangeImage(WindowsFormsApplication2.Properties.Resources.img__7_, 1000); }});th.IsBackground = true;th.Start();}就可以完成了，虽然对于⼤神们来说不值得⼀提，但对于像我们这些初学者在做⼀些简单项⽬的时候还是⽐较有⽤，⼤家可以通过这个去延伸⽤处不仅仅是图⽚轮播。
swiper自动图片无限轮播实现代码
swiper⾃动图⽚⽆限轮播实现代码完整代码<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="swiper/css/swiper-3.4.2.min.css" rel="external nofollow" ><script src="swiper/js/swiper-3.4.2.min.js"></script><style type="text/css">.swiper-container {width: 900px;height: 300px;}</style></head><body><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide box1"><img src="img/a.jpg"></div><div class="swiper-slide box2" ><img src="img/b.jpg"></div><div class="swiper-slide box3"><img src="img/c.jpg"></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 --><!--<div class="swiper-scrollbar"></div>--></div></div><script>var mySwiper = new Swiper ('.swiper-container', {direction: 'horizontal',loop: true,// 如果需要分页器pagination: '.swiper-pagination',// 如果需要前进后退按钮nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',autoplay : 1000,speed:100,// 如果需要滚动条// scrollbar: '.swiper-scrollbar',effect : 'coverflow',slidesPerView: 3,centeredSlides: true,coverflow: {rotate: 30,stretch: 10,depth: 60,modifier: 2,slideShadows : true}})</script></body></html>如何使⽤swiper写轮播之前⼤家都写过轮播图吧，相信在写轮播图的过程中也因为当中的某些细节烦恼过吧，接下来我给⼤家讲述⼀个⽅便快捷的轮播图吧！Swiper常⽤于移动端⽹站的内容触摸滑动1.第⼀步先引⼊css---swiper.css插件和JQ---swiper.js 插件,然后呢就开始写轮播图了<div class="swiper-container">--⾸先定义⼀个容器<div class="swiper-wrapper"><div class="swiper-slide"><img src="" /></div> --添加图⽚<div class="swiper-slide"><img src="" /></div><div class="swiper-slide"><img src="" /></div></div><div class="swiper-pagination"></div>--⼩圆点分页器<div class="swiper-button-prev"></div>--上⼀页<div class="swiper-button-next"></div>--下⼀页</div>如果想让它动起来，那就继续来写js吧var mySwiper = new Swiper(".swiper-container",{autoplay:1000,--每秒中轮播⼀次loop:true,--可以让图⽚循环轮播autoplayDisableOnInteraction:false,--在点击之后可以继续实现轮播pagination:".swiper-pagination",--让⼩圆点显⽰paginationClickable:true,--实现⼩圆点点击prevButton:".swiper-button-prev",--实现上⼀页的点击nextButton:".swiper-button-next",--实现下⼀页的点击 effect:"flip"--可以实现3D效果的轮播})Swiper轮播的也有它的好处： 1.Swiper是纯javascript打造的滑动特效插件，⾯向⼿机、平板电脑等移动终端。
实现一个简单的图片轮播
实现一个简单的图片轮播最近，给一个好友的网站做的一个简单的图片轮播效果，从百度上搜索了一下，没有找到合适的。
有的写的太复杂，有的又实现不了所要的功能。
于是，还是自己写一个吧。
和大家分享一下。
下面的源码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>images</title><script language="javascript">setInterval(test,3000);var array = new Array();var i = 0;var array = new Array(newArray("","https:///imgextra/i1/2566707233/TB2qs3tfOlnpuFjSZFgXXbi7FXa_!!2566 707233.jpg"),newArray("","https:///imgextra/i2/2566707233/TB2Nb5YXJhvOuFjSZFBXXcZgFX a_!!2566707233.jpg"),newArray("","https:///imgextra/i1/2566707233/TB2mlQEfJ4opuFjSZFLXXX8mXXa _!!2566707233.jpg"));function test() {var myimg=document.getElementById("obj");var myA=document.getElementById("obj1");if(i==array.length-1){ i=0; }else{ i++; }myimg.src=array[i][1];myA.href=array[i][0];}</script></head><body><a id="obj1" href="" /><img id = "obj"src="https:///imgextra/i3/1999888816/TB2JPe3lVXXXXbjXpXXXXXXXXXX_!!1999888816.png" width=400px hight=600px /> </a></body></html>。
html图片轮播代码
<div style="position:relative; top:-50px; left:240px;">
<a href="javascript:show(1)"><span id="I1" style="width:18px; text-align:left; background:gray">1</span></a>
else
{document.getElementById('pic'+i).style.display='none'; document.getElementById('I'+i).style.backgroundColor='gray'axIndex)
}
for(var i=1;i<(maxIndex+1);i++){
if(i==nowIndex)
{document.getElementById('pic'+nowIndex).style.display=''; document.getElementById('I'+nowIndex).style.backgroundColor='red';}
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_left1" valign="top" align="center">
淘宝设置全屏轮播图片代码
href="链接网站地址" target=_blank><IMG border=0
src="大图链接地址" width=1920
<div class="skin-box-bd clear-fix">
<span><DIV class=J_TWidget data-widget-type="Tabs"
data-widget-config="{'effect': 'fade', 'circular': true ,'navCls':'toseise','activeTriggerCls':'odslos','contentCls':'piaofu'}">
<DIV style="HEIGHT: 585px" class=piaofu>
<DIV
style="Z-INDEX: 0; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; TOP: 0px; PADDING-TOP: 0px; LEFT: -485px"
class=sltent>
网页5张图片轮播代码
<!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;//自动播放的idvar 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);//显示指定的图片indexfunction 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 后面的内容。
JavaScript实现图像轮播特效教程
JavaScript实现图像轮播特效教程章节一：引言在现代网页设计中，图像轮播特效是非常常见的元素之一。
通过图像轮播特效，可以使网页更加动态、吸引人，提升用户体验。
本教程将介绍如何使用JavaScript实现图像轮播特效，并提供详细的步骤和示例代码。
章节二：基本结构首先，我们需要准备好轮播图的基本结构。
在HTML文件中，创建一个容器元素，用于包裹轮播图的图片和导航按钮。
然后，给容器元素添加一个唯一的ID，方便在JavaScript中进行操作。
章节三：样式设计接下来，我们需要为轮播图的容器元素和其中的图片设置样式。
使用CSS，可以设置容器元素的宽度和高度，以及图片的显示方式和过渡效果。
通过设置适当的样式，可以使轮播图在页面中居中显示，并可以根据需要进行自定义的设计。
章节四：添加JavaScript代码再接下来，我们需要使用JavaScript编写轮播图的逻辑代码。
首先，使用DOM操作获取到容器元素和其中的图片元素。
然后，使用数组或者类数组对象保存每张图片的路径或地址。
接下来，定义一个变量来存储当前显示的图片的索引。
然后，编写一个函数来实现图像切换的效果。
在函数中，通过改变图片元素的样式或属性，实现图片的切换。
同时，更新当前显示的图片的索引，以便进行下一次切换。
章节五：自动轮播功能除了手动切换图片，我们还可以添加自动轮播的功能。
使用JavaScript的定时器函数，可以定期触发图片切换的函数。
通过设置合适的时间间隔，可以实现自动轮播的效果。
同时，需要添加鼠标移入和移出事件，以便在用户鼠标悬停在图片上时停止轮播，鼠标离开时继续轮播。
章节六：导航按钮如果希望用户可以通过导航按钮来手动控制轮播图的切换，我们还需要添加导航按钮的功能。
在HTML文件中，创建相应数量的导航按钮，并为每个按钮设置一个特定的类名或索引属性。
在JavaScript中，使用事件委托的方式，监听导航按钮的点击事件。
当用户点击某个导航按钮时，获取该按钮的索引，然后调用图片切换函数，显示对应索引的图片。
Android图片轮播代码
package ingbanner;import android.content.Context;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.util.Log;import android.widget.ImageView;import android.widget.Toast;import com.bumptech.glide.Glide;import com.youth.banner.Banner;import com.youth.banner.listener.OnBannerListener;import com.youth.banner.loader.ImageLoader;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements OnBannerListener { private Banner banner;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(yout.activity_main);List images= new ArrayList<>();images.add(R.mipmap.a);images.add(R.mipmap.b);images.add(R.mipmap.c);banner = (Banner) findViewById(R.id.banner);//设置图片加载器banner.setImageLoader(new GlideImageLoader());//设置图片集合banner.setImages(images);//banner设置方法全部调用完毕时最后调用banner.start();//设置监听器banner.setOnBannerListener(this);}@Overridepublic void OnBannerClick(int position) {Log.d("MainActivity","图片被点击");Toast.makeText(getApplicationContext(),"你点击了："+position,Toast.LENGTH_SHORT).show();}private class GlideImageLoader extends ImageLoader {@Overridepublic void displayImage(Context context, Object path, ImageView imageView) { //Glide 加载图片Glide.with(context).load(path).into(imageView);}}//如果你需要考虑更好的体验，可以这么操作@Overrideprotected void onStart() {super.onStart();//开始轮播banner.startAutoPlay();}@Overrideprotected void onStop() {super.onStop();//结束轮播banner.stopAutoPlay();}}。
淘宝店铺装修模板图片轮播代码
淘宝店铺装修模板图片轮播代码店铺装修模板图片轮播代码是一款能够美化店铺装修，吸引客户注意力，激发购买热情，提高宝贝转化率的产品。
该产品分为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款左右滚动代码演示，使用该代码能够为店铺增添不少美观度，同时吸引客户的注意力，提高宝贝转化率。
把图片轮播代码粘贴进去，点击保存即可。
使用图片轮播功能可以让店铺更加生动有趣，吸引更多的顾客。
京东轮播图代码
京东轮播图代码京东轮播图代码如今轮播图已然成为网站中的最常用功能功能之一,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。
今天就教教大家做一个仿京东的'轮播图。
主要功能是图片自己轮播，也可根据左右按钮调控，也可根据下面的数字球控制。
<div class="slider" id="circle"><a href=""><img alt="" src="img/1p.jpg" /></a><ul class="circle"><!--移动鼠标触发事件--><li class="current" id="ico1" onmouseover="lunbo(1)">1</li><li id="ico1" onmouseover="lunbo(2)">2</li><li id="ico1" onmouseover="lunbo(3)">3</li><li id="ico1" onmouseover="lunbo(4)">4</li><li id="ico1" onmouseover="lunbo(5)">5</li><li id="ico1" onmouseover="lunbo(6)">6</li></ul><div class="arrow"><a class="arrow-l" href="javaScript:;" id="bo1" onclick="bo2()"><</a> <a class="arrow-r" href="javaScript:;" id="bo2" onclick="bo1()">></a></div></div><script>var a = 1;var t = 0;window.onload = function(){t = setInterval("bo1()", 4000);}function lunbo(num){a = num;var btn = document.getElementById("circle").getElementsByTagName("im g")[0];for (var i=1;i<7;i++) {var li = document.getElementById("circle").getElementsByTagName("li") [i-1];li.style.backgroundColor = "#3E3E3E";if(num == i){btn.src = "img/"+i+"p.jpg";li.style.backgroundColor = "#B61B1F"; }}}function bo1(){if(a>=6){a = 0;}a++;lunbo(a);}function bo2(){if(a<=1){a = 7;}a--;lunbo(a);}</script>【京东轮播图代码】。
网页里实现图片滚动代码
章，点击“显示源代码”。
2，在以红色为标记的图片地址换成你所链接图片的地址，当然了，本地址也可以用！ 3，在
和
GIF）下面的代码是让图片
实现步骤如下： 1，打开发表文章，点击“显示源代码”。
2，在以红色为标记的图片地址换成你所链接图片的地址，当然了，本地址也可以用！ 3，在
和
之间粘贴上面代码！（注：图片格式为JPG或者GIF）下面的图片是让图片向下移动！、
步骤如上！下面是滚
:
步骤如下： 1，首先打开控制面板，打开我的首页维护，进入自定义面板，新增一个面板。
2，打开新增的面板，点击
显示源代码！ 3，在代码
间插入如如上代码把以上图片链接地址换成自己的图片地址即可。
代码中可以修改的地方 direction=right 是移动的方向上：up 下：down 左：right 右：left scrollamount=5 是向下移动速度，可以调整，一般设置在1---15的
范围内比较好. 悬浮图片代码很多的网站都在两边空白处悬浮两个广告.随着滚动条的移动,图片也会向下移.那么我们blog不打广告.就来两个好看的动画
或图片吧! 左侧代码：
参数说明： 1、clientWidth 2、clientHeight后面负数的绝对值越大，图片越靠近上部 3、“图片地址”处加入你想用到的图片地址即可，你可以在网上找找.。
html无缝轮播图完整代码
html⽆缝轮播图完整代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>轮播图⽆缝滚动</title><style type="text/css">*{ padding:0; margin:0; list-style:none; border:0;}.all{width:500px;height:200px;padding:7px;border:1px solid #ccc;margin:100px auto;position:relative;}.screen{width:500px;height:200px;overflow:hidden;position:relative;}.screen li{ width:500px; height:200px; overflow:hidden; float:left;}.screen ul{ position:absolute; left:0; top:0px; width:3000px;}.all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}.all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}.all ol li.current{ background:yellow;}/*#arr {display: none;}*/#arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'⿊体'; font-size:30px; color:#fff; opacity:0.3; #arr #right{right:5px; left:auto;}</style></head><body><div class="all" id='all'><div class="screen" id="screen"><ul id="ul"><li><img src="images/1.jpg" width="500" height="200"/></li><li><img src="images/2.jpg" width="500" height="200"/></li><li><img src="images/3.jpg" width="500" height="200"/></li><li><img src="images/4.jpg" width="500" height="200"/></li><li><img src="images/5.jpg" width="500" height="200"/></li></ul><ol></ol><div id="arr"><span id="left"><</span><span id="right">></span></div></div></div></body></html><script>//需求：⽆缝轮播图//步骤：//1.⽼三步。
最简单的JavaScript图片轮播代码(两种方法)
最简单的JavaScript图片轮播代码(两种方法) 通过改变每个图片的opacity属性：素材图片：代码一：最简单的轮播广告body, div, ul, li {margin: ;padding: ;}ul {list-style-type: none;}body {background: #;text-align: center;font: px/px Arial;}#box {position: relative;width: px;height: px;background: #fff;border-radius: px;border: px solid #fff;margin: px auto;}#box .list {position: relative;width: px;height: px;overflow: hidden;border: px solid #ccc;}#box .list li {position: absolute;top: ;left: ;width: px;height: px;opacity: ;transition: opacity .s linear }#box .list li.current { opacity: ;}#box .count { position: absolute; right: ;bottom: px;}#box .count li {color: #fff;float: left;width: px;height: px;cursor: pointer;margin-right: px; overflow: hidden; background: #F; opacity: .;border-radius: px;}#box .count li.current { color: #fff;opacity: .;font-weight: ; background: #f}代码二：首先第一步，下载好一个jquery库的插件，jquery.js 网上很多随处能够下载．下载的插件要放在名目下．然后在html文档中链接好第二步，布局好一个DIV,如：上一张下一张//上面的ｌｉ要设定为显示，因为是第一张图片．由于方便各位网友下载能够清晰明了，我就没有用图片路径了，因为到你们电脑上就看不到了，那个地点用背景颜色．第三步，就到了写CSS的时候了．下面的CSS明白基础的人都看得明白．#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//那个地点是给整个大的ＤＩＶ设定属性．#scroll ul{height:180px; list-style:none;}//ＤＩＶ下的ＵＬ属性．#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//ＤＩＶ下的ＵＬ下的ＬＩ属性．注意：display:none;因为要将所有的ｌｉ隐藏了先．当点击的时候在显示出来．.subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一张按钮的属性．注意一个绝对定位．.subr{position:absolute;bottom:20px; right:40%;width:80px;height:20px; line-height:20px;text-align:center;font-size:16px;font-weight:bold;cursor:pointer;}//下一张按钮的属性．注意一个绝对定位．.subr:hover{ background:yellow;border-radius:10px;}.subl:hover{ background:yellow;border-radius:10px;}//以上两个hover是鼠标通过的效果．第四步，就是ｊｑｕｅｒｙ代码了！也非常简单．先将代码看一遍，你就会用了！四步轻松搞定一个简单的轮！“[学校计划]下学期英语教研组计划”学校工作计划别详一、指导思想：在教务处的领导下，团结奋斗，协调好各备课组间的关系。
图片轮播（左右切换）--JS原生和jQuery实现
图⽚轮播（左右切换）--JS原⽣和jQuery实现图⽚轮播(左右切换)--js原⽣和jquery实现左右切换的做法基本步骤跟上⼀篇⽂章类似，只不过修改了⼀些特定的部分（1）⾸先是页⾯的结构部分对于我这种左右切换式1.⾸先是个外围部分（其实也就是最外边的整体wrapper)2.接着就是你设置图⽚轮播的地⽅（也就是⼀个banner吧）3.然后是⼀个图⽚组（可以⽤新的div 也可以直接使⽤ ul-->li形式）4.然后是图⽚两端的左箭头和右箭头5.然后是⼀个透明背景层，放在图⽚底部6.然后是⼀个图⽚描述info层，放在透明背景层的左下⾓（div 或 ul-->li)7.然后是⼀个按钮层，⽤来定位图⽚组的index吧,放在透明背景层的右下⾓(div 或 ul-->li)由此，可以先构造出html结构<div id="wrapper"><!-- 最外层部分 --><div id="banner"><!-- 轮播部分 --><ul class="imgList"><!-- 图⽚部分 --><li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li><li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li><li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li><li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li><li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li></ul><img src="./img/prev.png" width="20px" height="40px" id="prev"><img src="./img/next.png" width="20px" height="40px" id="next"><div class="bg"></div><!-- 图⽚底部背景层部分--><ul class="infoList"><!-- 图⽚左下⾓⽂字信息部分 --><li class="infoOn">puss in boots1</li><li>puss in boots2</li><li>puss in boots3</li><li>puss in boots4</li><li>puss in boots5</li></ul><ul class="indexList"><!-- 图⽚右下⾓序号部分 --><li class="indexOn">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></div>相对于之前，知识增多了两个箭头img标签（2）CSS样式部分（图⽚组的处理）跟淡⼊淡出式就不⼀样了淡⼊淡出只需要显⽰或者隐藏对应序号的图⽚就⾏了，直接通过display来设定左右切换式则是采⽤图⽚li 浮动，⽗层元素ul 总宽为总图⽚宽，并设定为有限banner宽度下隐藏超出宽度的部分然后当想切换到某序号的图⽚时，则采⽤其ul 定位 left样式设定相应属性值实现⽐如显⽰第⼀张图⽚初始定位left为0px, 要想显⽰第⼆张图⽚则需要left:-400px 处理<style type="text/css">body,div,ul,li,a,img{margin: 0;padding: 0;}ul,li{list-style: none;}a{text-decoration: none;}#wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}#banner{position:relative;width: 400px;height: 200px;overflow: hidden;}.imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}.imgList li{float:left;display: inline;}#prev,#next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}#prev{left: 10px;}#next{right: 10px;}#prev:hover,#next:hover{opacity: 0.5;filter:alpha(opacity=50);}.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;} .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}.infoList li{display: none;}.infoList .infoOn{display: inline;color: white;}.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}.indexList .indexOn{background: red;font-weight: bold;color: white;}</style>（3）页⾯基本已经构建好久可以进⾏js的处理了⼀、jQuery⽅式照常先说jq处理1.全局变量等var curIndex = 0, //当前indeximgLen = $(".imgList li").length; //图⽚总数2.⾃动切换定时器处理// 定时器⾃动变换2.5秒每次var autoChange = setInterval(function(){if(curIndex < imgLen-1){curIndex ++;}else{curIndex = 0;}//调⽤变换处理函数changeTo(curIndex);},2500);3.为左右箭头添加事件处理左箭头//左箭头滑⼊滑出事件处理$("#prev").hover(function(){//滑⼊清除定时器clearInterval(autoChange);},function(){//滑出则重置定时器autoChangeAgain();});//左箭头点击处理$("#prev").click(function(){//根据curIndex进⾏上⼀个图⽚处理curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);changeTo(curIndex);});右箭头//右箭头滑⼊滑出事件处理$("#next").hover(function(){//滑⼊清除定时器clearInterval(autoChange);},function(){//滑出则重置定时器autoChangeAgain();});//右箭头点击处理$("#next").click(function(){curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;changeTo(curIndex);});其中autoChangeAgain()就是⼀个重置定时器函数//清除定时器时候的重置定时器--封装function autoChangeAgain(){autoChange = setInterval(function(){if(curIndex < imgLen-1){curIndex ++;}else{curIndex = 0;}//调⽤变换处理函数changeTo(curIndex);},2500);}其中changeTo()就是⼀个图⽚切换的处理函数function changeTo(num){var goLeft = num * 400;$(".imgList").animate({left: "-" + goLeft + "px"},500);$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");}每传⼊⼀个图⽚序号，则按理进⾏goLeft4.为右下⾓的那⼏个li 按钮绑定事件处理//对右下⾓按钮index进⾏事件绑定处理等$(".indexList").find("li").each(function(item){$(this).hover(function(){clearInterval(autoChange);changeTo(item);curIndex = item;},function(){autoChangeAgain();});});jq就是这样，简便，原⽣代码量就有些多了完整代码1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="/1999/xhtml">3<head>4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>5<title>图⽚轮播 jq(左右切换)</title>6<style type="text/css">7 body,div,ul,li,a,img{margin: 0;padding: 0;}8 ul,li{list-style: none;}9 a{text-decoration: none;}1011 #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}12 #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}13 .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}14 .imgList li{float:left;display: inline;}15 #prev,16 #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}17 #prev{left: 10px;}18 #next{right: 10px;}19 #prev:hover,20 #next:hover{opacity: 0.5;filter:alpha(opacity=50);}21 .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}22 .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}23 .infoList li{display: none;}24 .infoList .infoOn{display: inline;color: white;}25 .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}26 .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}27 .indexList .indexOn{background: red;font-weight: bold;color: white;}28</style>29</head>30<body>31<div id="wrapper"><!-- 最外层部分 -->32<div id="banner"><!-- 轮播部分 -->33<ul class="imgList"><!-- 图⽚部分 -->34<li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>35<li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>36<li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>37<li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>38<li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>39</ul>40<img src="./img/prev.png" width="20px" height="40px" id="prev"> 41<img src="./img/next.png" width="20px" height="40px" id="next"> 42<div class="bg"></div><!-- 图⽚底部背景层部分-->43<ul class="infoList"><!-- 图⽚左下⾓⽂字信息部分 -->44<li class="infoOn">puss in boots1</li>45<li>puss in boots2</li>46<li>puss in boots3</li>47<li>puss in boots4</li>48<li>puss in boots5</li>49</ul>50<ul class="indexList"><!-- 图⽚右下⾓序号部分 -->51<li class="indexOn">1</li>52<li>2</li>53<li>3</li>54<li>4</li>55<li>5</li>56</ul>57</div>58</div>59<script type="text/javascript" src="./js/jquery.min.js"></script>60<script type="text/javascript">61var curIndex = 0, //当前index62 imgLen = $(".imgList li").length; //图⽚总数63// 定时器⾃动变换2.5秒每次64var autoChange = setInterval(function(){65if(curIndex < imgLen-1){66 curIndex ++;67 }else{68 curIndex = 0;69 }70//调⽤变换处理函数71 changeTo(curIndex);72 },2500);7374//左箭头滑⼊滑出事件处理75 $("#prev").hover(function(){76//滑⼊清除定时器77 clearInterval(autoChange);78 },function(){79//滑出则重置定时器80 autoChangeAgain();81 });82//左箭头点击处理83 $("#prev").click(function(){84//根据curIndex进⾏上⼀个图⽚处理85 curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);86 changeTo(curIndex);87 });8889//右箭头滑⼊滑出事件处理90 $("#next").hover(function(){91//滑⼊清除定时器92 clearInterval(autoChange);93 },function(){94//滑出则重置定时器95 autoChangeAgain();96 });97//右箭头点击处理98 $("#next").click(function(){99 curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;100 changeTo(curIndex);101 });102103//对右下⾓按钮index进⾏事件绑定处理等104 $(".indexList").find("li").each(function(item){105 $(this).hover(function(){106 clearInterval(autoChange);107 changeTo(item);108 curIndex = item;109 },function(){110 autoChangeAgain();111 });112 });113114//清除定时器时候的重置定时器--封装115function autoChangeAgain(){116 autoChange = setInterval(function(){117if(curIndex < imgLen-1){118 curIndex ++;119 }else{120 curIndex = 0;121 }122//调⽤变换处理函数123 changeTo(curIndex);124 },2500);125 }126127function changeTo(num){128var goLeft = num * 400;129 $(".imgList").animate({left: "-" + goLeft + "px"},500);130 $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");131 $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");132 }133</script>134</body>135</html>View Code⼆、js 原⽣实现js原⽣⼤概也就是模拟jq的实现思路1.全局变量等var curIndex = 0, //当前indeximgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图⽚组imgLen = imgArr.length,infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图⽚info组indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组2.⾃动切换定时器处理// 定时器⾃动变换2.5秒每次var autoChange = setInterval(function(){if(curIndex < imgLen -1){curIndex ++;}else{curIndex = 0;}//调⽤变换处理函数changeTo(curIndex);},2500);同样的，有⼀个重置定时器的函数//清除定时器时候的重置定时器--封装function autoChangeAgain(){autoChange = setInterval(function(){if(curIndex < imgLen -1){curIndex ++;}else{curIndex = 0;}//调⽤变换处理函数changeTo(curIndex);},2500);}3.因为有⼀些class呀，所以来⼏个class函数的模拟也是需要的//通过class获取节点function getElementsByClassName(className){var classArr = [];var tags = document.getElementsByTagName('*');for(var item in tags){if(tags[item].nodeType == 1){if(tags[item].getAttribute('class') == className){classArr.push(tags[item]);}}}return classArr; //返回}// 判断obj是否有此classfunction hasClass(obj,cls){ //class位于单词边界return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));}//给 obj添加classfunction addClass(obj,cls){if(!this.hasClass(obj,cls)){obj.className += cls;}}//移除obj对应的classfunction removeClass(obj,cls){if(hasClass(obj,cls)){var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');obj.className = obj.className.replace(reg,'');}}4.要左右切换，就得模拟jq的animate-->left .我的思路就是动态地设置element.style.left 进⾏定位。
网页图片轮番显示代码
就像图上一样有 1 2 3 4的代码向左转|向右转提问者采纳2010-03-12 15:55html 代码：<ul><li id="h1"><ahref="javascript:void(0);"><span>1</span></a></li><li id="h2"><ahref="javascript:void(0);"><span>2</span></a></li><li id="h3"><ahref="javascript:void(0);"><span>3</span></a></li><li id="h4"><ahref="javascript:void(0);"><span>4</span></a></li><li id="h5"><ahref="javascript:void(0);"><span>5</span></a></li></ul><div id="h1_body"></div><div id="h2_body"></div><div id="h3_body"></div><div id="h4_body"></div><div id="h5_body"></div></div>js代码:var p_idx=0;function Photo(path,title,url){this.Path=path;this.Title=title;this.URL=url;}var photos=[new Photo('SpeakerPhoto/123.jpg','Liu Changchun',213.aspx'),""];//图片用，分割$(function(){GetPhoto(0,4,$("#h1_body"));GetPhoto(4,4,$("#h2_body"));GetPhoto(8,4,$("#h3_body"));GetPhoto(12,4,$("#h4_body"));GetPhoto(16,2,$("#h5_body"));});function GetPhoto(inx,num,box){for(var i=0;i<num;i++){$(box).append('<a href="'+photos[inx].URL+'"><imgsrc="'+photos[inx].Path+'" title="'+photos[inx].Title+'" /></a>');inx++;}}function GetSinglePhoto(inx){document.write('<img src="'+photos[inx].Path+'"title="'+photos[inx].Title+'" />');}。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<li><img src="lunbo-img/liehuo_net_600x400_5.jpg" width="600" height="401" /></li>
<li><img src="lunbo-img/liehuo_net_600x400_2.jpg" width="600" height="400" /></li>
<li><img src="lunbo-img/liehuo_net_600x400_3.jpg" width="600" height="400" /></li>
简单的图片轮播
效果图：
图片轮播DW代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
height:320px;
}
#pic ul{
list-style-type:none;
position:absolute;
width:3560px;
}
#pic ul li{
float:left;
width:890px;
}
#pic img{
width:890px;
height:320px;
}
#tip {
var numslen=nums.length;
function over(arg){
this.mouseover=function(){
movePic(-arg*width,-arg*height,interval);
classNormal();
classCurrent(arg);
}
}
for(var i=0; i<numslen; i++){
font-size:16px;
font-weight:normal;
}
#tip .current{
color:#F00;
font-size:20px;
font-weight:bolder;
}
#mybox {
//加载window.onload函数
function addEventLoad(func){
var oldonload=window.onload;
if(typeof(window.onload)!="function"){
window.onload=func;
}else{
window.onload=function(){
var repeat="movePic("+fx+","+fy+","+interval+")";
elem.movement=setTimeout(repeat,interval);////建立定时事件，使图片动态向pic层图片的x轴位置移动
}
//当鼠标移动到数字上时切换图片
function changePic(width,height,interval){////width为图片宽度，height为图片高度，inerval为定时器延时
}
#jianting {
height: 40px;
width: 600px;
margin: 0 auto;
border: 1px solid #D03204;
}
#pic {
position:relative;
overflow: hidden;
width:3000px;
height:400px;
}
#pic ul{
list-style-type:none;
position:absolute;
width:3000px;
}
#pic ul li{
float:left;
width:600px;
}
#pic img{
width:600px;
height:400px;
}
#tip {
height: 25px;
width: 240px;
</ul>
</div>
<div id="tip">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<div id="jianting"></div>
<script type="text/javascript">
var newOver=new over(i);////使用闭包函数over来传递参数i
nums[i].onmouseover=newOver.mouseover;////应用闭包中的方法mouseover
}
}
//图片定时切换
var autoKey=false;////设置定时开关初始值为假
var t=window.setInterval("autoChange(600,0,5)",3000);
height: 25px;
width: 240px;
position:absolute;
right:0;
bottom:0;
}
#tip span{
padding:5px 15px;
text-align:center;
cursor:pointer;
color:#FFF;
}
#tip .normal{
color:#fff;
curTip[0].className="current";
}
addEventLoad(current);
//初始化数字序号样式
function classNormal(){
var nums=document.getElementById("tip").getElementsByTagName("span");
for(var i=0; i<nums.length; i++){
nums[i].className="normal";
}
}
//初始化当前数字序号样式
function classCurrent(n){
var nums=document.getElementById("tip").getElementsByTagName("span");
nums[n].className="current";
}
//移动图片
function movePic(fx,fy,interval){
var elem,xpos,ypos;
elem=document.getElementById("pic");
xpos=parseInt(elem.style.left);////取不到style.left和style.top的值，因此下面先做一下判断，如果是NaN就初始化赋值为0
var o=document.getElementById("mybox");
o.onmouseover=function(){
autoKey=true;
}
o.onmouseout=function(){
autoKey=false;
}
var nums=document.getElementById("tip").getElementsByTagName("span");
oldonload();
func();
}
}
}
////初始化文件加载时默认图片及默认样式
function current(){
var curImg,curTip;
curImg=document.getElementById("pic");
curImg.style.left="0px";
curTip=document.getElementById("tip").getElementsByTagName("span");
elem.style.top="0px";
}
if(xpos==fx && ypos==fy){
return true;////此判断为当前图片，返回值为真
}
//动画移动图片
var dist;
if(xpos<fx){////做水平判断，由于是横向移动，因此没做垂直方向判断