3D图片切换

末蓝、 2022-06-16 05:48 384阅读 0赞

在网页中图片轮换效果有很多，今天分享下这个3d效果的图片轮换；  
先给出效果图：  
![这里写图片描述][SouthEast]  
HTML代码：

<div class="box"> <div class="list"> <ul> <li class="p7"><a href="#"><img src="img/1.png" alt="" /></a></li> <li class="p6"><a href="#"><img src="img/2.png" alt="" /></a></li> <li class="p5"><a href="#"><img src="img/3.png" alt="" /></a></li> <li class="p4"><a href="#"><img src="img/44.jpg" alt="" /></a></li> <li class="p3"><a href="#"><img src="img/55.jpg" alt="" /></a></li> <li class="p2"><a href="#"><img src="img/66.jpg" alt="" /></a></li> <li class="p1"><a href="#"><img src="img/77.jpg" alt="" /></a></li> </ul> </div> <a href="javascript:;" class="prev btn"><</a> <a href="javascript:;" class="next btn">></a> <div class="buttons"> <a href="javascript:;"><span class="blue"></span></a> <a href="javascript:;"><span></span></a> <a href="javascript:;"><span></span></a> <a href="javascript:;"><span></span></a> <a href="javascript:;"><span></span></a> <a href="javascript:;"><span></span></a> <a href="javascript:;"><span></span></a> </div> </div>

CSS代码：

*{ margin: 0; padding: 0; }
    
    
    .box{ margin-top: 300px; width: 100%; height: 340px; position: relative; }
    
    .list{ width: 1200px; height: 300px; overflow: hidden; position: absolute; left: 50%; margin-left: -600px; }
    
    .btn{ position: absolute; top: 50%; margin-top: -50px; width: 60px; height: 100px; line-height: 100px; font-size: 30px; color: white; text-decoration: none; text-align: center; background: rgba(0,255,0,.5); cursor: pointer; }
    .next{ right: 0; }
    
    li{ position: absolute; top: 0; left: 0; list-style: none; opacity: 0; transition: all 0.3s ease-out; }
    img{ width: 751px; height: 300px; border:none; float: left; }
    .p1{ transform:translate3d(-224px,0,0) scale(0.81); }
    .p2{ transform:translate3d(0px,0,0) scale(0.81); transform-origin:0 50%; opacity: 0.8; z-index: 2; }
    .p3{ transform:translate3d(224px,0,0) scale(1); z-index: 3; opacity: 1; }
    .p4{ transform:translate3d(449px,0,0) scale(0.81); transform-origin:100% 50%; opacity: 0.8; z-index: 2; }
    .p5{ transform:translate3d(672px,0,0) scale(0.81); }
    .p6{ transform:translate3d(896px,0,0) scale(0.81); }
    .p7{ transform:translate3d(1120px,0,0) scale(0.81); }
    
    .buttons{ position: absolute; width: 1200px; height: 30px; bottom: 0; left: 50%; margin-left: -600px; text-align: center; padding-top: 10px; }
    .buttons a{ display: inline-block; width: 35px; height: 5px; padding-top: 4px; cursor: pointer; }
    span{ display: block; width: 35px; height: 1px; background: red; }
    .blue{ background: blue; }

JS代码：

