3简单的代码示例如下lt！DOCTYPE html jquery轮播效果图 * padding 0px margin 0px a textdecoration ul liststyle outside slider， sliderpanel img， sliderextra width 650px height 413px。

function i=$quotnum liquotindexthis $thisaddClassquotcurrentquotsiblingsremoveClassquotcurrentquot $quotdivname=ban div imgquoteq$quotnum liquotindexthisshowsiblingshide isround = setTimeoutquotchangequot，3000 hoverfunctio。

第一张显示没问题，第二张以及之后的图片显示为空白首先，排除掉图片路径没问题如果有问题，也不会网上提问了初步判断，css静态定位错误css样式固定在了第一张图片，第二，第三之后的css定位不到，则显示空白即使在js中是动态定位的，但是请仔细检查你的图片的css的定位参数是否固定住了。

if$index === 0 当前为第一张轮播图 quotbanquoteq$quotbanquotlength1addClassquotactivesiblingsquotbanquotremoveClassquotactivequot这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法 else quotbanquoteq$index1addClassquotactivesiblingsquotbanquot。

下面是图片轮播代码 * var num = 0 function quot#div_pic ol liquotmouseoverfunctione thisattrquotclassquot，quotcurrentquotthissiblingsattrquotclassquot，quotquot 兄弟节点的class属性设置为空 alert$#39ul#39indexnum = $#39ul#39index + 2 var index。

图片轮播的话，有两种方式1 通过js控制图片的显隐来实现轮播实现简单通过定时器切换图片这种方式我博客里有关键代码，可以百度以下内容查看使用javascript，jquery实现的图片轮播功能xyytIT2 通过定位方式，使图片按照从左到右，或上下的顺序排列，这种效果比较好，但是实现起来，比较麻烦目前。

这个是要css，结合js或者jq，才能做出来的网络上都有现成的js代码，可以先学会css，然后自己去套用js代码就可以了。

jQuery是一个比较成熟的JS框架，简化了编程的流程图片轮播就是在页面里的图片之间的各种切换效果，让页面看起来更美观你问的就是通过jQuery框架来实现的图片切换效果的代码，使用时记得调用jQuery文件。

网页上的图片轮播放效是通过 Jquery技术实现的，JQuery技术依赖的编程语言是JavaScript这个效果你不用自己去写，可以在网上搜索“JS代码特效”，下载来修改一下CSS的尺寸就可以了。

3接着就要准备图片图片大小为600*450写CSS 4写入入第一段的#sider的CSS，对应到HTML的语法中设定了区块的高和宽接着下方的show1这边对应的就是 4需要设定图片轮播的速度与特效，如果特效使用fade，在标签之前加上代码 第5步 回到网页，就会看到特效。

这种插件非常多， 你可以挑一个用 如果你要问原理， 关键点是 外层div是一个窗口， 控制好长宽， 设置overflow为hidden， 那么只有在此区域内的内容才会被显示 内容是一堆图片， 通过js控制位置， 比如用relative定位， 通过css控制left， 就是移动效果 如果要轮播， 注意控制边界图片次序。

Html网页显示js轮播图 lt！轮播图js文件 lt！ function * lt！调用Luara * quotexamplequotluarawidthquot980quot，heightquot291quot，interval2500，selectedquotseletedquot，derictionquotleftquot lt！Luara图片切换骨架begin。

参考代码lt！DOCTYPE html Title btn display block margin135px auto width 30px height 30px fontsize 30px cursor pointer btnhover color gray fontsize 35px fontweight bold。

自己加五张图片，然后lt！doctype html lt！声明当前页面的编码集charset=gbk，gb2312中文编码，utf8国际编码 lt！当前页面的三要素 腾讯课堂专业的在线教育平台 lt！css，js margin0padding0 bodyfontsize12pxfontfamilyquot微软雅黑quotcolor#666he。

需要一个固定宽高的div，然后将图片放进div里面，设置定时器，每次根据图片下标都向左或向右移动一个图片宽度的距离，轮播到最后一个的时候将下标变成第一个图片的下标，就可以实现了。