通过更改每张图片的不透明度属性：

素材图片：

代码一：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-' title最简单的轮播广告/title style body，div，ul，Li { margin : padd : } ul { list-style-type : none；}正文{背景： #；文本对齐：中心；font : px/px Arial；} # box {位置：相对宽度：像素；高度：像素；背景# fff边界半径：像素；border:像素实心# fffmargin: px汽车；} #框。列表{位置：相对；宽度：像素；高度：像素；飞越：隐藏；border:像素固体# ccc} #框。列表Li { position : absolutetop : left :宽度：像素；高度：像素；opa city 3360 transition :不透明度s .线性} #框李名单。当前{ opa city 3360} #框计数{位置：绝对值；right:bottom: px} #框。计数li { color: # fff向左浮动：宽度：像素；高度：像素；光标：指针；右边距：像素；飞越：隐藏；背景： # F；opacity:边界半径：像素；} #框李伯爵。当前{ color : # fffopacity:字体粗细：背景： # f }/样式/头体div id=' box ' ul class=' list ' Li class=' current ' style=' opa city 3360；'img src='http:img/images/.jpg ' width=' height=' '/Li Li style=' opa city 3360；img src='http:img/images/.jpg ' width=' height=' '/Li Li style=' opa city 3360；'img src='http:img/images/.jpg ' width=' height=' '/Li Li style=' opa city 3360；img src='http:img/images/.jpg ' width=' height=' '/Li Li style=' opa city 3360；'img src='http:img/images/.jpg ' width=' height=' '/Li/ul class=' count ' Li class=' current '/Li Li class=' '/Li Li class=' '/Li Li class=' '/Li Li class=' '/Li Li class=' '/Li/ul/div脚本var box=文档。getelementbyid(' box ')；var uls=文档。getelementsbytagname(' ul ')；var imgs=uls[].getElementsByTagName(' Li ')；var btn=uls[].getElementsByTagName(' Li ')；var i=指数=;//中间量，统一声明；var play=nullconsole.log(box、uls、imgs、BTN)；//获取正确//图片切换，淡入淡出效果我是用(过渡：不透明度s .线性)做的，不纠结、简单在钢性铸铁里面功能展示(a){ //方法定义的是当传入一个下标时，按钮和图片做出对的反应对于(I=；长度；i ){ btn[i].className=//很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见btn[a].类名='当前；} for(I=；iimgs.lengthi ){ //把图片的效果设置和按钮相同imgs[I]。风格。不透明度=；imgs[a]。风格。不透明度=；} } //切换按钮功能，响应对应图片对于(I=；长度；i ){ btn[i].索引=我；//不知道你有没有发现，循环里的方法去调用循环里的变量体我，会出现调到的不是我的变动值的问题。所以我先在循环外保存住btn[i].onmouseover=function(){ show(this。索引)；clearInterval(播放);//这就是最后那句话追加的功能} } //自动轮播方法函数autoPlay(){ play=setInterval(函数(){ //这个苍白的是为了保存定时器的，变量必须在全局声明不然其他方法调不到或者你可以调用自动播放也许可以但是没时间试了指数；index=imgs。长度(索引=)；//可能有优先级问题，所以用了括号，没时间测试了显示（索引);}，)} autoPlay()；//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用自动播放所以只能这样调用了//div的鼠标移入移出事件盒子。onmouseover=function(){ clearInterval(play)；};盒子。onmouseout=function(){ autoPlay()；};//按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。貌似我可以直接追加到之前定义事件中脚本/正文/html代码二：

第一步，下载一个jquery库插件。许多jquery.js可以在互联网上的任何地方下载。下载的插件应该放在目录中。然后，在html文档中链接脚本类型=' text/JAVAScript ' src=' http : jquery . js '/脚本。

其次，设计一个DIV，例如：

Div id=' scroll' p class=' subli '上一个p/p class='subr '下一个p/ul Li style=' background : red；display:block'/li //上面的li应该设置为显示，因为是第一张图片。Li style=' background:green'。/Li Li style=' background : gray；'/Li Li style=' background : orange；'/li /ul /div因为方便用户下载清楚，所以我不使用图片路径，因为我在你的电脑上看不到，所以我这里用的是背景色。

第三步，该写CSS了。了解基本知识的人都可以理解下面的CSS。

#滚动{ width :100%；高度：180 px；背景-颜色：白色；位置：相对；border-bottom:1px纯灰色；}//这里是为整个大div设置属性。# scrollul { height :180pxlist-style : none；}//div下的ul属性。# scroll Li { width :100%；高度：180 px；margin:0pxpadding:0pxdisplay:none}//div下ul下的Li属性。注意：display:none因为所有的李都应该先隐藏起来。它将在单击时显示.subli {位置：绝对；bottom:20px左侧：40%；宽度：80 px；高度：20 px；线高：20 px；文本对齐：居中；font-size :16 px；font-weight : bold；cursor:pointer指针；}//上一个按钮的属性。注意绝对定位.subr {位置：绝对；bottom:20px右：40%；宽度：80 px；高度：20 px；线高：20 px；文本对齐：居中；font-size :16 px；font-weight : bold；cursor:pointer指针；}//下一个按钮的属性。注意绝对定位.subr:haver {背景3360黄色；border-radius :10 px；} . sub : hover { background : yellow；border-radius :10 px；}//以上两个悬停都是鼠标经过的效果。第四步是jQuery代码！也很简单。读一遍代码，你就会用到它！

脚本类型=' text/JavaScript '/* carousel */$(function(){ var I=0；var len=$('#scroll ul li ')。长度-1；$('.subl’)。click(function(){ if(I==len){ I=-1；} I；$(' #卷轴ul li ')。eq(i)。fadeIn()。兄弟姐妹()。hide()；});//这里分开！上面是上一次点击的效果码，下面是下一次点击的效果码。$ ('.subr’)。click(function(){//获取类名的click事件。if(I==0){ I=len 1；} I-；$(' #卷轴ul li ')。eq(i)。fadeIn()。兄弟姐妹()。hide()；});});/* carousel *//编写四个步骤，轻松获得简单的回合！