jQuery实现轮播图

淩亂°似流年 2021-12-14 09:45 518阅读 0赞

先展示一下轮播图的终结版截图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70]  
轮播图需要实现的功能就不再细讲了，直接看代码吧，仔细看，不要感觉轮播图好难，代码好多就懒得看了，其实很简单。

html代码

<div class="pic">
    			<img src="img/微信截图_20190705084205.png"/>
    			<img src="img/微信截图_20190705084220.png"/>
    			<img src="img/微信截图_20190705100148.png"/>
    			<img src="img/微信截图_20190705100208.png"/>
    			
    			<div id="left">
    			<
    			</div>
    		<div id="right">
    			>
    			</div>
    			<ul id="ulObj">
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    			</ul>
    		</div>

css样式代码

<style type="text/css">
    			.pic{ 
    				width: 900px;
    				height: 370px;
    				margin:20px auto;
    				position: relative;
    			}
    			nav{ 
    				width: 900px;
    				height: 1500px;
    				margin:0 auto;
    				border: 1px solid red;
    			}
    			.pic img{ 
    				width: 900px;
    				height: 370px;
    				position: absolute;
    			}
    			#left{ 
    				width: 55px;
    				height: 75px;
    				border: 1px solid black;
    				font-size: 50px;
    				padding-left: 10px;
    				background-color: rgba(0,0,0,0.5);
    				color: red;
    				font-weight: bold;
    				position: absolute;
    				top: 140px;
    				cursor: pointer;
    			}
    			#right{ 
    				width: 55px;
    				height: 75px;
    				border: 1px solid black;
    				font-size: 50px;
    				padding-left: 10px;
    				background-color: rgba(0,0,0,0.5);
    				color: red;
    				font-weight: bold;
    				position: absolute;
    				top: 140px;
    				right: 0;
    				cursor: pointer;
    			}
    			#ulObj{ 
    				width: 150px;
    				height: 17px;
    				position: absolute;
    				bottom: 0px;
    				list-style: none;
    				left: 350px;
    			}
    			#ulObj li{ 
    				float: left;
    				margin-left: 10px;
    				width: 15px;
    				height: 15px;
    				background-color: lightskyblue;
    				border-radius: 45px;
    			}
    			#ulObj li:hover{ 
    				background-color: white;
    				cursor: pointer;
    			}
    		</style>

最后就是jquery了

<script type="text/javascript">
    			$(function(){ 
    				//刚开始设置一个index，index为图片的索引值
    					var index=0;
    					//当图片索引为0时,显示对应的图片,其他的隐藏
    					$(".pic img").hide();
    					$(".pic img").eq(index).show();
    					//图片对应的下面的小圆圈设置背景颜色
    					$("#ulObj li").eq(index).css("background-color","white");
    					//设置一个定时器
    					timer=setInterval(function(){ 
    					var imgObj=$(".pic img");
    					//index的值加1，如果index值大于3就等于0
    					index++;
    						if(index>3){ 
    							index=0;
    						}
    					//设置对应之外的小圆圈背景颜色
    				$("#ulObj li").css("background-color","lightskyblue");
    					//设置对应索引的小圆圈背景颜色
    				$("#ulObj li").eq(index).css("background-color","white");
    					imgObj.fadeOut(1000);
    					imgObj.eq(index).fadeIn(1000);
    					},3000);
    					//鼠标悬停清除定时器
    				$(".pic img").mouseenter(function(){ 
    					clearInterval(timer);
    				});
    				//鼠标移走重启定时器
    				$(".pic img").mouseleave(function(){ 
    					timer=setInterval(function(){ 
    					var imgObj=$(".pic img");
    					index++;
    						if(index>3){ 
    							index=0;
    						}
    					imgObj.fadeOut(1000);
    					imgObj.eq(index).fadeIn(1000);
    					$("#ulObj li").css("background-color","lightskyblue");
    					$("#ulObj li").eq(index).css("background-color","white");
    					},3000);
    				});
    				//点击下一张
    				$("#right").click(function(){ 
    					index+=1;
    					if(index>3){ 
    						index=0;
    					}
    					$(".pic img").fadeOut(1000);
    					$(".pic img").eq(index).fadeIn(1000);
    					$("#ulObj li").css("background-color","lightskyblue");
    					$("#ulObj li").eq(index).css("background-color","white");
    				});
    				//点击上一张
    				$("#left").click(function(){ 
    					index-=1;
    					if(index<0){ 
    						index=3;
    					}
    					$(".pic img").fadeOut(1000);
    					$(".pic img").eq(index).fadeIn(1000);
    					$("#ulObj li").css("background-color","lightskyblue");
    					$("#ulObj li").eq(index).css("background-color","white");
    				});
    				//点击下面的小圆圈显示对应的图片
    				$("#ulObj li").click(function(){ 
    					//获得被点击的li元素的索引值
    					index=$("#ulObj li").index(this);
    					$("#ulObj li").css("background-color","lightskyblue");
    					$("#ulObj li").eq(index).css("background-color","white");
    					//alert(index);
    					$(".pic img").fadeOut(1000);
    					$(".pic img").eq(index).fadeIn(1000);
    				});	
    		});
    		</script>

