两种方式实现图片自动轮播效果

最新推荐文章于 2024-05-28 19:26:08 发布
最新推荐文章于 2024-05-28 19:26:08 发布
阅读量3.9k 收藏 6
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40146275/article/details/80993838
版权

纯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
PeterChu_txj
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
images-marquee图片轮播
07-21
images-marquee图片轮播，比较好的图片轮播例子，可以在项目中直接使用。
Android实现图片轮播效果的两种方法
09-03
在本文中，我们将探讨两种实现Android图片轮播效果的方法。这两种方法都可以为用户带来流畅且吸引人的视觉体验。 首先，我们来看第一种实现方式：使用动画的方法。这种方法通过创建动画集（AnimationSet）和动画...
图片自动轮播
m0_62598638的博客
11-10 621
1000毫秒自动播放下一张图片 一个五张图片的轮播，可根据情况修改 JS代码 window.onlad=function(){ //获取img标签 var img=document.getElementById("img1"); //创建一个数组来保存图片 var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]; //创建一个变量，用来保存当前图片索引 var i
html轮播图
最新发布
qq_64011014的博客
05-28 1747
注意这种方法：需要把图片名称修改为数字必须是连贯的。
图片轮播 自动轮播
LTOVE
11-25 488
图片 轮播
JavaScript图片自动轮播
mqingo的博客
11-06 566
1.需求 有一组图片, 每隔3秒钟,就去切换一张,最终是一直在不停切换 2.技术分析 ​    a.切换图片 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;01切换图片&lt;/title&gt; &lt;!-- JS的开发
Android实现轮播效果的两种方法
08-31
本文将详细介绍两种在Android中实现轮播效果的方法：使用ViewPager和使用SliderLayout第三方库。 1. **使用ViewPager+ImageView实现轮播** ViewPager是Android SDK中的一个组件，它允许用户在多个视图之间滑动，...
jQuery实现的简单图片轮播效果完整示例
11-29
总结起来，这个jQuery实现的图片轮播效果实例展示了如何通过JavaScript和CSS实现动态交互的网页元素，结合HTML结构、CSS样式和jQuery事件与动画功能，为用户提供了一种优雅的图片展示方式。在实际开发中，我们可以...
iOS实现图片轮播效果
01-04
平时APP中的广告位或者滚动的新闻图片等用到的就是图片轮播这种效果，实现方式主要有两种，一种ScrollView+ImageView，另一种则是通过CollectionView，今天总结的是ScrollView这种方式。 1.图片轮播效果实现 主要...
实现图片自动轮播的几种方法
lm1374113170的博客
11-11 2767
思路：开启一个子线程，在子线程中设置当前页卡的位置并向主线程中发送消息，每隔一定的时间间隔执行一次子线程，然后用handler接收子线程发过来的 消息，并在这里刷新UI（设置当前位置的图片）。1.使用Timer实现timer = new Timer(); timer.schedule(new TimerTask() { @Override
图片文字轮播效果（图片和文字自动滚动）
10-04
轮播是类似知乎日报上的一个轮播效果，如下图。
jquery特效背景图片自动轮播效果源码下载
11-24
jquery特效背景图片自动轮播效果源码下载
jquery背景图片轮播特效.zip
07-04
jquery背景图片轮播特效是一款支持图片左右滑动，图片自动播放，带左右控制按钮。
电脑图片自动播放器
09-14
科技时代，图片素材越来越多，这是一款简单易用的图片自动播放软件，可以连续欣赏一组图片。一组图片中的每一张图片可以带有不同的背景音乐、不同的文字说明和不同的停留时间。图片与图片间的转场效果多种多样，有栅条效果、马赛克效果、扫描效果、移动效果、百叶窗效果等等，另外还有最为常用的淡入淡出效果。多个背景音乐的切入和转出有多种选择，可以随某张图片的显示而马上播放，也可以等到上一首音乐播完才播放，可以选择是否循环播放。一组图片可以有统一的文字说明，而每一张图片也可以有不同的文字说明，文字说明可以在显示图片前单独显示，也可以直接显示在图片上；文字显示也有多种特效，如淡入淡出，由小变大等等。软件主要优点：　　1、能保证原有图片或音乐文件的原汁原味。该软件在显示图片时不需对原图片文件做任何更改，播放完后也不破坏该图片文件，因而能保证原有图片的显示效果，也不改变图片文件的存放位置。而不像有些软件将图片播放转为VCD或DVD时既降低了图片的分辨率和颜色深度；又要额外生成一个庞大的VCD或DVD。　　2、操作非常简单。无论是加入图片或编辑特效都非常方便，例如在加入一组图片时软件能随机加入相应的转场特效，而无需一个个加入。
html背景轮播js代码
12-14
html页面插入的js代码，一看就懂。保证能用。页面背景轮播图。嵌在网页代码最后面就可以。
图片轮播、自动轮播、点击轮播（一）
weixin_33969116的博客
03-21 495
HTML部分 <div id="slide_two" class="slide"> <ul style="transform: translateX(-3806px); width: 600%;"> <li style="width: 16.6667%;"><img src="images/banner.png"></li> ...
借助jquery-backstretch插件实现网页背景图片自动轮播
bruce_zhao1407的博客
02-13 716
最近在做的一个项目需要用到背景图片的自动轮播效果，偶然看到了jquery-backstretch这个插件，于是分享一下学习的经验 下载地址和文档 下载地址： https://github.com/jquery-backstretch/jquery-backstretch.git，在git的地址中就有详细的文档，同时在www.npmjs.com中也有该插件的文档，地址： https://www.np...
实现图片的自动滚动
Demon_huirong的博客
06-09 1081
此案例是实现页面的自滚动，且中间有小圆圈随着连动： private void setIndicator() {   layout=(LinearLayout) findViewById(R.id.pagerIndicator);   for (int i = 0; i    View view=new View(this);    LinearLayout.LayoutPa
使用jQuery实现动态轮播图效果
在网页设计中，轮播图是一种常见的交互元素，用于展示多张图片或内容，并在有限的空间内循环播放。此资源利用jQuery库来创建轮播图，jQuery是一个轻量级的JavaScript库，简化了DOM操作、事件处理和动画效果等功能。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值