今天给大家介绍下怎么用射流研究…实现图片轮播效果。

原理描述：

使用射流研究…实现轮播的原理是这样的：

假设初始的情况，下图一个网格代表一个图，初始时，显示1 :

当进行一次轮播后，显示变为下图显示2:

依次类推。

代码实现：

1 JS代码：

脚本类型=' text/JavaScript ' window .nlad=function(){//获得保险商实验所的元素var imgList=文档。getelementbyid(' IMglist ')；//获得图片的数组var imgArr=文档。getelementsbytagname(' img ')；var navId=文档。getelementbyid(' navId ')；var outer=文档。getelementbyid(' outer ')；imglist。风格。宽度=520 * imgarr。长度' px '；//设置navId的位置使其居中纳维。风格。左=(外侧。偏移导航。offsetwithts)/2 ' px '；//得到所有的a标签如果有其他的A的话这里需要注意要使用navId子元素的a var ALla=文档。getelementsbytagname(' a ')；定义变量索引=0;ALla[索引]。风格。背景颜色='黑色'；//设置默认的a为黑色for(var I=0；iallA.lengthi ){ allA[i].num=I；//alert(allA[i]).num)；allA[I]. n click=function(){ clearInterval(定时器);指数=this.num/*指数。风格。left=-520 * index ' px '；*/SEta()；move(imgList，' left '，-520*index，50，function(){ autoChange()；});};}函数SetA(){//alert(index)；//当indcx值比图片的数目多的时候就归0 if(index=IMgarr。length-1){ index=0；imglist。风格。left=0；} for(var I=0；iallA.lengthi ){ //去掉未点击的颜色仍然保留：悬停有用阿拉[我]。风格。background COlOr=} ALla[index]。风格。背景颜色='黑色'；} var计时器；function autoChange(){ timer=setInterval(function(){ index；index %=IMgarr . length move(IMglist，' left '，-520*index，20，function(){ SEta()；});},2000);} autoChange()；//可以根据目标参数进行判断向哪个方向移动函数move(obj，attr，target，speed，callback){ var current=parsent(getStyle(obj，attr))；//警报(当前);//根据目标的位置来判定速度的值是正是负if(当前目标){ speed=-speed；} //自定义对象定时器防止对象之间的混乱操作clearInterval(obj。计时器)；//alert(旧值)；物体。timer=setInterval(function(){ var oldValue=parsent(getStyle(obj，attr))；var newVal=旧值速度；//如果移动的越界进行重置if((速度0 newVal=目标)| |(速度0 newVal=目标)){ newVal=目标；} obj。style[attr]=NewVal ' px '；if(NewVal==target){ ClearInterval(obj。计时器)；回调回调();//回掉函数先判断有就执行没有不执行} },30);} //obj:获取样式元素//名称：获取样式名函数getStyle(obj，name){ if(window。getcomputed style){返回getcomputed style(obj，null)[name]；} else { return obj。current style[name]；} } }/script2 HTML代码：

div id=' outer ' ul id=' imgList ' liimg src=' http : img/1。jpg '/Li Li img src=' http : img/2。jpg '/Li Li img src=' http : img/3。jpg '/李丽丽img src=' http : img/1。jpg '/李！-增加这个为了实现轮播无缝切换-/ul div id=' navId ' a href=' JAVAScript :0 '/a href=' JAVAScript 33600 '/a href=' JAVAScript :0 '/a/div/div 3 CSS代码：

style type=' text/CSS ' * { margin :0 px；padding:0px} #外部{ width:520px高度：500 px；margin:50px汽车；背景-颜色：绿色黄色；padd :10 px 0；/*打开相对定位*/position : relative；飞越：隐藏；/*隐藏多余的*//*边框：3px纯绿色黄色*/} # imglist {/*删除li */list-style:none的点；/*打开绝对定位*/position : absolute；/*设置ul *的宽度//* width :1560 px；*/} #imgList li{ /*为图片设置浮动*/float : left；margin:0 10px/*设置左右外侧边距*/} #navId{ /*打开绝对定位*/position : absolute；/*设置位置*/bottom :15 px；/*设置该块的左偏移量，使其居中。因为外网宽度为520，每个链接宽度为15 ^ 2 * 5=25，目前有三张图片，所以总宽度为75 *//* left :212 px；*/} # NaVid a { width :15 px；height:15pxfloat:left/*设置超链接浮动*/margin 33600 5px；背景色：红色；opacity:0.5/*兼容IE8设置透明度*/filter:alpha(不透明度=50)；}/*设置鼠标悬停效果*/# navid a:悬停{背景色：黑色；} /style4要达到的效果：

有关旋转木马效果的更多主题，请点击以下链接查看研究

javascript图片轮播效果总结

jquery图片轮播效果总结

引导转盘特效摘要

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