jquery 3D视图切换

网上有很轮播插件，比较有名有swiper，功能多、使用简单、可以在pc端和移动端使用。在这里我们就不介绍swiper，主要分享3D视图切换的思维，和普通轮播图还是有点差距的。在布局上不同，功能却是一样。如图：

把li的类名写成一组数组形式， var arr = ['1', '2', '3', '4', '5']。点击点一页做切换后的arr = ['2','3','4','5','1']，那如何做才能把把arr数组做成切换后的数组了？首先把数组的第一位arr[0]添加进arr（arr.push(arr[0]) , ['1', '2', '3', '4', '5', '1'] )，然后删除arr中的第一位（arr.pop() [ '2', '3', '4', '5', '1']。对图片进行遍历，删除类名增加arr[i]，$(el).removeClass().addClass(arr[i])。点击上一页切换胡arr = ['5','1','2','3','4']?? 首先把数组中的最后一位添加arr的第一位（ arr.unshift(arr[banLen-1]) ['5','1','2','3','4','5'])，然后删除arr中的最后一位 ( arr.pop() ['5','4','3','2','1'] )

           function next(){
            	arr.push(arr[0]);
            	arr.shift();
            	banLi.each(function(i, el) {
            		$(el).removeClass().addClass(arr[i]);
            	});
            	index++;
            	if (index > banLen -1) {
            		index = 0
            	}
            	show()
            }

            function prev(){
                arr.unshift(arr[banLen-1])
                arr.pop();
                banLi.each(function(i, el) {
                	$(el).removeClass().addClass(arr[i])
                });
                index--;
                if (index < 0) {
                	index = banLen - 1;
                }
                show();
            }

点击圆点，一种是往前点击，另外一中情况是往后点击。当后点击的myindex > 圆点绿色位置 index，假如index为1，点击3 最终要显示数组为['3','4','5','1','2']，var newarr = arr.splice(0, 3-1); arr = $.merge(arr,newarr); 当前点击myindex < 圆点绿色位置index,假如index为3，点击1，最先数组显示为['1','2','3','4','5'], arr.reverse(); var oldarr = arr.splice(0, 3-1); arr = $.merge(arr,oldarr); arr.reverse();

项目地址：https://github.com/ZiSeFeng/lottery-demo

写的不好，勿喷。

猜你喜欢