基于Java脚本语言实现轮播图原理及示例

网上有很多的例子介绍，在这里我所做的无缝滚动就是通过改变元素的左边的值让图片呈现左右滚动的效果。

我们首先看一下div css的结构样式：

div css代码

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style type=' text/CSS ' * { margin : 0；padd : 0；} ul，ol { list-style : none；} /*消除图片底部3像素距离*/img{垂直-对齐：顶部；} .滚动{宽度： 500像素高度： 200像素；余量： 100像素自动；border: 1px固体# cccpadding: 7px飞越：隐藏；相对位置：} .盒子{宽度： 500像素高度： 200像素；飞越：隐藏；相对位置：} .box ul {宽度： 600%；绝对位置：左： 0；top : 0；} .左框ul li { float:}。绝对滚动ol { position : right : 10pxbottom : 10px }。向左滚动；宽度： 20px高度： 20像素背景：粉色；文本对齐：中心；线高： 20px边界半径： 50%;背景-颜色：粉色；边距-左侧：10 px光标：指针；} .滚动李。当前{背景色：紫色；}/style/head body div id=' scroll ' class=' scroll ' div id=' box ' class=' box ' ul id=' ul ' liimg src=' http : images/1。jpg ' width=' 500 ' height=' 200 '/Li Li img src=' http : images/2。jpg ' width=' 500 ' height=' 200 '/Li liimg src=' http : images/3。jpg '展示效果如图：

接下来射流研究…代码，再此之前我们要明白，小圆点1 2 3 并不是写死的，它是根据ul li中的图片张数来决定的，所以我们要先把差异中ol li中的代码去掉。

要实现无缝滚动就需要多一张图片才行，即克隆第一张图片，放到最后面。此时钢性铸铁布局保留，div中只剩下：

body div id=' scroll ' class=' scroll ' div id=' box ' class=' box ' ul id=' ul ' liimg src=' http : images/1。jpg ' width=' 500 ' height=' 200 '/Li Li img src=' http : images/2。jpg ' width=' 500 ' height=' 200 '/Li liimg src=' http 3360 images/3。jpg ' width=' 500 '此时我们用射流研究…代码生成小圆点

var scroll=文档。getelementbyid('滚动')；//获得大盒子var ul=文档。getelementbyid(' ul ')；//获得ul.children//获得保险商实验所的盒子以此来生成开环（同开环)中里的个数var liWidth=ul.children[0].offset with//获得每个里的宽度//操作元素//因为要做无缝滚动，所以要克隆第一张，放到最后一张后面//1.克隆元素ul.appendChild(ul.children[0]).cloneNode(true))；//2.创建开环（同开环)和文件。创建元素(' ol ')；//创建开环（同开环)元素卷轴。appendchild(ol)；//把开环（同开环)放到卷起盒子里面去for(var I=0；尤利斯。长度-1；I){ var Li=文档。创建元素(“李”)；//创建里元素李。innerhtml=I 1；//给里里面添加文字1 2 3 4 5 ol。阑尾(李)；//将里元素添加到开环（同开环)里面}ol.children[0].当前//ol中的第一个里背景色为紫色此时ol li元素即小圆点创建完毕我们接着用射流研究…做动画

动画部分包括：

1.鼠标经过第几个小圆点，就要展示第几张图片，并且小圆点的颜色也发生变化2.图片自动轮播，(这需要一个定时器) 3.鼠标经过图片，图片停止自动播放（这需要清除定时器) 4.鼠标离开图片，图片继续自动轮播（重新开始定时器)这里我们封装了一个动画()动画函数

//动画函数的第一个参数代表谁移动第二个参数，移动多少//让画面匀速移动。恒速动画的原理是当前位置速度为OffsetLeft Speed Function Animate(obj，target){//首先清除定时器clearInterval(obj . timer)；//用来判断是还是——也就是向左还是向右。var speed=obj.offsetLeft target？15 : -15;obj . timer=setInterval(function(){ var result=target-obj . offsetleft；//它们的差值不会超过speed obj . style . left=obj . offsetleftspeed ' px '；//可能有小数，这里要做个判断if(数学。ABS(结果)=数学。ABS(速度)){clearinterval (obj。计时器)；obj . style . left=target ' px '；} },10);}定时器功能

var计时器=null//转盘图的计时器变量键=0；//控制播放的张数var circle=0；//控制点定时器=setinterval(自动播放，1000)；//自动轮播功能autoplay(){ /*自动轮播时，需要判断播放的张数键。如果播放的张数超过ulLis.length-1，则需要重新开始播放。既然克隆了第一张表放在后面，就应该从第二张图*/key开始播放；//if(key ullis . length-1)后的judge ul . style . left=0 {//；//快速回忆键=1；//因为第六张图片是第一张，所以从第二张开始。}//animate(ul，-key * LiwIdth)；//小圆点圆圈当显示第一张图片时，对应小圆点的颜色也会发生变化。/*同样，小点*/圆上一定有判断；if(circle ollis . length-1){ circle=0；}//点的颜色变化为(var I=0；i olLis.lengthI) {//首先清除小圆点类名olLis[i]。className=}//添加一个类名ollis [circle]。' current '到当前点；}好了，这里展示一下主代码，具体代码，点击这里下载js实现轮播效果

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