原生Java脚本语言实现精美的淘宝轮播图效果示例【附演示源码下载】

本文实例讲述了原生Java脚本语言实现的淘宝轮播图效果。分享给大家供大家参考，具体如下：

轮播图是我们学习原生射流研究…的必经之路

它包含很多基本知识的运用，像这的使用唐的操作，还有setInterval的使用和清除，浮动与定位等等，很好的考察了我们的基础知识牢不牢固，

话不多说，直接上图

超文本标记语言代码如下：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 '标题淘宝轮播图/title link rel='样式表href=' CSS/initialize。CSS ' rel='外部无跟随'/link rel='样式表href=' CSS/tblunbotu。CSS ' rel=' external no follow '/headdydiv id=' container ' class=' ClearFix ' div id=' list ' class=' ClearFix ' style=' left :-520 px ' img src=' http 3360 img/5。jpg ' alt=' '/img srcrel='外部无跟随' rel='外部无跟随' id=' prev ' class=' arrow '/a a href=' JavaScript :'rel=' external no follow ' rel=' external no follow ' id=' next ' class=' arrow '/a/div脚本类型=' text/JavaScript ' src=' http : js/tblunbotu。js '/脚本/正文/HTMlCSS样式如下：

/* 第一步：设置外部框的样式第二步： 设置图片框的样式第三步： 设置箭头的样式第四步： 设置小圆点的样式*/#集装箱{ margin: 50px auto相对位置：宽度： 520像素；高度： 280像素；飞越：隐藏；} # list { position : absolutez-index : 1；宽度： 3640 px} #列表img {左侧浮动：宽度： 520像素；高度： 280像素；} #按钮{ height: 10px宽度： 100像素；绝对位置：左： 0；/*设置水平垂直居中*/右： 0；/*设置水平垂直居中*/margin : 0 auto；/*设置水平垂直居中*/底部： 20pxz-index : 2；} #按钮跨度{左侧浮动：右边距： 5px宽度： 10px高： 10pxborder: 1px固体# cccccc边界半径： 50%;背景技术： # 333;光标：指针；} #按钮。在{ background: orangered }。箭头{ width: 40px高度： 40px显示器：无；绝对位置：top : 0；/*设置水平垂直居中*/底部： 0；/*设置水平垂直居中*/margin : auto 0；/*设置水平垂直居中*/font-size : 36px；字体粗细：粗体；线高： 39px文本对齐：中心；color: # fff背景-颜色： RGBA(0，0，0，3);光标：指针；z-index : 2；} .箭头：悬停{背景色： RGBA(0，0，0，7);} #容器：悬停.箭头{显示：块；} # prev { left : 10px } # next { right : 10px } JavaScript代码如下

/** *由zhm于17.1.15创建。*//* *知识点*这个使用* DOM事件* 定时器* * 思路： * (1)设置它左右移动* 问题：传入数字为楠？* 解决：在页面中增加属性样式：左：0 * (2)平滑移动（移动时间固定，每次移动的距离不一样) * 问题：连续点击出现晃动？-设置标志位* 出现空白页？-第一张图片前加上最后一张，最后一张图片前加上第一张* 在类目录的标签中增加属性样式：左侧：-520 px；* 设置无限滚动判断* * (3)设置小圆点* 首先将所有的类置为空，当前类置为开启*绑定小圆点和图片* 绑定小圆点和左右箭头* 设置定时器，鼠标划上去停止，移开自动轮播* * *///1.获取元素var容器=文档。getelementbyid(“容器”)；var列表=文档。getelementbyid(' list ')；var prev=文档。getelementbyid(' prev ')；var next=文档。getelementbyid(' next ')；var buttons=文档。getelementbyid(' button ').getElementsByTagName(' span ')；定义变量计时器=nullvar定时器2=nullvar标志=真；定义变量索引=0;//2.设置函数函数moveImg(dis){ var time=400；//运动的总时间var eachTime=10//每次小移动的时间var EachDis=dis/(time/EachTime)；//每次小移动的距离var新魏徵=parsent(列表。风格。左)dis//新位置标志=假函数each move(){ if(dis)0 parsent(list。风格。左)新魏徵| | dis 0 parsent(列表。风格。左)新魏徵){列表。风格。left=parsent(列表。风格。左)每个dis ' px '；} else { flag=trueclearInterval(计时器);名单。风格。左=新魏徵“px”；//无限滚动判断if(newWeizhi==0){ list。风格。left=-2600 ' px '；} if(newWeizhi==-3120){ list。风格。left=-520 ' px '；} } } timer=setInterval(eachMove，10)；} //3.设置点击切换图片next.onclick=function () { if(！标志)返回；moveImg(-520)；//绑定箭头和小圆点if(index==4){ index=0；} else { index } buttonssshow()；};prev.onclick=function () { if(！标志)返回；moveImg(520)；//绑定箭头和小圆点if(index==0){ index=4；} else { index-；} buttonssshow()；};//4.设置小圆点的绑定函数buttonsShow() { //将之前的小圆点的样式清除for(var I=0；长度；如果(按钮[1]).='on') { buttons[i].类名=打破；} }按钮[索引]。类名=' on}表示(var I=0；伊布顿长度；我)按钮.值=我；//使用自执行函数解决我的赋值问题(函数(){按钮[I]).onclick=function(){ if(this。值==索引)返回；var offset=(这个。value-index)*-520；moveImg(偏移量);index=this . valuebuttonssshow()；} })();} //5.设置自动轮播定时器2=设置间隔(下一个。onclick，1500)；集装箱。onmouseover=function(){ clearInterval(定时器2)；};集装箱。onmouseout=function(){ timer 2=setInterval(下一个。onclick，1000)；};源码下载：完整实例代码点击此处本站下载。

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。