-
两。布局分析
主箱分为两个小盒子（1和2）。
包含图片的框占用图片的两个（3）宽度，并在上框中。当前图片位于上框（1）中，而其他图片等待在框的右侧（3）。
下面的方框（2）包括六个正方形和在主箱中放置两个箭头。
三，HTML部分
王益区
四，CSS部分
{ *
保证金：0；
填充：0；
}
{。w-slider
宽度：310px；
身高：265px；
保证金：100px汽车；
溢出：隐藏；
职位：相对；
}
{。滑块
宽度：310px；
身高：220px；
}
{滑块主
宽度：620px；
身高：220px；
}
滑块主要img {。
宽度：310px；
身高：220px；
位置：绝对；
顶部：0；
左：0；
}
滑块主要IMG {。
垂直对齐：顶部；
}
{滑块Ctrl
宽度：310px；
身高：45px；
文本对齐：中心；
}
滑块
光标：指针；
}
{滑块控件
显示：内联块；
宽度：24px；
身高：20px；
右边距：8px；
文本缩进：- 20em；
溢出：隐藏；
背景：URL（。 /图像/图标png）- 24px - 782px不重复；
}
slider-ctrl.current {。
背景：URL（。 /图像/图标png）- 24px - 762px不重复；
}
滑块预控，
{下一步
宽度：27px；
身高：38px；
位置：绝对；
顶部：50%；
边距：- 36px；
不透明性：0.7；
滤镜：alpha（不透明度= 50）；
}
{滑块
背景：URL（。 /图像/图标png）6px 1px不重复；
左：0；
}
{下一步
背景：URL（。 /图像/图标png）- 9px - 44px不重复；
权利：0；
}
五、JS
*由15623544233在2016 10 / 17上创建。
* /
窗口。指针函数（）{
/ / IMGS DOM对象
无功slider_main_block = $（slider_main_block ）；
无功sliderimgs = slider_main_block.children；
外箱滑块
无功sider_box = slider_main_block.parentnode.parentnode；
控件的DOM对象
无功slider_ctrl = $（slider_ctrl ）；
无功sliderctrls = slider_ctrl.children；
动态控件添加
对于（var i = 0；i < sliderimgs.length；i++）{
VaR跨度= document.createelement（跨）；
跨越方法=滑块Ctrl CON；
中的数字是当前索引，它在以后有重要的作用。
spans.innerhtml = sliderimgs.length-i；
slider_ctrl.insertbefore（跨度，sliderctrls { 1 }）；
}
sliderctrls { 1 }。setAttribute（班
/ / imgw -图片宽度
无功imgw = sliderimgs { 0 }。clientwidth；
好吧，除了映射第一个地图。
对于（var i = 1；i < sliderimgs.length；i++）{
我sliderimgs { }。风格。左= imgw +PX；
}
/ /生命体征，电流Id的盒子
无功电流Id = 0；
对于（在sliderctrls VAR键）{
sliderctrls {key}。onclick =函数（）{
单击左箭头/动作动画
如果（这方法= =滑块Ctrl预）{
和左移动参数代替
动画（sliderimgs {电流Id }，{左：imgw }）；
——电流Id < 0currentid = sliderimgs length-1：电流Id；
sliderimgs {电流Id }。风格。左= - imgw +PX；
动画（sliderimgs {电流Id }，{ left: 0 }）；
动作动画右箭头，与自动旋转木马的动画相一致
} else if（这类名= =。滑块Ctrl下）{
自动播放（）；
其他{ }
点击图片获取当前 / /索引号
var = this.innerhtml-1；
如果（>电流Id）{
单击右键，如播放
动画（sliderimgs {电流Id }，{ left: - imgw }）；
sliderimgs {，}。风格。左= imgw +PX；
} else if（，<电流Id）{
动画（sliderimgs {电流Id }，{左：imgw }）；
sliderimgs {，}。风格。左= - imgw +PX；
}
*当点击按钮时，当前的电流Id移动图片，点击框为当前图片，连续的图片。
电流Id =；
动画（sliderimgs {电流Id }，{ left: 0 }）；
}
flashcurrent（（（电流Id + 1））；
}；
}
滑块动画的控制功能
功能flashcurrent（指数）{
/ / console.log（指数）；
对于（var i = 1；i < sliderctrls.length-1；i++）{
我sliderctrls { }。setAttribute（班
}
sliderctrls {指数}。setAttribute（班
}
添加计时器
var定时器= null；
定时器= setInterval（自动播放，2000）；
功能自动播放（）{
动画（sliderimgs {电流Id }，{ left: - imgw }）；
第六、当张左移，6 > 5，零回箱
+ +电流Id＞sliderimgs.length-1currentid = 0：电流ID；
在图片快速向右侧移动后留下的照片
sliderimgs {电流Id }。风格。左= imgw +PX；
在右向左移动下
动画（sliderimgs {电流Id }，{ left: 0 }）；
}
sider_box.onmouseover =函数（）{
ClearInterval（定时器）；
}
sider_box。onmouseout=函数（）{
定时器= setInterval（自动播放，2000）；
}
}；
函数$（id）{
返回document.getelementbyid（ID）；
}
样式属性值获取
功能curstyle（obj，ATTR）{
如果（obj。currentstyle）{
浏览器
返回的对象。currentstyle {属性}；
其他{ }
标准浏览器
返回window.getcomputedstyle（obj，null）{属性}；
}
}
*移动框架包
/ * OBJ动画DOM对象；JSON ----转换为JSON数据部分。
动画函数（obj，JSON）{
当第一个清除计时器调用时
ClearInterval（obj。定时器）；
对象内部定时器/计时器，不是每一个调用创建一个新的定时器
obj.timer = setInterval（）{（）函数（
遍历JSON数据，每个符号都是标志遍历。
var标志=真；
/ /例如：{左：20、导线的JSON数据，最高：40，不透明度：50，Z指数：3 }
对于（JSON中的var密钥）{
框移动的当前位置为
var电流= 0；
如果（键= 不透明）{
/ / ie6,7,8不设置透明度，默认的是不确定的
电流= math.round（parseInt（curstyle（obj，键）* 100））| | 1；
/ / console.log（电流）；
其他{ }
电流= parseInt（curstyle（obj，关键））；
}
移动：（步骤/目标位置-当前位置） / 10
var步骤=（JSON - } -当前） / 10；
一步一步0math.ceil = >（步骤）：Math.floor（步）；
属性值动画
如果（键= 不透明）{
如果（不透明OBJ。风格）{
obj.style.opacity =（电流+步） / 100；
其他{ }
/ /兼容IE6，7, 8
obj.style.filter =Alpha（透明度=+（电流+步）* 10 + ）；
}
} else if（关键= =在）{
obj。风格{key} = JSON {key}；
}其他
{
obj。风格{key} =电流+ +PX；
}
所有标志遍历每个判决/属性。
如果（当前！= { } }）{
标志=假；
}
}在遍历之后，标志都是正确的，判断所有动画的执行和清除计时器。
如果（标志）{
ClearInterval（obj。定时器）；
}
}，20）
}
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。