纯CSS实现背景图片自动轮播效果 + CSS+JS实现
直接上代码:
<!DOCTYPE html>
<html lang="zh-hans-cn"><head>
<meta charset="UTF-8">
<meta name="Author" content="Rin">
<title>无缝滚动</title>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
body{
background-color: #F7F5F5;
}
.one{margin:50px auto;height:160px;width:1000px;overflow:hidden;position:relative; }
.two{margin:50px auto;height:90px; width:1000px;overflow:hidden;position:relative; }
.one ul{height:160px;width:100000px;position:absolute;left:0;} /*ul width的宽不能过小*/
.two ul{height:90px; width:100000px;position:absolute;left:0;} /*ul width的宽不能过小*/
.one ul li{display:block;float:left;margin:5px;height:150px;border-radius:5px;position:relative;}
.two ul li{display:block;float:left;margin:5px;height:80px; border-radius:5px;position:relative;}
.one ul li a{display:inline-block;height:150px;}
.two ul li a{display:inline-block;height:80px ;}
.one ul li img{ border-radius:5px;display:block;}
.two ul li img{height:80px;border-radius:5px;display:block;}
.one ul li a span{height:0;display:block;background:rgba(0,0,0,0.4);position:absolute;bottom:0;color:#fff;font-size:0px;}
.two ul li a span{height:0;display:block;background:rgba(0,0,0,0.4);position:absolute;bottom:0;color:#fff;font-size:0px;}
.one ul li a:hover span{height:150px;line-height:150px;font-size:20px;text-align:center;transition:all 0.7s;}
.two ul li a:hover span{height:80px; line-height:80px; font-size:20px;text-align:center;transition:all 0.7s;}
</style>
<!-- 百度纯CSS一张图片滚动效果实现 -->
<style>
#pad {
margin: 19px auto 0;
background: url(http://list.video.baidu.com/pc_static/iph_promote/static/img/pad1920_2.png) center center no-repeat;
height: 429px
}
#content {
background: url(http://list.video.baidu.com/pc_static/iph_promote/static/img/content1920.jpg) center center no-repeat;
height: 1475px
}
.info {
height: 50px;
line-height: 50px;
color: #a7a7a7
}
#logo {
background: url(http://list.video.baidu.com/pc_static/iph_promote/static/img/logo.png) no-repeat;
height: 58px;
width: 160px;
margin: 8px 0 0 20px
}
#title {
margin: 70px auto 0
}
</style>
<!-- ============================= -->
<!-- <style> -->
<!-- #bg-wrapper { -->
<!-- background: url(http://list.video.baidu.com/pc_static/iph_promote/static/img/bg.jpg) repeat-x #fff; -->
<!-- height: 100%; -->
<!-- -webkit-animation: marquee 500s both linear infinite; -->
<!-- -moz-animation: marquee 500s both linear infinite; -->
<!-- -ms-animation: marquee 500s both linear infinite; -->
<!-- -o-animation: marquee 500s both linear infinite; -->
<!-- animation: marquee 500s both linear infinite; -->
<!-- margin: 0 auto; -->
<!-- overflow: hidden -->
<!-- } -->
<!-- @-moz-keyframes marquee { -->
<!-- 0% { -->
<!-- background-position: 10000px 0 -->
<!-- } -->
<!-- 100% { -->
<!-- background-position: 0 0 -->
<!-- } -->
<!-- } -->
<!-- @-webkit-keyframes marquee { -->
<!-- 0% { -->
<!-- background-position: 10000px 0 -->
<!-- } -->
<!-- 100% { -->
<!-- background-position: 0 0 -->
<!-- } -->
<!-- } -->
<!-- @keyframes marquee { -->
<!-- 0% { -->
<!-- background-position: 10000px 0 -->
<!-- } -->
<!-- 100% { -->
<!-- background-position: 0 0 -->
<!-- } -->
<!-- } -->
<!-- </style> -->
<style>
#bg-wrapper{
background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1922202/profile/profile-80.jpg?1524022142"),url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1922202/profile/profile-80.jpg?1524022142");
background-repeat: repeat-x, no-repeat-x, repeat-x;
background-position: 0 0, 200px 0, 400px 201px;
height: 100%;
-webkit-animation: marquee 500s both linear infinite;
-moz-animation: marquee 500s both linear infinite;
-ms-animation: marquee 500s both linear infinite;
-o-animation: marquee 500s both linear infinite;
animation: marquee 500s both linear infinite;
margin: 0 auto;
overflow: hidden
}
@-moz-keyframes marquee {
0% {
background-position: 10000px 0
}
100% {
background-position: 0 0
}
}
@-webkit-keyframes marquee {
0% {
background-position: 10000px 0
}
100% {
background-position: 0 0
}
}
@keyframes marquee {
0% {
background-position: 10000px 0
}
100% {
background-position: 0 0
}
}
</style>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!--用最新的jQuery3.2.1 会好一些 -->
</head>
<body style="">
<div id="bg-wrapper">
<div id="nav" style=" height: 150px;"></div>
</div>
<div class="one">
<ul style="left: -577.5px;">
<li><a href="javascript:;"><img src="images/red_banner.png" alt=""><span style="width: 1920px;">hi~hi!我是孝文</span></a></li><!-- 神啊!请赐给大师兄一个女盆友吧!-->
<li><a href="javascript:;"><img src="images/blue_banner.png" alt=""><span style="width: 1920px;">hi~hi!我们是单身汪</span></a></li>
<li><a href="javascript:;"><img src="images/orange_banner.png" alt=""><span style="width: 0px;">hi~hi!我是小辉</span></a></li>
<li><a href="javascript:;"><img src="images/green_banner.png" alt=""><span style="width: 0px;">hi~hi!我是Rin</span></a></li>
<li><a href="javascript:;"><img src="images/red_banner.png" alt=""><span style="width: 1920px;">hi~hi!我是孝文</span></a></li><li><a href="javascript:;"><img src="images/blue_banner.png" alt=""><span style="width: 1920px;">hi~hi!我们是单身汪</span></a></li><li><a href="javascript:;"><img src="images/orange_banner.png" alt=""><span style="width: 0px;">hi~hi!我是小辉</span></a></li><li><a href="javascript:;"><img src="images/green_banner.png" alt=""><span style="width: 0px;">hi~hi!我是Rin</span></a></li></ul>
</div>
<div class="two">
<ul>
<li><a href="javascript:;"><img src="images/solution1.jpg" alt=""><span style="width: 0px;">LOGO1</span></a></li>
<li><a href="javascript:;"><img src="images/solution2.jpg" alt=""><span style="width: 0px;">LOGO2</span></a></li>
<li><a href="javascript:;"><img src="images/solution3.jpg" alt=""><span style="width: 0px;">LOGO3</span></a></li>
<li><a href="javascript:;"><img src="images/solution4.jpg" alt=""><span style="width: 0px;">LOGO4</span></a></li>
<li><a href="javascript:;"><img src="images/solution5.jpg" alt=""><span style="width: 0px;">LOGO5</span></a></li>
<li><a href="javascript:;"><img src="images/solution6.jpg" alt=""><span style="width: 0px;">LOGO6</span></a></li>
</ul>
</div>
<script>
/* 有的浏览器第一次加载不会动画 刷新当前页面一次 可以不加的*/
function reurl(){
url = location.href;
var times = url.split("?");
if(times[1] != 1){url += "?1"; self.location.replace(url);}
}
οnlοad=reurl ;
/* 有的浏览器第一次加载不会动画 刷新当前页面一次 */
$(document).ready(function () {
var box0 = $(".one"),v0 = 1.5; //这里添加滚动的对象和其速率
var box1 = $(".two"),v1 = 1;
Rin(box0,v0);
Rin(box1,v1);
function Rin($Box,v){//$Box移动的对象,v对象移动的速率
var $Box_ul = $Box.find("ul"),
$Box_li = $Box_ul.find("li"),
$Box_li_span = $Box_li.find("span"),
left = 0,
s=0,
timer;//定时器
$Box_li.each(function(index){
$($Box_li_span[index]).width($(this).width());//hover
s += $(this).outerWidth(true); //即要滚动的长度
})
window.requestAnimationFrame = window.requestAnimationFrame||function(Tmove){return setTimeout(Tmove,1000/60)};
window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout;
if( s>=$Box.width()){//如果滚动长度超出Box长度即开始滚动,没有的话就不执行滚动
$Box_li.clone(true).appendTo($Box_ul);
Tmove();
function Tmove(){
//运动是移动left 从0到-s;(个人习惯往左滚)
left -= v;
if(left <= -s){left = 0;$Box_ul.css("left",left)}else{ $Box_ul.css("left",left) }
timer = requestAnimationFrame(Tmove);
}
$Box_ul.hover(function(){cancelAnimationFrame(timer)},function(){Tmove()})
}
}
})
</script>
</body></html>
笔记:background-image可以设置多张图片地址,实现一个背景中多图效果。参考博文:https://www.haorooms.com/post/css3_bg_multi