var $a=$(".buttons a");
    var $s=$(".buttons span");
    var cArr=["p7","p6","p5","p4","p3","p2","p1"];
    var index=0;
    $(".next").click(
        function(){ 
        nextimg();
        }
    )
    $(".prev").click(
        function(){ 
        previmg();
        }
    )
    //上一张
    function previmg(){ 
        cArr.unshift(cArr[6]);
        cArr.pop();
        //i是元素的索引，从0开始
        //e为当前处理的元素
        //each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
        $("li").each(function(i,e){ 
            $(e).removeClass().addClass(cArr[i]);
        })
        index--;
        if (index<0) {
            index=6;
        }
        show();
    }
    
    //下一张
    function nextimg(){ 
        cArr.push(cArr[0]);
        cArr.shift();
        $("li").each(function(i,e){ 
            $(e).removeClass().addClass(cArr[i]);
        })
        index++;
        if (index>6) {
            index=0;
        }
        show();
    }
    
    //通过底下按钮点击切换
    $a.each(function(){ 
        $(this).click(function(){ 
            var myindex=$(this).index();
            var b=myindex-index;
            if(b==0){
                return;
            }
            else if(b>0) {
                /* * splice(0,b)的意思是从索引0开始,取出数量为b的数组 * 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0 * 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组 * 这时候原本的数组也将这部分数组进行移除了 * 再把移除的数组添加的原本的数组的后面 */
                var newarr=cArr.splice(0,b);
                cArr=$.merge(cArr,newarr);
                $("li").each(function(i,e){ 
                $(e).removeClass().addClass(cArr[i]);
                })
                index=myindex;
                show();
            }
            else if(b<0){
                /* * 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下 * 而b现在是负值,所以取出索引0到-b即为需要取出的数组 * 也就是从原本的照片到需要点击的照片的数组 * 然后将原本的数组跟取出的数组进行拼接 * 再次倒序,使原本的倒序变为正序 */
                cArr.reverse();
                var oldarr=cArr.splice(0,-b)
                cArr=$.merge(cArr,oldarr);
                cArr.reverse();
                $("li").each(function(i,e){ 
                $(e).removeClass().addClass(cArr[i]);
                })
                index=myindex;
                show();
            }
        })
    })
    
    //改变底下按钮的背景色
    function show(){ 
            $($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
    }
    
    //点击class为p2的元素触发上一张照片的函数
    $(document).on("click",".p2",function(){ 
        previmg();
        return false;//返回一个false值，让a标签不跳转
    });
    
    //点击class为p4的元素触发下一张照片的函数
    $(document).on("click",".p4",function(){ 
        nextimg();
        return false;
    });
    
    // 鼠标移入box时清除定时器
    $(".box").mouseover(function(){ 
        clearInterval(timer);
    })
    
    // 鼠标移出box时开始定时器
    $(".box").mouseleave(function(){ 
        timer=setInterval(nextimg,4000);
    })
    
    // 进入页面自动开始定时器
    timer=setInterval(nextimg,4000);

[SouthEast]: /images/20220616/0706356fa6e446248263f07c31eb7bea.png

发表评论取消回复

表情：

评论列表（有 0 条评论，384人围观）

还没有评论，来说两句吧...

相关阅读

相关 033：cesium自定义切换2D，3D，哥伦布模式

![在这里插入图片描述][8e6fb03228114687897d406ccc58f3ed.png_pic_center] 第033个 [点击查看专栏目录][Link 1]

清疚/ 2024年03月26日 21:20/ 0 赞/ 88 阅读

相关 3.3.2-练习：图片切换效果

实现大小两个图片切换效果 <!DOCTYPE html> <html lang="en"> <head> <meta cha

待我称王封你为后i/ 2023年07月15日 09:49/ 0 赞/ 125 阅读

相关 CSS3 3D导航栏旋转切换代码

[下载地址][Link 1] CSS3 3D导航栏旋转切换代码是一款基于css3 transform属性制作的绿色导航栏鼠标悬停3D翻转切换特效。 ![e501481cc1

淩亂°似流年/ 2022年09月16日 06:14/ 0 赞/ 163 阅读

相关 197.3D图片拼接特效

效果 (源码网盘地址在最后) ![2c963b5c8ec5aa70eb02566f62b212f3.gif][] 源码 <!DOCTYPE html>

缺乏、安全感/ 2022年09月03日 12:20/ 0 赞/ 178 阅读

相关打造APP引导页3D切换特效

众所周知，一款好的APP，肯定有个很炫的APP引导页或者一个启动页，一个很炫的APP的引导页，肯定会为你的APP瞬间提高逼格，使得APP的用户体验瞬间倍增。那么接下来就给出一个

野性酷女/ 2022年08月09日 05:09/ 0 赞/ 182 阅读

相关 css3实现图片3d翻转效果

1.html部分 <body> <div class="main"> <div class="w"> <div clas

梦里梦外;/ 2022年06月17日 10:24/ 0 赞/ 305 阅读

相关图片切换

![切换效果图][SouthEast] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Love The Way You Lie/ 2022年06月16日 13:29/ 0 赞/ 184 阅读

相关 3D图片切换

在网页中图片轮换效果有很多，今天分享下这个3d效果的图片轮换；先给出效果图： ![这里写图片描述][SouthEast] HTML代码： <div cl

末蓝、/ 2022年06月16日 05:48/ 0 赞/ 385 阅读

相关 CSS3&JavaScript 图片分隔切换

![在这里插入图片描述][20181116173203280.gif] 这个切换效果在firebox上测试正常，但到了chrome上就没有切换效果了。原因可能是它们在处理t

柔情只为你懂/ 2022年04月16日 04:16/ 0 赞/ 138 阅读

相关利用CSS3实现图片3D旋转

以下是本次所作的效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

古城微笑少年丶/ 2022年04月15日 01:08/ 0 赞/ 1057 阅读