• JavaScript 轮播图(含过渡动画)


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    list-style: none;
                    margin: 0;
                    padding: 0;
                }
                #outer{
                     320px;
                    height: 300px;
                    margin: 50px auto;
                    background-color: lightpink;
                    padding: 12px 0px ;/*上右下左*/
                    overflow: hidden;/*隐藏溢出内容*/
                    position: relative;
                }
                #imgList{
                     ;/*用js来自动设置#imgList宽度*/
                    position: absolute; /*子元素相对父元素的绝对定位*/
                    left:;/*每移320px 到下一张*/
                    
                }
                #imgList li{
                    float: left;
                    padding: 0px 10px;
                }
                #navDiv{
                    position: absolute;
                    bottom: 15px;
                    left: ;/*通过js来自动设置导航居中*/
                }
                #navDiv a{
                     15px;
                    height: 15px;
                    background-color: red;
                    margin: 0 5px;
                    float: left;
                    opacity: 0.5;/*设置透明*/
                    
                }
                #navDiv a:hover{   /*设置鼠标移入效果*/
                    background-color: black;
                    
                }
            </style>
        </head>
        <body>
            <div id="outer">
                <ul id="imgList">
                    <li><img src="img/1.jpg"/></li>
                    <li><img src="img/2.jpg"/></li>
                    <li><img src="img/3.jpg"/></li>
                    <li><img src="img/4.jpg"/></li>
                    <li><img src="img/1.jpg"/></li>
                </ul>
                <!--创建图片导航按钮-->
                <div id="navDiv">
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                </div>
            </div>
        </body>
        <script type="text/javascript" >
            /*尝试构造一个可以执行简单动画的函数
             * -参数:
             *     obj:要执行动画的对象
             *     attr:要执行动画的样式,如left top width height
             *     target:执行动画的目标位置
             *     speed:移动的速度(正数右移,负数左移)
             *     callback:回调函数,这个函数会在动画执行完毕以后执行
             */
            function move(obj,attr,target,speed,callback){
                //关闭上一个定时器,防止加速
                clearInterval(obj.timer);
                //获取元素目前的位置
                var current=parseInt(getStyle(obj,attr));
                //判断速度的正负
                 //如果从0到800移动,则speed为正,800到0移动,为负
                if(current>target){
                    //此时speed为负
                    speed=-speed;
                }
                
                //-开启一个定时器,来执行动画效果
                obj.timer=setInterval(function(){
                    //获取目标原来的left值
                    var oldValue=parseInt(getStyle(obj,attr));
                    //在旧值的基础上增加
                    var newValue=oldValue+speed;
                    
                    if((speed<0&&newValue<target)||(speed>0&&newValue>target)){
                        newValue=target;
                    }
                    
                    //将新值设置给目标
                    obj.style[attr]=newValue+"px";
                    
                    if(newValue==target){
                        //到达目标值,关闭定时器
                        clearInterval(obj.timer);
                        //动画执行完毕,调用回调函数
                        callback&&callback();
                    }
                },30);
            }
            
            /*定义一个元素,来获取指定元素的当前的样式
             * -参数:
             *     obj:要获取样式的元素
             *     name:要获取的样式名
             */
            function getStyle(obj,name){
                return getComputedStyle(obj,null)[name];
            }
        </script>
        
        
        <script type="text/javascript">
            //1.自动设置#imgList宽度
            var imgList=document.getElementById("imgList");
            var imgArr=document.getElementsByTagName("li");
            //使宽度随图片自动变化
            imgList.style.width=320*imgArr.length+"px";
            
            //2.自动设置导航居中
            var navDiv=document.getElementById("navDiv");
            var outer=document.getElementById("outer");
            //设置#navDiv随图片自动变化
            navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
            
            //3.默认当前图片下的导航按钮
            var allA=document.getElementsByTagName("a");
            var index=0;
            allA[index].style.backgroundColor="black";
            
            //4.点击第x个超链接显示第x张图片
            for(i=0;i<allA.length;i++){
                //为获取点击的是第几个超连击,来添加一个num属性
                allA[i].num=i;
                //为a添加单击函数
                allA[i].onclick=function(){
                    //设置点击动画优先,点击先结束自动动画
                    clearInterval(timer);
    //                alert(this);
                //获取点击的a的索引
    //            alert(this.num);
                index=this.num;
                //切换图片
    //            imgList.style.left=-320*index+"px";
                //换成动画效果
                move(imgList,"left",-320*index,20,function(){
                    //设置点击动画优先,再又开始自动动画
                    start();
                });
                setA();
                
                }
            }
            
            
            //5.创建一个方法来设置选中的a
            function setA(){
                //判断
                if(index>=imgArr.length-1){
                    index=0;
                    imgList.style.left=0;
                }
                //设置不点击的变回红色
                for(i=0;i<allA.length;i++){
                    allA[i].style.backgroundColor="";
                }
                //选中的设置为黑色
                    allA[index].style.backgroundColor="black";
            }
            
            //6.自动切换图片
            start();
            var timer;
            function start(){
            timer= setInterval(function(){
                index++;
                //判断
                index=index % imgArr.length;//同上面的if判断 0%4=4 1%4=1 ...4%4=0
                //轮播
                move(imgList,"left",-320*index,20,function(){
                    //修改对应导航按钮
                    setA();
                });
                
            },3000)
            } 
          //动画轮播图终于完成
    </script> </html>
  • 相关阅读:
    洛谷 P1823 音乐会的等待
    [The Diary] 10.30 Monday
    洛谷 P1094 纪念品分组
    codevs 1258 关路灯
    NOIP 2012 国王游戏(60分)
    bzoj3745 [COCI2015]Norma
    CF1110E Magic Stones
    bzoj4237 稻草人
    bzoj2653 middle
    单调队列与斜率优化杂题
  • 原文地址:https://www.cnblogs.com/wangdongwei/p/11311861.html
Copyright © 2020-2023  润新知