jq自定义图片3D轮播

效果如下图片：

 需自定义一个jquery

命名为：jquery-2.treven

如下：

(function(){
$.fn.extend({
superSwaper:function(options){
var defaults={
speed:1000
};
$.extend(defaults,options)//继承
states =[
{ 'zIndex':1,top:80,height:180,left:0,opacity:0.7},
{ 'zIndex':2,top:50,height:270,left:50,opacity:0.8},
{ 'zIndex':3,top:20,height:330,left:150,opacity:0.9},
{ 'zIndex':4,left:280,opacity:1},
{ 'zIndex':3,top:20,height:330,right:150,opacity:0.9},
{ 'zIndex':2,top:50,height:270,right:50,opacity:0.8},
{ 'zIndex':1,top:80,height:180,right:0,opacity:0.7}
]
var $s=$(this).find("img");
//alert($s.length);//长度
begin();

function show(){
var arr=states. pop();//把最后一个属性删除掉，最后输出你删除的属性是什么
states.unshift(arr);
begin();
}
function begin(){
$s.removeAttr("style");//循环开始时删除img所有的属性
$s.each(function (i, ele) {
$(ele).css('z-index',states[i]['zIndex'])
.css('top',states[i]['top'])
.css('height',states[i]['height'])
.css('left',states[i]['left'])
.css('right',states[i]['right'])
.css('opacity',states[i]['opacity'])

});//把数组一一对应的放入图片中
}
setInterval(show,defaults.speed);
}
})
})()

 html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片3D轮播</title>
        <script src="jquery-3.3.1.js"></script>
        <script src="jquery-el.1.23.js"></script><!-- 自定义的jq包 -->
        <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        #divd{

            width:1349px;
            height:372px;
            border:0px solid red;
            background-color:rgba(61, 33, 219, 0.1);
            position: relative;
        }
        img{
            position: absolute;
            float: left;
        }
        </style>
    </head>
    <body>
         <div id="divd">
            <img src="image/p1.png">
            <img src="image/p2.png">
            <img src="image/p3.png">
            <img src="image/p4.png">
            <img src="image/p9.png">
            <img src="image/p6.png">
            <img src="image/p8.png">
         </div> 
         <script type="text/javascript">
              $(function(){
                $("#divd").superSwaper({'speed':2000});//调用图片轮播f
            });
         </script>
    </body>
</html>

 

 

posted on 2018-07-03 20:29  ikikkuku  阅读(203)  评论(0)    收藏  举报

导航