很棒的一组射流研究…图片轮播特效

大家经常在网页中使用轮播效果，本文为大家分享的是一组图片轮播特效，希望大家喜欢

先看一眼效果图：

代码：

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/style * { padd :0；保证金：0} #内容{宽度：550像素高度：300 px余量：50px汽车；位置：相对；} #内容输入{宽度：60像素高度：30 px右边距：10 px} # content div { dip lay : inline-block；位置：绝对；底部：0;border:1px固体# ccc宽度宽度：250像素高度：250 px背景：url(img/loader_ico.gif)无重复中心# f1f1f1} #内容div.left { left:0} #内容div。右{ right :0} # content div span { display : inline-block；宽度宽度：250像素高度：30 px线高：30 px背景# ccccolor:red文本对齐：居中；} # content div img { height :250 px；宽度width :250 px }/style script window。onload=function(){ var content=$(' content ')、prev=$('prev ')、next=$('next ')、left=$('left ')、right=$(' right ')；var aSpan=内容。getelementsbytagname(' span ')；var aImg=内容。getelementsbytagname(' img ')；var arr=[ ['img/1.png '，' img/2.png '，' img/3.png '，' img/4.png']，['img/2.png '，' img/3.png '，' img/4。png ']；var num=[0，0]；//初始化for(var I=0；I Aspan . lengthi){ 0旋转木马；aImg[i].索引=我；aImg[i].onclick=function(){ if(num[this。index]===arr[this。索引].length-1)num[this。index]=-1；num[这个。索引]；旋转木马(这个。索引)；} } //下一组下一个。onclick=function(){ for(var I=0；I Aspan . lengthi){ if(num[I]===arr[I].length-1)num[I]=-1；num[I]；旋转木马；} } //上一组prev。onclick=function(){ for(var I=0；I Aspan . lengthi){ if(num[I]===0)num[I]=arr[I].长度；num[I]-；旋转木马；} }函数转盘（索引){ aSpan[index].innerHTML=num[index]1 '/' arr[index].长度；aImg[索引]。src=arr[index][num[index]]；}函数$(id){返回文档。getelementbyid(id)；} }/script/head dydiv id=' content '输入类型='按钮'值='上一组id='prev' /输入类型='按钮'值='下一组id='next'/div class='left' span图片数量加载中/span img///div class=' right ' span图片数量加载中/span img//div/div/body/html精彩专题分享：jQuery图片轮播Java脚本语言图片轮播引导程序图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。