【jQuery】全功能轮播图的实现（本文结尾也有javascript版）

轮播图

图片自动切换（定时器）；
鼠标悬停在图片上图片不切换（清除定时器）
鼠标悬停在按钮上时显示对应的图片（鼠标悬停事件）
鼠标悬停在图片上是现实左右箭头
点击左键切换到上一张图片，但图片为第一张时，点击切换到最后一张图片
点击右键切换到下一张图片，但图片为最后一张时，点击切换到第一张图片

jquery版本3.4.1

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" href="css/reset.css" />

		<style>

			.big{

				position: relative;

				width: 450px;

				height: 270px;

			}

			#ulimg{

				width: 450px;

				height: 270px;

				overflow: hidden;

			}

			#ulimg li{float: left;}

			#ulimg ul{

				width: 500%;

				height: 270px;

				display: block;

				clear: both;

			}

			#arrows{

				position: absolute;

				top:90px;

				z-index: 5;

				width: 100%;

			}

			.arrow{

				width: 30px;

				height: 60px;

				background-color: #191E2B;

				font-size: 25px;

				text-align: center;

				line-height: 60px;

				border-radius: 10px;

				color: #FFFFFF;

				float: left;

			}

			#rarrow{

				float: right;

			}

			.big #arrows{

				position: absolute;

				z-index: -1;

				transition: z-index 1s;

				opacity: 1;

				cursor: pointer;

			}

			.btn{

				width: 20px;

				height: 20px;

				background-color: whitesmoke;

				font-size: 18px;

				text-align: center;

				float: left;

				margin: 10px;

				border-radius: 5px;

			}

			#btns{

				position: absolute;

				z-index: 5;

				top: 220px;

				left: 220px;

				cursor: pointer;

			}

			#btns .btn2{

				background: orange;

			}

		</style>

	</head>

	<body>

		<div class="big">

		<div id="ulimg">

		<ul>

			<li class="now"><img  src="img/01.jpg" alt=""/></li>

			<li><img src="img/02.jpg" alt=""/></li>

			<li><img src="img/03.jpg" alt=""/></li>

			<li><img src="img/04.jpg" alt=""/></li>

			<li><img src="img/05.jpg" alt=""/></li>

		</ul>

		</div>

		<div id="arrows">

		<div class="arrow"><</div>

		<div class="arrow" id="rarrow">></div>

		</div>

		<div id="btns">

		<div class="btn btn2">1</div>

		<div class="btn">2</div>

		<div class="btn">3</div>

		<div class="btn">4</div>

		<div class="btn">5</div>

		</div>

		</div>

		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>

		<script>

			var timer=setInterval(change,3000);

			var index=1;

			function change(){

				index++;

				if(index>=6){

					index=1;

				}

				$(".btn").removeClass("btn2");

				$(".btn").eq(index-1).addClass("btn2");

				$("#ulimg ul").animate({

					"marginLeft":"-450px"

				},1000,function(){

					$("#ulimg li:eq(0)").appendTo($(this));

					$(this).css("marginLeft",0);

				})

			}

			function lchange(){

				$(".btn").removeClass("btn2");

				index--;

				if(index<=0){

					index=5;

				}

				$(".btn").eq(index-1).addClass("btn2");

				$("#ulimg li:eq(4)").prependTo($("#ulimg ul"));

			}

			function rchange(){

				$(".btn").removeClass("btn2");

				index++;

				if(index>=6){

					index=1;

				}

				$(".btn").eq(index-1).addClass("btn2");

				$("#ulimg li:eq(0)").appendTo($("#ulimg ul"));

			}

			$(".arrow:eq(0)").click(function(){

				lchange();

			});

			$(".arrow:eq(1)").click(function(){

				rchange();

			});

			$(".big").mouseover(function(){

				clearInterval(timer);

				$("#arrows").css("zIndex",3);

			})

			$(".big").mouseout(function(){

				clearInterval(timer);

				timer=setInterval(change,3000);

				$("#arrows").css("zIndex",-1);

			})

			$(".btn").click(function(){

				$(".btn").removeClass("btn2");

				$(this).addClass("btn2");

				var now=$(this).html();

//				console.log(now);

//				console.log(index);

				var btw=now-index;

				if(btw<0){

					btw=Math.abs(btw);

					for(let i=0;i<btw;i++){

						lchange();

					}

				}else if(btw>0){

					for(let i=0;i<btw;i++){

						rchange();

					}

				}else{

				}

			})

		</script>

	</body>

