一、思路
1.利用zIndex属性调整层级,同时搭配opacity透明度属性,利用定时器以及过度属性实现淡入淡出;
2.箭头切换以及索引圈均使用与前2个案例类似的办法实现;
二、步骤
1.构建基本结构样式
2.添加淡入淡出事件,封装为一个方法,定时器调用,由于已经有了前2个案例的基础,这里直接考虑到鼠标点击箭头切换时的传参问题;
默认right,从前向后淡,left从后向前淡;利用zIndex让图片循环成为最高层/最底层,然后只需控制最高层/最底层以及相邻的层的透明度即可实现淡入淡出效果;与jS简单图片预览中讲到的切换方式思维一致;
//淡入淡出事件
function shift(way) {
for (var i = 0; i < imgg.length; i++) {
var index = imgg[i].style.zIndex;
if (way=="right") {
index++;
if (index==6) {
imgg[i].style.opacity