js实现全屏轮播图

最新推荐文章于 2021-08-28 11:46:04 发布
最新推荐文章于 2021-08-28 11:46:04 发布
阅读量3.6k 收藏 14
点赞数 1
分类专栏： 学习笔记 文章标签： 轮播图 js JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40173480/article/details/88677609
版权 
​

<!doctype html>
<html>
 <head>
	<title>Template</title>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<link rel="" href=""/>
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <style>
  *{
	margin:0;padding:0;
  }
 a{
	text-decoration:none;
  }
  li{
	list-style:none;
  }


  #banner{
	position:relative;height:537px;
  }
  #banner .banner_img{
	position:relative;width:400%;height:537px;overflow:hidden;
  }
  #banner .banner_img .banner_ul{
  position:relative;height:537px;overflow:hidden;
  }
  #banner .banner_img .banner_ul li{

	height:537px;float:left;left:100%;width:25%;
}
 #banner .banner_img .banner_ul img{
	width:100%;height:537px;
  }
  #banner .banner-span{
	position:absolute;bottom:10px;left:50%;
	
  }
  #banner .banner-span span{
  	width:10px;float:left;height:10px;border-radius:50%;border:1px solid black;	margin-right:15px;bottom:10px;left:45%;cursor:pointer;
  }
  #banner .banner-span .span_point{
	background:gray;
  }
#banner .banner_a{
	position:absolute;	top:50%; width:100%;height:40px;margin:0 10px;font-size:30px;
}
#banner .banner_a .banner_prev{
	position:absolute;left:10px;background:gray;cursor:pointer;
}
#banner .banner_a .banner_next{
	position:absolute;right:30px;background:gray;cursor:pointer;
}

  </style>

  <script>
	$(function(){
		var timer = setInterval(autoPlay,6000);
		var iNow = 0;
		var iX = $(".banner_ul li").width();
		var iL = $(".banner_ul").children();

		console.log(iL.length);
		//自动播放
		function autoPlay(){
			iNow++;
			if(iNow>=iL.length){
				$(".banner_ul").css('left',0);
				iNow = 0;
			}
			$(".banner_ul").animate({left:-iX*iNow},3000);
			$(".banner-span span").removeClass("span_point");
			$(".banner-span span").eq(iNow).addClass("span_point");
		}

		//鼠标移动事件  //清除定时器

		$(".banner").hover(function(){
			clearInterval(timer);
			$(".banner_prev").show();
			$(".banner_next").show();
		},function(){
			timer = setInterval(autoPlay,3000);
			$(".banner_prev").hide();
			$(".banner_next").hide();
		})

		
		//鼠标点击事件（左右）
		//右点击
		$(".banner_next").click(function(){
			clearInterval(timer);
			iNow++;
			if(iNow>=iL.length){
				$(".banner_ul").css('left','0');
				iNow = 0;
			}
			$(".banner_ul").css("left",-iNow*iX);
			$(".banner-span span").removeClass("span_point");
			$(".banner-span span").eq(iNow).addClass("span_point");
		})
		//左点击
		$(".banner_prev").click(function(){
			clearInterval(timer);
			--iNow;
			if(iNow<=-1){
				$(".banner_ul").css("left",-(iL.length-1)*iX);
				iNow = iL.length-1;
			}
			$(".banner_ul").css("left",-iNow*iX);
			$(".banner-span span").removeClass("span_point");
			$(".banner-span span").eq(iNow).addClass("span_point");
		});

		//图标点击事件
		$(".banner-span span").click(function(){
			clearInterval(timer);
			$(".banner-span span").removeClass("span_point");
			$(".banner-span span").eq($(this).index()).addClass("span_point");
			iNow= $(this).index();
			$(".banner_ul").css("left",-iNow*iX);
		})

	})
  </script>
 </head>
 <body>
	<div id="banner">
		<div class="banner_img">
			<ul class="banner_ul">
				<li><img src="http://www.southgis.com/uploadfiles/201811894748banner.png"/></li>
				<li><img src="http://www.southgis.com/uploadfiles/201842591554%E5%AE%98%E7%BD%91%E9%A6%96%E9%A1%B5%E5%A4%A7banner%E6%94%B9.jpg"/></li>
				<li><img src="http://www.southgis.com/uploadfiles/2018425114254%E5%86%9C%E7%BB%8F%E6%9D%83banner.jpg"/></li>
				<li><img src="http://www.southgis.com/uploadfiles/20188241547312019%E6%A0%A1%E6%8B%9Bbanner%E5%A4%A7.jpg"/></li>
			</ul>
			
			
		</div>
		<nav class="banner-span">
			<span class="span_point"></span>
			<span></span>
			<span></span>
			<span></span>
		</nav>
		<div class="banner_a">
			<div class="banner_prev"> < </div>
			<div class="banner_next"> > </div>
		</div>
	</div>
	<script>
		
	</script>
 </body>
</html>

 