</html>

javascript版本

html+css

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>轮播图</title>

		<link rel="stylesheet" href="css/reset.css" />

		<style>

			.big{

				position: absolute;

				width: 450px;

				height: 270px;

			}

			#ulimg li{

				position: absolute;

				z-index: 1;

				opacity: 0;

				transition: opacity 1s;

			}

			#ulimg .now{

				position: absolute;

				z-index: 2;

				opacity: 1;

			}

			#arrows{

				position: absolute;

				top:90px;

				z-index: 3;

				width: 100%;

			}

			.arrow{

				width: 30px;

				height: 60px;

				background-color: #191E2B;

				font-size: 25px;

				text-align: center;

				line-height: 60px;

				border-radius: 10px;

				color: #FFFFFF;

				float: left;

			}

			#rarrow{

				float: right;

			}

			.big #arrows{

				position: relative;

				z-index: 1;

				transition: z-index 1s;

				opacity: 0;

				cursor: pointer;

			}

			.btn{

				width: 20px;

				height: 20px;

				background-color: whitesmoke;

				font-size: 18px;

				text-align: center;

				float: left;

				margin: 10px;

				border-radius: 5px;

			}

			#btns{

				position: relative;

				z-index: 3;

				margin-top: 220px;

				margin-left: 220px;

				cursor: pointer;

			}

			#btns .btn2{

				background: orange;

			}

		</style>

	</head>

	<body>

		<div class="big">

		<ul id="ulimg">

			<li class="now"><img  src="img/01.jpg" alt=""/></li>

			<li><img src="img/02.jpg" alt=""/></li>

			<li><img src="img/03.jpg" alt=""/></li>

			<li><img src="img/04.jpg" alt=""/></li>

			<li><img src="img/05.jpg" alt=""/></li>

		</ul>

		<div id="arrows">

		<div class="arrow"><</div>

		<div class="arrow" id="rarrow">></div>

		</div>

		<div id="btns">

		<div class="btn btn2">1</div>

		<div class="btn">2</div>

		<div class="btn">3</div>

		<div class="btn">4</div>

		<div class="btn">5</div>

		</div>

		</div>

		<script src="js/imgs.js"></script>

	</body>

</html>

var imgs=document.querySelectorAll("#ulimg li");

var big=document.querySelector(".big");

var index=0;

var timer=setInterval(change,1000);

var arrows=document.getElementById("arrows");

var arrowsbtns=document.getElementsByClassName("arrow");

var btns=document.getElementsByClassName("btn");

function resetbtns(){

	for(var i=0;i<imgs.length;i++){

		imgs[i].className="";

		btns[i].className="btn";

		btns[i].setAttribute("onclick","changeimg(this)");

	}

}

function change(){

	resetbtns();

	index++;

	if(index>=5){

		index=0;

	}

	imgs[index].className="now";

	btns[index].className="btn btn2";

}

big.onmouseover=function stop(){

	clearInterval(timer);

	arrows.style.zIndex=3;

	arrows.style.opacity=1;

}

big.onmouseout=function start(){

	clearInterval(timer);

	timer=setInterval(change,1000);

	arrows.style.zIndex=1;

	arrows.style.opacity=0;

}

arrowsbtns[0].onclick=function leftChange(){

	resetbtns();

	index--;

	if(index<=-1){

		index=4;

	}

	imgs[index].className="now";

	btns[index].className="btn btn2";

}

