1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="asserts/bootstrap/css/bootstrap.min.css" />
<style>
img{
width: 100%;
}
</style>
</head>
<body>
<!--轮播插件-->
<div class="carousel slide" id="myCarousel">
<!--轮播指示器(小圆点)-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!--被轮播的组件：图片，层等-->
<div class="carousel-inner">
<div class="item active">
<img src="img/p1.jpg" alt="" />
<!--轮播标题组件-->
<!--<div class="carousel-caption">
<div class="jumbotron pull-left" style="background: transparent;">
<div>
<h1>一出好戏</h1>
<p>一出好戏上映了，票房要哭了</p>
</div>
</div>
</div>-->
</div>
<div class="item">
<img src="img/p2.jpg" alt="" />
</div>
<div class="item">
<img src="img/p3.jpg" alt="" />
</div>
<div class="item">
<img src="img/p4.jpg" alt="" />
</div>
</div>
<!--切换轮播图的控制器-->
<a href="#myCarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#myCarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script src="asserts/bootstrap/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#myCarousel').carousel({
interval:2000
})
})
</script>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<style>
.back-btn{
position:fixed;
right:50px;
bottom:50px;
width:80px;
height:80px;
text-align:center;
line-height:80px;
color:#fff;
background: rgba(73,138,244,0.8);
border-radius: 5px;
display: none;
cursor: pointer;
/* 过渡效果*/
transition:all .5s;
}
.back-btn:hover{
background: rgba(73,138,244,1.0);
}
</style>
</head>
<body>
<div class="back-btn">
回到顶部
</div>
<p>00000001</p>
<p>00000002</p>
<p>00000003</p>
<p>00000004</p>
<p>00000005</p>
<p>00000006</p>
<p>00000007</p>
<p>00000008</p>
<p>00000009</p>
<p>000000010</p>
<p>000000011</p>
<p>000000012</p>
<p>000000013</p>
<p>000000014</p>
<p>000000015</p>
<p>000000016</p>
<p>000000017</p>
<p>000000018</p>
<p>000000019</p>
<p>000000020</p>
<p>000000021</p>
<p>000000022</p>
<p>000000023</p>
<p>000000024</p>
<p>000000025</p>
<p>000000026</p>
<p>000000027</p>
<p>000000028</p>
<p>000000029</p>
<p>000000030</p>
<p>000000031</p>
<p>000000032</p>
<p>000000033</p>
<p>000000034</p>
<p>000000035</p>
<p>000000036</p>
<p>000000037</p>
<p>000000038</p>
<p>000000039</p>
<p>000000040</p>
<p>000000041</p>
<p>000000042</p>
<p>000000043</p>
<p>000000044</p>
<p>000000045</p>
<p>000000046</p>
<p>000000047</p>
<p>000000048</p>
<p>000000049</p>
<p>000000050</p>
<p>000000051</p>
<p>000000052</p>
<p>000000053</p>
<p>000000054</p>
<p>000000055</p>
<p>000000056</p>
<p>000000057</p>
<p>000000058</p>
<p>000000059</p>
<p>000000060</p>
<p>000000061</p>
<p>000000062</p>
<p>000000063</p>
<p>000000064</p>
<p>000000065</p>
<p>000000066</p>
<p>000000067</p>
<p>000000068</p>
<p>000000069</p>
<p>000000070</p>
<p>000000071</p>
<p>000000072</p>
<p>000000073</p>
<p>000000074</p>
<p>000000075</p>
<p>000000076</p>
<p>000000077</p>
<p>000000078</p>
<p>000000079</p>
<p>000000080</p>
<p>000000081</p>
<p>000000082</p>
<p>000000083</p>
<p>000000084</p>
<p>000000085</p>
<p>000000086</p>
<p>000000087</p>
<p>000000088</p>
<p>000000089</p>
<p>000000090</p>
<p>000000091</p>
<p>000000092</p>
<p>000000093</p>
<p>000000094</p>
<p>000000095</p>
<p>000000096</p>
<p>000000097</p>
<p>000000098</p>
<p>000000099</p>
<p>0000000100</p>
<script>
$(function(){
$(window).scroll(function(){
if($(this).scrollTop()>100){
// $('.back-btn').show();
$('.back-btn').fadeIn();
}else{
// $('.back-btn').hide();
$('.back-btn').fadeOut();
}
});
$('.back-btn').on('click',function(){
//通过改变元素的高度,对元素应用动画
$('html,body').animate({
scrollTop:0
},300);
})
})
</script>
</body>
</html>
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.main{
position: relative;
height:300px;
width:925px;
margin:auto;
overflow: hidden;
border: 5px solid ;
top: 160px;
}
.main ul{
position: absolute;
width:1920px;
height:300px;
}
.main ul li{
width:200px;
height:290px;
float:left;
border:5px solid #FFAA25;
margin-left:30px;
}
.main ul li:first-child{
margin-left:0;
}
.main ul li img{
width:200px;
height:290px;
}
</style>
</head>
<body>
<div class="main">
<ul class="uls">
<li><img src="img/p2.jpg" alt="" /></li>
<li><img src="img/p3.jpg" alt="" /></li>
<li><img src="img/p4.jpg" alt="" /></li>
<li><img src="img/p6.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
<script>
var speed=-3;//正数向右移,负数向座移
var Oul=document.getElementsByClassName('uls')[0];
Oul.innerHTML+=Oul.innerHTML;
//alert(oDiv1.offsetWidth);
function Speeds(){
if(speed<0){
// offsetleft是相对于父对象的左边距 offsetWidth是对象的可见宽度包括滚动条等边线,会随窗口大小改变
if(Oul.offsetLeft<-Oul.offsetWidth/2){
Oul.style.left='0';
}
}
if(speed>0){
if(Oul.offsetLeft>0){
Oul.style.left=-Oul.offsetWidth/2+'px';
}
}
var le=Oul.offsetLeft+speed;
Oul.style.left=le+'px';
}
setInterval(Speeds,30);
</script>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
