jQuery实现轮播图的思路、代码及知识点！

分手后的思念是犯贱 2022-02-14 05:46 132阅读 0赞

jQuery是一个快速、简洁的JavaScript框架。它设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。的确啊，用jQ写轮播图比js写轮播图代码量少了许多呢！

一、轮播图实现思路：  
1、自动轮播：  
（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；  
（2）使当前下标的图片的层级为1，并且当前li的背景颜色设置为白色；  
（3）时间函数每隔1秒执行一次。  
2、手动轮播：点击小圆圈按钮，显示相应图片。  
（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；  
（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；  
3、鼠标移上、移开时的事件。  
4、点击左右箭头，实现向前向后轮播图片。

二、代码部分。

内容部分：
    <body>
    <div class="bigbox">
    <div class="box">
    <a href="" style="z-index: 1"><img src="images/lunbo01.jpg"></a>
    <a href=""><img src="images/lunbo02.jpg"></a>
    <a href=""><img src="images/lunbo03.jpg"></a>
    <a href=""><img src="images/lunbo04.jpg"></a>
    <a href=""><img src="images/lunbo05.jpg"></a>
    <a href=""><img src="images/lunbo06.jpg"></a>
    </div>
    <ul class="items">
    <li class="item" style="background: #99ffff"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    </ul>
    <div class="button">
    <button class="btn fl" id="left"><</button>
    <button class="btn fr" id="right">></button>
    </div>
    </div>
    </body>

css部分：

<style type="text/css">
    *{
    margin: 0;
    padding: 0;
    list-style: none;
    }
    .bigbox{
    width:500px;
    height:350px;
    /*border:1px solid #009494;*/
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    }
    .box{
    width:500px;
    height:350px;
    position: absolute;
    top:0px;
    }
    .box a{
    position: absolute;
    }
    .box img{
    width:500px;
    height: 350px;
    position: absolute;
    }
    .bigbox .items{
    width:150px;
    height:15px;
    /*border:1px solid red;*/
    position: absolute;
    bottom: 10px;
    left: 175px;
    z-index: 3;
    }
    .items .item{
    width:15px;
    height:15px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    margin: 0 5px;
    float: left;
    }
    .button{
    width: 500px;
    height: 35px;
    /*border:1px solid #009494;*/
    position: absolute;
    top:45%;
    z-index: 5;
    }
    .button .btn{
    width:25px;
    height: 35px;
    border:none;
    background: rgba(255,255,255,0.5);
    font-size: 35px;
    color: white;
    }
    .fl{
    float: left;
    }
    .fr{
    float: right;
    }
    </style>

script部分：

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">$(function(){//自动轮播
     var num = 0; 	
    function imgAuto(abc){		
     	$("a").hide().eq(num).fadeIn(2000);//当前图片的显示隐藏	
     	$(".item").css("background","rgba(255,255,255,0.5)").eq(num).css("background","#99ffff");		
     	if (abc == "r") {
     		num++;			
     		if (num == $("a").length) {//轮播判断，当轮播到最后一张后，回到第一张。
     			num = 0;		
     		}else if(abc = "l"){
    			num--;
     		if (num < 0) {//轮播判断，当点击左按钮到第一张后，回到最后一张
     			num = $("a").length-1;
     			}		
     		}	
     	}
     	var move = setInterval(function(){//时间函数
     		imgAuto("r");		
     	},2000)		
     //手动轮播		
     $(".item").click(function(){
     	var index = $(this).index();//当前点击小圆圈的下标
     	$("a").hide().eq(index).show();//隐藏图片，当轮播到当前对应的时显示
     	$(".item").css("background","rgba(255,255,255,0.5)").eq(index).css("background","#99ffff");
     		num = index;  //目的是当点击某个小圆点后能接着轮播；
     	});		
     //鼠标移入移出事件		
    	 $(".bigbox").hover(function(){				
     		clearInterval(move);		
    	 },function(){
     		move = setInterval(function(){				
     			imgAuto("r");			
     		},1000);	
     	});		
    	 //左右按钮的点击事件
    	$("#left").click(function(){			
    		imgAuto("l");		
    		})		
    	$("#right").click(function(){			
    		imgAuto("r");		
    	})
    })
    </script>

三、所学知识点。  
（1）hide() 隐藏  
（2）show() 显示  
（3）eq（index） 选区索引等于index的元素  
（4）setInterval() 间隔指定时间内不停的执行指定代码  
（5）click() jquery点击事件  
（6）hover() 相当于mouseover和mouseout时间的组合  
（7）clearInterval() 清除setInterval

发表评论取消回复

表情：

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

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

相关阅读

相关 js自动轮播图的思路及代码

1、布局 2、定义当前第几张图片和应该向什么方向运动 3、将需要放置的图片根据方向放在前面或者后面 4、将整个容器向左或者向右移动， 5、完成后将上一次的图片删

短命女/ 2023年07月25日 09:16/ 0 赞/ 6 阅读

相关 jQuery实现轮播图

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

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

相关 jquery简单轮播图实现

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

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

相关 jQuery实现轮播图（无缝轮播，附效果图），代码有详解。

jQuery实现轮播图这里用了一些有颜色的div块当做图片，复制之后可以直接用，有需要的话再根据自己的需求替换就可以了。功能：（1）左右无缝轮播。（2）

你的名字/ 2022年05月15日 04:09/ 0 赞/ 875 阅读

相关 jquery 实现轮播图

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

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

相关原生js实现轮播图的思路、代码及知识点！

一、轮播图实现思路： 1、自动轮播：（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；（2）使当前下标的图片的层级为1，并且当前li的背景颜色设置

爱被打了一巴掌/ 2022年02月19日 16:48/ 0 赞/ 149 阅读

相关 jQuery实现轮播图的思路、代码及知识点！

jQuery是一个快速、简洁的JavaScript框架。它设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用

分手后的思念是犯贱/ 2022年02月14日 05:46/ 0 赞/ 133 阅读

相关 jQuery实现轮播图

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

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

相关 jQuery实现轮播图

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

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

相关 JQuery实现简单的轮播图基本思路

[demo点这里][demo] 需要达到的效果常见的轮播图组件自动翻页，左右跳转按钮，下方是index index显示了当前图片位置，左右按钮就是更改当前位

﹏ヽ暗。殇╰゛Y/ 2021年10月26日 15:48/ 0 赞/ 247 阅读