今生且过、
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
自适应全屏轮播图JS
12-03
自适应全屏轮播图JS
如何用JS实现页面的全屏滚动
ychy1的博客
11-28 2598
如何用JS实现页面的全屏滚动
原生js实现满屏图标轮播图，自定义图标显示数量
蒲公英芽的博客
01-28 1349
原生js实现满屏图标轮播图，自定义图标显示数量。功能需求： 1. 根据图标的数量自动生成页面内容； 2. 随着浏览器窗口的缩放，使页面内容自动缩放； 3. 完成图标按钮的轮播图； 4. 扩展：可以自定义展示每页、每行的图标数量； 窗口缩放时，页面内容自动缩放，可以考虑使用百分比或者rem单位来布局。创建分页面时，要考虑到数据的总长度，如果每次显示18个图标，一共有30条数据，则第二页只有12个图标；要考虑到当第一次打开页面时，浏览器的比例可能不是屏幕的比例，如果是rem布局的话，需要
jquery，js实现手机端全屏轮播图手动滑动+自动切换(autoplay)
weixin_44089465的博客
05-11 1722
实现手机端全屏轮播图使用了swiper插件新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 使用了swiper插件 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器
用javascript实现轮播图效果
夏天的博客
02-02 400
本篇实现的是一个图片自动循环轮播的效果，没有左右按键和分页码。 最实用的一个点是，用了window.screen.width这个属性;能够根据屏幕去对轮播图片进行自适应。 1.HTML部分 <div class="swiper-container"> <div class="swiper-wrapper" style="left:0"> <img src="../image/1.jpg" alt=""> &lt.
js全屏轮播图
xincen9的博客
02-24 3961
js全屏轮播图 今天给大家分享一下用jquery方式书写基本的轮播图 原理：将要轮播的图片放到一个大div中，在放置图片的外层再包含一个div 设置宽为100% 如果有部分超出设为隐藏overflow: hidden;放置图片的div宽度设置为100%*图片的个数，当用户点击时使图片div进行滑动就可以了。 JS //页面进入加载事件 $(function() { //获取轮播图片的个数 ...
ＪＳ全屏轮播
05-19
ＪＳ全屏轮播
js全屏切换轮播图特效
06-04
js全屏切换轮播图特效源码
JavaScript完整轮播图
paine_的博客
10-24 251
JavaScript完整轮播图 先获需要用的到标签 设置一个全局变量用来保存鼠标进入的当前li的索引值 创建小按钮（根据ul中li的个数来创建） 创建li并加入到ol中 在ol中的li标签上添加一个自定义属性，存储索引值 注册鼠标进入事件 移除并创建当前li的背景颜色 获取当前索引值 移动ul 设置ol中第一个li有背景颜色 克隆一个ul中第一个li，加入到ul中的最后 鼠标进入到box的div显示左右焦点的div 鼠标离开到box的div隐藏左右焦点的div 右边按钮 当移动到最右边的照片时重置
js全屏图片轮播幻灯片UC浏览器官网焦点图片切换.zip
07-11
js全屏图片轮播幻灯片UC浏览器官网焦点图片切换，通过原生javascript实现图片切换的效果，点击向左向右的箭头或者点击小图，都会使图片实现切换的效果，一般用于企业网站或者商城网站。php中文网推荐下载！
JS功能齐全的轮播图
07-19
JS轮播图源码，带自动播图进度条，左右点击换图，底部按钮换图，功能齐全的轮播图
js 全屏轮播
09-06
全屏轮播 全屏轮播 全屏轮播 全屏轮播 全屏轮播全屏轮播 全屏轮播 全屏轮播 全屏轮播 全屏轮播全屏轮播 全屏轮播 全屏轮播 全屏轮播 全屏轮播
全屏轮播图
01-27
全屏轮播图，已经测试过，完全通过。写是全屏的，有需要改变尺寸的，只需要设置下图片尺寸即可。
全屏响应式背景大图淡入淡出轮播特效js插件.zip
07-11
全屏响应式背景大图淡入淡出轮播特效js插件下载。自动轮播切换。
Jquery实现的全屏无缝滚动轮播图
11-04
该资源主要运用jQuery基本知识，首先是实现全屏滚动，其次实现了轮播图，比较于之前的javascript代码复杂冗余，该资源显得具有简单易懂、时效性
JS全屏图片滑块上下切换特效
07-24
JS全屏图片滑块上下切换特效是一款基于gsap.js制作的全屏图片幻灯片滑块切换，触屏滑块上下图片滚动展示特效。
TweenMaxJs实现超酷全屏轮播图js特效
ICode联盟
08-28 227
下载地址使用TweenMaxJs实现的超酷全屏轮播图特效。该轮播图特效以倾斜式无限轮播的方式进行展示，非常炫酷。 dd:
html全屏轮播图插件,js全屏banner图片轮播插件
weixin_33902301的博客
06-16 507
一个全屏的js轮播插件，非常好用，移植性好，今天用到的，收藏一下，以备使用。源码参考(以下范例代码，直接复制到本地运行就可以了，都是写的全路径[daixiaorui,com]，方便大家演示效果)：js全屏banner图片轮播插件$(document).ready(function() {/*首页幻灯*/C_banner($("#banner"), $("#banner_dl"), 6000);})...
bootstrap实现全屏轮播图
最新发布
05-31
要实现全屏轮播图，可以使用Bootstrap提供的Carousel组件。以下是实现步骤： 1. 在HTML中添加Carousel组件的代码： ``` <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="img/slide1.jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="img/slide2.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="img/slide3.jpg" alt="Third slide"> </div> </div> </div> ``` 2. 在CSS中设置Carousel的高度为100%以实现全屏效果： ``` .carousel { height: 100%; } ``` 3. 在JavaScript中初始化Carousel： ``` $('.carousel').carousel({ interval: 2000 //轮播间隔时间 }) ``` 注意，这里的图片路径需要根据实际情况进行修改。此外，还可以通过添加其他Carousel的属性和样式来进一步美化轮播图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值