最近一直在学习JavaScript,然后看到旋转轮播图的案例,就尝试着用js做了一个简单的轮播图,因为无法显示动态效果,所以就放个截图:
这个效果是这样的:一共有7张图片,它们会自动地向左滑动,然后左右箭头也可以控制轮播图的左滑和右滑,同时,如果鼠标停在图片上,那么轮播图会停止自动滑动,当鼠标移开时,将会继续向左轮播。
首先,我这里封装了两个函数(因为暂且还没有学jQuery,所以用了封装函数的方法来实现),第一个函数是美元函数,调用可以获取html中的元素,代码如下:
美元的函数(select) {
如果(typeof选择!='字符串'){
console.log(“传入的参数有误”);
返回null;
}
var firstChar=select.charAt (0);
开关(firstChar) {
例“#”:
返回. getelementbyid (select.substr (1));
打破;
例“。”:
如果(document.getElementsByClassName) {
返回document.getElementsByClassName (select.substr (1));
其他}{
结果var=[];
var allElemnts=document.getElementsByTagName (“*”);
console.log (allElemnts);
(var=0;我& lt;allElemnts.length;我+ +){
var e=allElemnts[我];
var className=e.className;
var classArr=名称。分割(' ');
(var j=0;j & lt;classArr.length;j + +) {
var c=classArr [j];
如果(c==select.substr (1)) {
result.push (e);
打破;
}
}
}
返回结果;
}
打破;
默认值:
返回document.getElementsByTagName(选择);
}
}'
之前
第二个函数是一个动画函数,用json实现多条样式的动态改变,从而达到一个动画效果,代码如下:“
函数动画(元素、json、有趣){
clearInterval (element.timer);
函数getStyle(元素,styleName属性){
如果(element.currentStyle) {//ie浏览器下直接通过currentstyle来获?/返回element.currentStyle.heigh;
返回element.currentStyle [styleName属性];
其他}{
var computedStyle=window.getComputedStyle(元素,零);
返回computedStyle [styleName属性];
}
}
var isStop=false;
元素。计时器=setInterval(函数(){
isStop=true;
(var关键的json) {
var目标=json(例子);
var电流;
如果(键==安煌该鞫取?{//当动画的类型为透明度时获取的值应该是浮点类型
当前=parseFloat (getStyle(元素,关键))| | 1;
其他}{//其他情况用整数类型
当前=方法(getStyle(元素,关键))| | 0;
}
var=(目标-电流)/10步;
如果(钥匙!=安煌该鞫取?{
一步=一步比;0 & # 63;Math.ceil(步骤):Math.floor(步骤);
}
当前+=步骤;
如果(键==安煌该鞫取?{
如果(数学。abs(目标-电流)的在0.01){
isStop=false;
其他}{
当前=目标;
}
element.style。不透明度=当前+”;
其他}{
如果(Math.abs(对经常)比;Math.abs(步骤)){
isStop=false;
其他}{
当前=目标;
}
如果(键==zIndex) {
element.style。zIndex=Math.round(电流);
其他}{
元素。风格(例子)=当前+“px”;
}
}
}
如果(isStop) {
clearInterval (element.timer);
console.log(“动画完成”);
如果(typeof有趣==昂?{
有趣的();
}
}
},30);
}'
之前
接下来就要写html的部分了,因为只有几张图片,所以html的部分很简单:
& lt; body>
& lt; div类="盒子"比;
& lt; div类=澳谌荨北?
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/1.jpg "祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/2.jpg "祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/3.jpg "祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/4.jpg "类=暗鼻啊弊４? lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/5.jpg "祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/6.jpg "祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/7.jpg "祝辞& lt;/a> & lt;/li>
& lt;/ul>
& lt;/div>
& lt; div类=翱刂啤北?
javascript: & lt; a href="; " id="上一页"祝辞& lt;/a>
javascript: & lt; a href="; " id=跋乱桓觥弊４? lt;/a>
& lt;/div>
& lt;/div>
& lt;/body>
