轮播图片

来源：互联网发布：linux如何安装bind 编辑：程序博客网时间：2024/05/17 03:45
<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1, maxium-scale=1,user-scalable=no">    <title>bootstrap</title>    <!-- 新 Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">    <style>        body{            padding:3%;        }        .wrap{            position:relative;            text-align:center;            width:300px;            height:600px;            overflow:hidden;            border:1px solid seagreen;        }        .wrap div{            position:absolute;            width:300px;            height:300px;            border:1px solid salmon;            display:none;            transition:transform .4s ease;        }        .box1{            background:darkorange;        }        .box2{            background:greenyellow;        }        .box3{            background:deeppink;        }        .box4{            background:cornflowerblue;        }        .slideL{            -webkit-transform:translate3d(-100%,0,0);            transform:translate3d(-100%,0,0);        }        .slideR{            -webkit-transform:translate3d(100%,0,0);            transform:translate3d(100%,0,0);        }        .wrap .active{            animation:slideRight .5s;            -webkit-transform:translate3d(0,0,0);            transform:translate3d(0,0,0);        }        .wrap .active, .wrap .slideL,.wrap .slideR{            display:block;        }    </style>    <script src="../jquery-2.2.4.js" type="text/javascript"></script>    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>    <script>        $(function(){            $(".box1").addClass("active");            function slide(direction){               var $activePage=$(".wrap div.active");                var i=$activePage.index(),q,a,b;                if(direction=="right"){                    q=i<3? i+1:0;                     a="slideL";                    b="slideR";                }else if(direction=="left"){                    q=i>0? i-1:3;                    a="slideR";                    b="slideL";                }                var $nextPage=$(".wrap div").eq(q);                if(!$nextPage) return;                $nextPage.addClass(b);                $nextPage[0].offsetWidth;                $activePage.addClass(a).removeClass("active");                $nextPage.addClass("active").removeClass(b);                $activePage.one("bsTransitionEnd",function(){                    $activePage.removeClass(a);                }).emulateTransitionEnd(400);            }            var t=setInterval(function(){                slide("left");            },1000);            $(window).click(function(){                clearInterval(t);            })        })    </script></head><body><div class="wrap">    <div class="box1">box1</div>    <div class="box2">box2</div>    <div class="box3">box3</div>    <div class="box4">box4</div></div><button> start Slide automatically</button></body></html>
0 0