3D輪播圖

時間 2019-12-08
標籤 3d 简体版
原文原文鏈接
輪播圖

隨着時代的發展
各類各樣的banner輪播圖
下面要介紹的是一種3D輪播圖
與以往輪播圖不一樣的是中間那塊banner凸起
下面請看效果圖與代碼javascript
1.效果圖

2.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>首頁</title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <style>
        body{background-color: #2c3e50}
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            max-width: 800px;
            margin: 0 auto;
        }
        .slide{
            width: 100%;
            min-height: 180px;
            overflow: hidden;
            position: relative;
  
        }
        .slide .img{
            overflow: hidden;
            position: absolute;
            transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
        }
        .slide .img img{
            width: calc(100% - 14px);
            height: calc(100% - 14px);
            margin: 7px;
            box-shadow: 0 0 5px #000;
        }
        .slide .img1{
            width: 40%;
            height: 40%;
            top: 30%;
            left: -50%;
            z-index: 1;
        }
        .slide .img2{
            width: 60%;
            height: 60%;
            top: 20%;
            left: -53%;
            z-index: 2;
        }
        .slide .img3{
            width: 85%;
            height: 90%;
            top: 6%;
            left: 8%;
            z-index: 3;
        }
        .slide .img4{
            width: 60%;
            height: 60%;
            top: 20%;
            left: 93%;
            z-index: 2;
        }
        .slide .img5{
            width: 40%;
            height: 40%;
            top: 30%;
            left: 110%;
            z-index: 1;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="slide" class="slide" class="index-slide" alt="star">
        <!-- 輪播圖片數量可自行增減 -->
        <a href="javascript:void(0)" class="img"><img src="image/carousel.png"/></a>
        <a href="javascript:void(0)" class="img"><img src="image/1.png"/></a>
        <a href="javascript:void(0)" class="img"><img src="image/2.png"/></a>
    </div>
</div>

<script>
var autoLb = false;          //autoLb=true爲開啓自動輪播
var autoLbtime = 1;         //autoLbtime爲輪播間隔時間（單位秒）
var touch = true;           //touch=true爲開啓觸摸滑動
var slideBt = true;         //slideBt=true爲開啓滾動按鈕


var slideNub;               //輪播圖片數量

//窗口大小改變時改變輪播圖寬高
$(window).resize(function(){
   $(".slide").height($(".slide").width()*0.56);
});


$(function(){
    $(".slide").height($(".slide").width()*0.56);
    slideNub = $(".slide .img").size();             //獲取輪播圖片數量
    for(i=0;i<slideNub;i++){
        $(".slide .img:eq("+i+")").attr("data-slide-imgId",i);
    }


    //根據輪播圖片數量設定圖片位置對應的class
    if(slideNub==1){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img3");
        }
    }
    if(slideNub==2){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img"+(i+3));
        }
    }
    if(slideNub==3){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img"+(i+2));
        }
    }
    if(slideNub>3&&slideNub<6){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img"+(i+1));
        }
    }
    if(slideNub>=6){
        for(i=0;i<slideNub;i++){
            if(i<5){
               $(".slide .img:eq("+i+")").addClass("img"+(i+1)); 
            }else{
                $(".slide .img:eq("+i+")").addClass("img5"); 
            }
        }
    }




    //自動輪播
    if(autoLb){
        setInterval(function(){
        right();
    }, autoLbtime*1000);
    }


    if(touch){
        k_touch();
    }
    slideLi();
    imgClickFy();
})


//右滑動
function right(){
    var fy = new Array();
    for(i=0;i<slideNub;i++){
        fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
    }
    for(i=0;i<slideNub;i++){
        if(i==0){
            $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]);
        }else{
           $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]); 
        }
    }
    imgClickFy();
    slideLi();
}


//左滑動
function left(){
    var fy = new Array();
    for(i=0;i<slideNub;i++){
        fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
    }
    for(i=0;i<slideNub;i++){
        if(i==(slideNub-1)){
            $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]);
        }else{
           $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]); 
        }
    }
    imgClickFy();
    slideLi();
}


//輪播圖片左右圖片點擊翻頁
function imgClickFy(){
    $(".slide .img").removeAttr("onclick");
    $(".slide .img2").attr("onclick","left()");
    $(".slide .img4").attr("onclick","right()");
}


//修改當前最中間圖片對應按鈕選中狀態
function slideLi(){
    var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
}


//輪播按鈕點擊翻頁
function tz(id){
    var tzcs = id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1);
    if(tzcs>0){
        for(i=0;i<tzcs;i++){
            setTimeout(function(){
              right();  
            },1);
        }
    }
    if(tzcs<0){
        tzcs=(-tzcs);
        for(i=0;i<tzcs;i++){
            setTimeout(function(){
              left();  
            },1);
        }
    }
    slideLi();
}


//觸摸滑動模塊
function k_touch() {
    var _start = 0, _end = 0, _content = document.getElementById("slide");
    _content.addEventListener("touchstart", touchStart, false);
    _content.addEventListener("touchmove", touchMove, false);
    _content.addEventListener("touchend", touchEnd, false);
    function touchStart(event) {
        var touch = event.targetTouches[0];
        _start = touch.pageX;
    }
    function touchMove(event) {
        var touch = event.targetTouches[0];
        _end = (_start - touch.pageX);
    }

    function touchEnd(event) {
        if (_end < -100) {
            left();
            _end=0;
        }else if(_end > 100){
            right();
            _end=0;
        }
    }
}

</script>
</body>
</html>
3.image

carousel.png
html
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。