网页模板html3d图片旋转,3D图片旋转轮播

}

oPicList.innerHTML&＃61;sHtml;

}

此时&＃xff0c;效果如下图&＃xff1a;

可以看出有一个问题&＃xff1a;

从中间分开&＃xff0c;右边的每个 li 元素中的左边黑色面都显示出来了。

原因&＃xff1a;

li 元素使用 position属性为relative&＃xff0c;后面的元素层级会比前面的高。

第二个li元素会覆盖第一个元素右侧黑边&＃xff1b; 第三个会遮住第二个的右侧黑边 ......

到中间分开了。右边的 第二个元素左侧黑边遮住了第一个元素 ......

所以黑边出来了。

解决办法&＃xff1a;

以中间为分界点。左边的层级越来越高。右边的li元素层级越来越低。

这样&＃xff0c;右侧的每个 li 元素的黑边因为层级比前一个元素弱所以被前一个元素遮住了。

所以通过js设置样式&＃xff0c;给style标签设置 id 值&＃xff0c;并定义一个ostyle 变量&＃xff0c;通过它来设置style样式。

var oCss &＃61; document.getElementById("css");

var oStyle &＃61; "";

var index &＃61; 0;

for(var i&＃61;0; i

i>iLength/2?index--:index&＃43;&＃43;;

oStyle &＃43;&＃61; "#picList li:nth-of-type(" &＃43;(i&＃43;1)&＃43; "){ z-index: " &＃43;index&＃43; "}";

oStyle &＃43;&＃61; "#picList li:nth-of-type(" &＃43;(i&＃43;1)&＃43; ") a{ background-position: -" &＃43;i*iLiW &＃43; "px 0px; }";

sHtml &＃43;&＃61; &＃39;

}

oPicList.innerHTML&＃61;sHtml;

oCss.innerHTML &＃43;&＃61; oStyle;

此时&＃xff0c;效果如图&＃xff1a;

我们旋转45度看一下效果&＃xff1a;

正常&＃xff0c;接下去设置下按钮。

html模板改进&＃xff1a;

css:

#btns{ padding: 50px; height: 30px; }

#btns li{ height: 30px; width: 30px; background-color: #000; color: #fff; font-size:16px; font-weight: bold; line-height: 30px; text-align:center; margin: 0 10px; border-radius: 50%; float: left; list-style: none; cursor: pointer;}

#btns .active{ background-color: #f60; }

效果如下&＃xff1a;

分析&＃xff1a;

获取每个 li 元素

点击1&＃xff0c;其实是旋转-90度&＃xff1b;点击2&＃xff0c;旋转-180度&＃xff1b;点击3&＃xff0c;旋转-270度&＃xff1b;点击4&＃xff0c;旋转-360度。

js代码&＃xff1a;

3D图片旋转轮播效果结束

不积跬步无以至千里