大功告成！不懂就留言，在线讲解！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70]: /images/20211214/7ca599b72f174fc1956ea15695a603a3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，518人围观）

还没有评论，来说两句吧...

相关阅读

相关使用jQuery实现轮播图

轮播图切换大致分为以下几个步骤 1.点击向左向右的图标，平滑切换到上(下)页 2.进行无限切换，第一页的上一页为最后一页，最后一页的下一页为第一页 3.每隔三秒图片

红太狼/ 2022年12月02日 15:06/ 0 赞/ 224 阅读

相关 jQuery实现轮播图

我之前用css3实现轮播图过，不过那是一个简单的轮播图，只能来回切换图片。因为那时候我还没有学过javascript，没学过javascript的同学也可以去我主页看看。当然，

梦里梦外;/ 2022年11月15日 03:46/ 0 赞/ 308 阅读

相关使用jQuery实现轮播图

大家好，今天给大家带来的就是使用jQuery实现一个简单的轮播图，实现的原理就是： 1、在一个区域内，设置宽高，超出这部分区域就要实现一个隐藏 2、获取图片的大小为3

忘是亡心i/ 2022年09月07日 05:57/ 0 赞/ 317 阅读

相关 jQuery实现轮播图(一)

轮播概念图 ![这里写图片描述][SouthEast] 这里的轮播图的轮播方式是自动每隔一段时间向左移动一张图，循环滚动（还有变换透明度来实现轮播的）轮播图的原理很简

爱被打了一巴掌/ 2022年06月12日 13:45/ 0 赞/ 452 阅读

相关 jQuery实现轮播图（二）

这里的轮播为轮播增添了一个效果，前一张图片整体碎成小块块然后上移消失，而下一张图片显示出 ![这里写图片描述][SouthEast] 原理为：事先创建一堆浮动的div（宽

r囧r小猫/ 2022年06月11日 00:09/ 0 赞/ 329 阅读

相关 jquery简单轮播图实现

其实轮播的代码很简单只需要20多行jq代码就可以实现了以下便是简单轮播的代码： <!DOCTYPE html> <html> <head

怼烎@/ 2022年06月10日 12:56/ 0 赞/ 317 阅读

相关利用JQuery实现轮播图

上一篇文章写了利用初级JS实现无缝轮播图，但是实际写起来有点费劲，量有些大，如果改用jQuery写无缝轮播图的话，写起来比较便捷，而已逻辑比较清晰，简单，实现起来比较快捷，性能

待我称王封你为后i/ 2022年05月29日 11:35/ 0 赞/ 355 阅读

相关 jquery 实现轮播图

<!doctype html> <html> <head> <meta charset="utf-8"> <title>轮播图

ゝ一世哀愁。/ 2022年05月11日 12:52/ 0 赞/ 461 阅读

相关 jQuery实现轮播图

先展示一下轮播图的终结版截图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

淩亂°似流年/ 2021年12月14日 09:45/ 0 赞/ 519 阅读

相关 jQuery实现轮播图

最简单的方式实现轮播图话不多说,直接粘代码 HTML片段 <!DOCTYPE html> <html lang="en"> <head>

港控/mmm°/ 2021年11月17日 08:20/ 0 赞/ 578 阅读