基于jq实现3D旋转轮播/点击轮播

责编:menVScode 2017-10-30 16:43 阅读(1373)

1、css样式布局

QQ截图20171026155113

        介绍一下上图的布局思路:上图所示,容器里面有五个小容器,五个小容器一定要是绝对定位,用 top 和 left 值来逐个定位,顺序就是上图的标号从一到五(按照自己的需要修改容器个数,这里用五个图举例),当然一定要记得父级元素相对定位。


2、js的大致思路

        自动循环轮播的图片,当前图片向左滑动,下一张图片就紧接着向左滑动进入可视区域,以此类推,用全局索引实现循环来回播放,当然需要借助 animate() 方法和 css() 方法。

        大致流程如下:把上面每个盛放图片的容器的每个 css 属性逐个都放在对象里面,再把对象放在一个数组里面,json数组好了。然后就是利用原生 js 内数组对象内置函数的使用,比如:arr.push()、arr.shift()、arr.unshift()、arr.pop()。

pop()    删除并返回数组的最后一个元素
push()    向数组的末尾添加一个或更多元素,并返回新的长度。
shift()    删除并返回数组的第一个元素
unshift()    向数组的开头添加一个或更多元素,并返回新的长度。

        点击下一张按钮一次,就将第一个对象追加到数组之后;

        点击上一张按钮一次,就将最后一个对象添加到数组之前;

        这样每次点击完就会将数组重新生成,数组的每个对象数组就得重新往每个盛放图片的容器上遍历一次,利用animate()方法,就呈现出动态效果。

3、代码

html代码

<div id="loop">
	<ul>
		<li><img src="./img/001.jpg" alt=""></li>
		<li><img src="./img/002.jpg" alt=""></li>
		<li><img src="./img/003.jpg" alt=""></li>
		<li><img src="./img/004.jpg" alt=""></li>
		<li><img src="./img/005.jpg" alt=""></li>
	</ul>
	<div class="btn">
		<span id="left"> < </span>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<span id="right"> > </span>
	</div>
</div>

css代码

#loop{
    width: 1200px;
    height: 320px;
    margin: 50px auto 0;
    /*border: 1px solid red;*/
    position: relative;
}
#loop ul{
    position: relative;
}
#loop ul li{
    position: absolute;
    top:0;
    left:0;
}
#loop ul li img{
    display: block;
    width: 100%;
}
#loop .btn{
    position: absolute;
    left: 0px;
    bottom: 0px;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

js代码

var imgJson = [
	{//图片1
		'top':'73px',
	    'left':'0px',
	    'zIndex': 1,
	    'width': '300px',
	    'height': '175px',
	    'opacity': 0.4
	},
	{//图片2
		'top':'50px',
	    'left':'100px',
	    'zIndex': 2,
	    'width': '380px',
	    'height': '220px',
	    'opacity': 0.8
	},
	{//图片3--中间的大图
		'top':'15px',
	    'left':'235px',
	    'zIndex': 3,
	    'width': '500px',
	    'height': '290px',
	    'opacity': 1
	},
	{//图片4
	    'top':'50px',
	    'left':'500px',
	    'zIndex': 2,
	    'width': '380px',
	    'height': '220px',
	    'opacity': 0.8
	},
	{//图片5
		'top':'73px',
	    'left':'700px',
	    'zIndex': 1,
	    'width': '300px',
	    'height': '175px',
	    'opacity': 0.4
	}
];
var onOff = true;
//封装一个函数,将imgJson每个数据通过遍历加在每个'li'容器上
function addCss(){
    for(var i in imgJson){
        $('#loop ul li').eq(i).css({zIndex:imgJson[i].zIndex});
        $('#loop ul li').eq(i).animate({
            top:imgJson[i].top,
            left:imgJson[i].left,
            width:imgJson[i].width,
            height:imgJson[i].height,
            opacity:imgJson[i].opacity
        },'slow',function(){
            onOff=true;
        });
    }                
}

//初始化
addCss();

//左按钮
$('#left').click(function(){
	if(onOff==true){
    	onOff=false;
    	//shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined
    	imgJson.push(imgJson.shift());//删除原数组第一项,并添加到数组的最后
    	//重新遍历,给li添加设置好的css格式
        addCss();
    }
});

//右按钮
$('#right').click(function(){
	if(onOff==true){
    	onOff=false;
    	//unshift:将参数添加到原数组开头,
    	//pop:删除数组的最后一项
    	imgJson.unshift(imgJson.pop());
    	addCss();
	}
});

效果展示:

GIF

demo下载:

基于jq实现3D旋转轮播/点击轮播 demo 下载:http://pan.baidu.com/s/1kVrFlTd     密码:7wh5

标签: 轮播
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码