<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
*{margin:0;padding:0}
#slide{position:absolute;height:300px;width:260px;color:#FA8E93;overflow:hidden;border:1px solid #ccc}
#slide p{height:34px;line-height:34px;overflow:hidden}
#slide span{float:right}
</style>
</head>
<body>
<div id="slide">
<div id="slide1">
<p><span>领取了烈焰双11礼包</span>1、dqx5***</p>
<p><span>领取了烈焰双11礼包</span>2、s376***</p>
<p><span>领取了烈焰双11礼包</span>3、dqx5***</p>
<p><span>领取了烈火战神双11礼包</span>4、说好〃不沋伤</p>
<p><span>领取了街机三国双11礼包</span>5、说好〃不沋伤</p>
<p><span>领取了烈焰双11礼包</span>6、gao6***</p>
<p><span>领取了烈焰双11礼包</span>1、dqx5***</p>
<p><span>领取了烈焰双11礼包</span>1、dqx5***</p>
<p><span>领取了烈焰双11礼包</span>9、lais***</p>
</div>
<div id='slide2'></div>
</div>
<script>
var speed=40
var slide=document.getElementById("slide");
var slide2=document.getElementById("slide2");
var slide1=document.getElementById("slide1");
slide2.innerHTML=slide1.innerHTML
function Marquee(){
if(slide2.offsetTop-slide.scrollTop<=0)
slide.scrollTop-=slide1.offsetHeight
else{
slide.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
slide.onmouseover=function(){clearInterval(MyMar)}
slide.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>用swiper写一个 自己引入swiper的css和Js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="swiper.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.content {
width: 350px;
height: 200px;
margin: 50px;
background: red;
}
.swiper-container {
width: 100%;
height:100%;
}
.swiper-slide {
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="content">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
<div class="swiper-slide">Slide 11</div>
<div class="swiper-slide">Slide 12</div>
<div class="swiper-slide">Slide 13</div>
<div class="swiper-slide">Slide 14</div>
<div class="swiper-slide">Slide 15</div>
<div class="swiper-slide">Slide 16</div>
<div class="swiper-slide">Slide 17</div>
<div class="swiper-slide">Slide 18</div>
<div class="swiper-slide">Slide 19</div>
<div class="swiper-slide">Slide 20</div>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container',{
slidesPerView: 'auto',
freeMode: true,
direction: 'vertical',
loop: true,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
</body>
</html>
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