arrowsbtns[1].onclick=function rightChange(){

	resetbtns();

	index++;

	if(index>=5){

		index=0;

	}

	imgs[index].className="now";

	btns[index].className="btn btn2";

}

function changeimg(obj){

	resetbtns();

	index=obj.innerHTML*1-1;

	imgs[index].className="now";

	btns[index].className="btn btn2";

}

【jQuery】全功能轮播图的实现（本文结尾也有javascript版）的更多相关文章

jQuery淡入淡出轮播图实现
大家好我是只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
用jQuery写的轮播图
效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...
jQuery实现简易轮播图的效果
(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...
用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的路径. 有4张图片都在img文件夹里,名称为 img ...
JQuery实现一个轮播图
1.HTML <div class="banner"> <div class="b_main"> <div class=" ...
记录一下自己用jQuery写的轮播图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
jquery淡入淡出轮播图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
使用JQuery制作幻灯片(轮播图）
1.首先看一下目录结构 images文件夹放所需要播放的图片. js文件夹放jquery库和main.js 2.html代码: <!DOCTYPE html> <html lang= ...
jquery 移动端轮播图
<div class="slide"> <div class="slide-box"> <ul class="slide ...

随机推荐

创造DotNet Core轻量级框架【二】
上一篇创造DotNet Core轻量级框架[一] 10 题外话上一篇文章感谢大家提出的各种小建议和各种讨论,但是在写文章的时候框架最最最基础的样子已经做出来了,所以大家的各种建议和意见我会在后续逐 ...
u-boot: Not enough room for program headers, try linking with -N
在编译u-boot的时候出现了以下错误: arm-linux-gnueabi-ld.bfd: u-boot: Not enough room for program headers, try link ...
mongodb cluster
假设三台机器,ip分别为192.168.1.10,192.168.1.11,192.168.1.12,分别在每台电脑上下载并解压mongodb,关闭防火墙或者开放防火墙端口一.安装shard 配置文 ...
CPU瞒着内存竟干出这种事
还记得我吗,我是阿Q,CPU一号车间的那个阿Q. 今天忙里偷闲,来到厂里地址翻译部门转转,负责这项工作的小黑正忙得满头大汗. 看到我的到来,小黑指着旁边的座椅示意让我坐下. 坐了好一会儿,小黑才从工位 ...
Windows10系统优化（批处理）
经历过XP.Win7.Vista.Win8之后,Win10有了很大的改变,虽然Win10刚出时,非常糟糕,甚至很长一段时间被认为没有Win7,但是随着Win10的不断优化不断更新,已经慢慢的变得更好了 ...
strcmp比较字符串
0x01 <?php $flag = "flag{xxxxx}"; if (isset($_GET['a'])) { if (strcmp($_GET['a'], $flag ...
java ->IO流_File类
IO概述回想之前写过的程序,数据都是在内存中,一旦程序运行结束,这些数据都没有了,等下次再想使用这些数据,可是已经没有了.那怎么办呢?能不能把运算完的数据都保存下来,下次程序启动的时候,再把这些数据 ...
IDEA快捷键(windows)
Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ctrl+[ ...
leetcode 第184场周赛第一题(数组中的字符串匹配）
一.函数的运用 1,strstr(a,b); 判断b是否为a的子串,如果是,返回从b的开头开始到a的结尾如“abcdefgh” “de” 返回“defgh”: 如果不是子串,返回NULL: 2,me ...
Nginx服务器的安装和卸载
Nginx的安装安装Nginx之前,需要先获取Nginx的安装文件.我们可以在http://nginx.org/en/download.html获取各个版本的Nginx安装文件.大家可以按照自己的需 ...

【jQuery】全功能轮播图的实现（本文结尾也有javascript版）

轮播图

jquery版本3.4.1

javascript版本

【jQuery】全功能轮播图的实现（本文结尾也有javascript版）的更多相关文章

随机推荐

热门专题