JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

JS实现旋转木马轮播案例

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JS实现旋转木马轮播案例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家分享了JS实现旋转木马轮播的具体代码，供大家参考，具体内容如下

效果：

每张图片排列的位置是以中间为对称的。图片大小，透明度不相同，但对称的图片的样式是相同的，呈现出一种立体的轮播效果。

轮播动态效果图：

先看看代码：

<!DOCTYPE htML>
<html>
<head lang="en">
    <;meta charset="UTF-8">
    <tITle>旋转木马轮播图</title>
    <link rel="stylesheet" href="css/css.css" />
</head>
<body>
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#" ><img src="images/slidepic1.jpg" alt=""/></a></li>
            <li><a href="#" ><img src="images/slidepic2.jpg" alt=""/></a></li>
            <li><a href="#" ><img src="images/slidepic3.jpg" alt=""/></a></li>
            <li><a href="#" ><img src="images/slidepic4.jpg" alt=""/></a></li>
            <li><a href="#" ><img src="images/slidepic5.jpg" alt=""/></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:void(0);" class="prev" id="arrLeft"></a>
            <a href="javascript:void(0);" class="next" id="arrRight"></a>
        </div>
    </div>
</div>
</body>
<script>
    //定义一个数组 使用绝对定位来设置五个li的位置
    VAR config = [
        {
            width: 400,
            top: 20,
            left: 50,
            opacity: 0.2,
            zIndex: 2
        },
        {
            width: 600,
            top: 70,
            left: 0,
            opacity: 0.8,
            zIndex: 3
        },
        {
            width: 800,
            top: 100,
            left: 200,
            opacity: 1,
            zIndex: 4
        },
        {
            width: 600,
            top: 70,
            left: 600,
            opacity: 0.8,
            zIndex: 3
        },
        {
            width: 400,
            top: 20,
            left: 750,
            opacity: 0.2,
            zIndex: 2
        }
    ];
    //页面加载的事件
    window.onload = function () {
        var flag = true;//假设所有的动画执行完毕了
        //图片散开
        var list = my$("slide").getelementsbytagname("li");
        function assgin() {
            for (var i=0;i<list.length;i++) {
                //设置每个li，都要把宽 层级 透明度 left top到达指定的目标位置
                aniMATE(list[i],config[i],function () {
                    flag = true;
                });
            }
        }
        assgin();
 
        //给按钮设置点击事件
        //右边按钮 图片顺时针旋转 数组的第一个元素放在最末尾
        /*
             pop() 删除最后面的元素
             push() 在末尾添加元素
             shift() 删除最前面的元素
             unshift() 将元素添加到数组的最前面
        */
        my$("arrRight").onclick = function(){
            if (flag){
                flag = false;
                config.push(config.shift());
                assgin();//重新分配
            }
        };
        //左边按钮 图片逆时针旋转 数组的最后一个元素放在开始的位置
        my$("arrLeft").onclick = function(){
            if (flag){
                flag = false;
                config.unshift(config.pop());
                assgin();//重新分配
            }
        };
 
        //鼠标进入 左右焦点的div显示
        my$("wrap").onmouseover = function () {
            animate(my$("arrow"),{"opacity":1});
        };
        //鼠标离开 左右焦点的div隐藏
        my$("wrap").onmouseout = function () {
            animate(my$("arrow"),{"opacity":0});
        };
    };
 
    //根据id获取元素
    function my$(id) {
        return document.getElementById(id);
    }
 
    //获取任意一个元素的任意一个样式属性的值
    function getAttrValue(element,attr) {
        return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0;
    }
 
    //动画
    function animate(element,json,fn) {
        clearInterval(element.timeid);
        element.timeId=setInterval(function () {
            var flag=true;//假设都达到了目标
            for(var attr in json){
                if(attr=="opacity"){//判断属性是不是opacity
                    var current= getAttrValue(element,attr)*100;
                    //每次移动多少步
                    var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改
                    var step=(target-current)/10;//(目标-当前)/10
                    step=step>0?Math.ceil(step):Math.floor(step);
                    current=current+step;
                    element.style[attr]=current/100;
                }else if(attr=="zIndex"){//判断属性是不是zIndex
                    element.style[attr]=json[attr];
                }else{//普通的属性
 
                    //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
                    var current= parseInt(getAttrValue(element,attr))||0;
                    //每次移动多少步
                    var target=json[attr];//直接赋值给一个变量,后面的代码都不用改
                    var step=(target-current)/10;//(目标-当前)/10
                    step=step>0?Math.ceil(step):Math.floor(step);
                    current=current+step;
                    element.style[attr]=current+"px";
                }
                if(current!=target){
                    flag=false;//如果没到目标结果就为false
                }
            }
            if(flag){//结果为true
                clearInterval(element.timeId);
                if(fn){//如果用户传入了回调的函数
                    fn(); //就直接的调用,
                }
            }
            console.LOG("target:"+target+"current:"+current+"step:"+step);
        },10);
    }
 
</script>
</html>

css.css样式：

@charset "UTF-8";
/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,PRe,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
 
.wrap{
    width:1200px;
    margin:100px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 0;
}
.prev,.next{
    width:76px;
    height:112px;
    position: absolute;
    top:50%;
    margin-top:-56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}
.next{
    right:0;
    background-image: url(../images/next.png);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的JS实现旋转木马轮播案例全部内容，希望文章能够帮你解决JS实现旋转木马轮播案例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程