本文实例为大家分享了射流研究…实现简单图片轮播的具体代码，最终实现效果图

代码块

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

！DOCTYPE html html head meta charset=' utf-8 '/title/title style * { margin 3360 0；padd : 0 } ul {列表式：无} img {垂直对齐：顶部} .盒子{宽度： 490像素高度： 170像素；余量： 100像素自动；padding: 5pxborder: 1px固体# ccc}。内部{宽度： 490像素高度： 170像素；背景-颜色：粉色；飞越：隐藏；相对位置：} .内部ul {宽度： 1000%;绝对位置：top : 0；左： 0；} .内部li {左侧浮动：} .方形{位置：绝对值；right: 10pxbottom: 10px}。正方形跨度{ display : inline-block；宽度： 16px高度： 16px背景-color : # fff；文本对齐：中心；线高： 16px光标：指针；} .square span.current底色-橙色：color : # fff }/style/head body div class=' box ' id=' box ' div class=' inner ' ul lia href=' # ' img src=' http : images/01。jpg '/a/Li lia href=' # ' img src=' http : images/03。jpg/a/Li lia href='/a/Li lia href=' # ' img src=' http : images/03。jpg/a/Li lia href=' # ' img鼠标经过按钮按钮排他var box=文档。getelementbyid(' box ')；var inner=box。子级[0]；//获取包厢下的第一个元素，也就是内部变量ul=内部。子级[0]；//获取内部的下的ul var平方列表=内部。孩子[1]；//获取内部的下的第二个元素var squares=方块列表。儿童；//获取所有的按钮var imgWidth=inner . offsetidth//alert(imgWidth)；//给每个按钮注册鼠标经过事件for(var I=0；isquares.length正方形。索引=我；//把索引保存在自定义属性中正方形onmouseover=function(){ //鼠标经过事件//排他干掉所有人for(var j=0；jsquares . lengj){ squares[j].className=} //留下我自己this.className=' current//以动画的方式把保险商实验所移动到指定的位置//目标和当前按钮索引有关，和图片宽度有关而且是负数var target=-这个。index * IMgwidth//获取到索引动画(ul，目标);} }函数动画(对象，目标){ clearInterval(对象。计时器)；物体。timer=setInterval(function(){ var step=20；var step=obj.offsetLeft target？步骤：-步骤；if(数学。腹肌offsetleft-target)数学。ABS(步骤)){ obj。风格。左=obj。偏移步骤“px ”;} else { obj。风格。left=目标“px”；clearInterval(obj。计时器)；} },15)}/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。