<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" /> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> <title></title> <style> #slide { user-select: none; } #slide .item { background: url(../img/bg.jpg) 0 0 / 100% 100% no-repeat; height: 300px; } #slide h3 { transition: all 1s ease-in; transform: translateX(-100vw); } #slide p { transition: all 1s ease-in; transform: translateX(100vw); } #slide .slideIn { transform: translateX(0); } </style> </head> <body> <div class="carousel slide" id="slide"> <div class="carousel-inner"> <div class="item active"> <div class="carousel-caption"> <h3>轮播的标题1</h3> <p>文字描述</p> </div> </div> <div class="item"> <div class="carousel-caption"> <h3>轮播的标题2</h3> <p>文字描述</p> </div> </div> <div class="item"> <div class="carousel-caption"> <h3>轮播的标题3</h3> <p>文字描述</p> </div> </div> <div class="item"> <div class="carousel-caption"> <h3>轮播的标题4</h3> <p>文字描述</p> </div> </div> </div> <ol class="carousel-indicators"> <li data-target="#slide" data-slide-to="0" class="active"></li> <li data-target="#slide" data-slide-to="1"></li> <li data-target="#slide" data-slide-to="2"></li> <li data-target="#slide" data-slide-to="3"></li> </ol> <a href="#slide" class="carousel-control left" data-slide="prev"> <i class="glyphicon glyphicon-chevron-left"></i> </a> <a href="#slide" class="carousel-control right" data-slide="next"> <i class="glyphicon glyphicon-chevron-right"></i> </a> </div> <div class="btn-group"> <button class="btn btn-default" id="autoplay">播放</button> <button class="btn btn-default" id="pause">暂停</button> <button class="btn btn-default" id="prev">暂停</button> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> <script> $(function() { $("#autoplay").click(function(e) { $("#slide").carousel({ interval: 1000, pause: "", //hover keyboard: true //键盘 }); }); $("#pause").click(function(e) { $("#slide").carousel("pause"); }); $("#prev").click(function(e) { $("#slide").carousel("prev"); }); /* slide.bs.carousel 刚要切换 slid.bs.carousel 切换完成 */ $("#slide") .on("slid.bs.carousel", function() { var index = $("#slide .item.active").index(); $("#slide .item") .eq(index) .find("*") .addClass("slideIn") }) .on("slide.bs.carousel", function() { $("#slide .item") .find("*") .removeClass("slideIn") }) // 鼠标滑动切换效果 .on("mousedown", function(e) { x1 = e.pageX; }) .on("mouseup", function(e) { x2 = e.pageX; if (x2 - x1 > 80) { $("#slide").carousel('next'); } if (x2 - x1 < -80) { $("#slide").carousel('prev'); } }); //等比例缩放 = 1024 * 768 = winWidth / divHeight function setItemheight() { var winWidth = $(window).width(); var divHeight = (winWidth / 1024) * 768; $("#slide .item").height(divHeight); } setItemheight(); $(window).on('resize',function(){ debounce(setItemheight); }); //防抖 var time; function debounce(cb){ clearTimeout(time); time = setTimeout(function(){ cb(); },500) } }); </script> </body> </html>
你可以根据自己的喜好来设置进一步的改变欧！