期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

swiper消息无缝展示效果

做前端为了省时间,这次swiper做消息无缝效果也是挺简单省时间实用的

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>  <!--写移动端要用meta开头-->      		<link rel="stylesheet" type="text/css" href="../uu/swiper-4.4.1.min.css"/>      		<style type="text/css">      			*{      				padding: 0;      				margin: 0;      			}      			.swiper-container {      			width: 100%;      			height: ;      			border: 1px solid darkcyan;      			box-shadow: 0 0 10px 0px rgba(0,0,0,0.5);      			}      			.swiper-container .swiper-wrapper .swiper-slide{      				line-height: 3em;      				width: auto;      				padding: 0 10px;      			}      			.swiper-container2{      				width: 100%;      				position: relative;      			}      			/*.swiper-container2 .swiper-wrapper .swiper-slide img{      				display: block;      				margin: 26vh auto;      			}*/      			.swiper-container3{      				width: 100%;      				height: 12vh;      				outline: 1px solid darkcyan;      				/*position: relative;*/      				overflow: hidden;      				margin: 5vh auto;      			}      			.swiper-container3 .swiper-wrapper .swiper-slide{      				line-height: 6vh;      				/*text-align: center;*/      				text-indent: 6vw;      				white-space: nowrap;      				overflow: hidden;      				text-overflow: ellipsis;      			}      		</style>      	</head>      	<body>      		<!--导航条-->      		<div class="swiper-container">      <div class="swiper-wrapper">      <div class="swiper-slide">国内</div>      <div class="swiper-slide">国际</div>      <div class="swiper-slide">体育</div>      <div class="swiper-slide">娱乐</div>      <div class="swiper-slide">军事</div>      <div class="swiper-slide">科技</div>      </div>        </div>      <!--导航条结束-->      <!--轮播图开始-->      <div class="swiper-container2">      <div class="swiper-wrapper">      <div class="swiper-slide"><img src="https://www.qiquanji.com/mip/data/img/dmj/201903091552104468802947.jpg"/></div>      <div class="swiper-slide"><img src="https://www.qiquanji.com/mip/data/img/dmj/201903091552104468200894.jpg"/></div>      <div class="swiper-slide"><img src="https://www.qiquanji.com/mip/data/img/dmj/201903091552104468210239.jpg"/></div>      </div>        <!-- 如果需要分页器 -->      <div class="swiper-pagination"></div>      <!-- 如果需要导航按钮 -->      <div class="swiper-button-prev"></div>      <div class="swiper-button-next"></div>      </div>      <!--轮播图结束-->        <!--消息无缝效果-->      <div class="swiper-container3">      <div class="swiper-wrapper">      <div class="swiper-slide">抢断远射一气呵成!王霜斩获欧冠生涯首球</div>      <div class="swiper-slide">女富豪榜12年大换血八成女富豪消失,新晋前10仅2人白手起家</div>      <div class="swiper-slide">特朗普力撑沙特受质疑 美媒:他的忠诚给了谁?</div>      <div class="swiper-slide">赵丽颖冯绍峰领证现场照曝光,同戴黑色棒球帽甜蜜搂肩恩爱十足</div>      <div class="swiper-slide">56岁的关之琳参加活动被嫌弃,膝盖惨不忍睹</div>      <div class="swiper-slide">惨淡的挖矿市场:不卖很快成废铁?二手矿机每台仅值一二百</div>      </div>        </div>      <!--消息无缝效果结束-->      		<script src="../uu/swiper-4.4.1.min.js" type="text/javascript"></script>      		<script>          //			导航条      var mySwiper = new Swiper ('.swiper-container', {      	slidesPerView : 'auto', //显示数量,auto 自动      direction: 'horizontal', // 垂直切换选项      //  loop: true, // 无缝循环模式选项      })      //导航条结束      //轮播图开始      var mySwiper2 = new Swiper ('.swiper-container2', {      	slidesPerView : 'auto', //显示数量,auto 自动      direction: 'horizontal', // 垂直切换选项      loop: true, // 无缝循环模式选项      // 如果需要分页器      pagination: {      el: '.swiper-pagination',      },      // 如果需要前进后退按钮      navigation: {      nextEl: '.swiper-button-next',      prevEl: '.swiper-button-prev',      },      autoplay: {      delay: 1000,//1秒切换一次      },      })      // 轮播图结束      //消息无缝效果      var mySwiper3 = new Swiper ('.swiper-container3', {      direction: 'vertical', // 垂直切换选项      loop: true, // 循环模式选项      autoplay: {      delay: 3000,      stopOnLastSlide: false,      disableOnInteraction: true,      },      slidesPerView : 2, // 网格分布:两个      slidesPerGroup : 2, //2个一组,每次划动两个      })      //消息无缝效果结束      </script>      	</body>      </html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册