Jquery版轮播图超详细

主要功能介绍：

1、先搭建框架

2、html和css代码

三、jquery代码

原生js的轮播图也写过，如需观看请您移步我的其他文章~

主要功能介绍：

鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止

鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始

动态创建下面的小圆点

无缝滚动效果

点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片

使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况

1、先搭建框架

标签如下图所示

2、html和css代码

如下图所示,简单写一下，重要是学习jquery代码

html代码：

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="jquery.min.js">
<link rel="stylesheet" href="index.css">
<script src="jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="focus">
<ul id="slide">
<li>
<img src="data:images/1.jpg" alt="">
</li>
<li>
<img src="data:images/2.jpg" alt="">
</li>
<li>
<img src="data:images/3.jpg" alt="">
</li>
<li>
<img src="data:images/4.jpg" alt="">
</li>
<li>
<img src="data:images/5.jpg" alt="">
</li>
</ul>
<ol>
</ol>
<span class="left"></span>
<span class="right"></span>
</div>

注意引入文件！

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><link rel="stylesheet" href="jquery.min.js"><link rel="stylesheet" href="index.css"><script src="jquery.min.js"></script><script src="index.js"></script>
</head>
<body><div class="focus"><ul id="slide"><li><img src="data:images/1.jpg" alt=""></li><li><img src="data:images/2.jpg" alt=""></li><li><img src="data:images/3.jpg" alt=""></li><li><img src="data:images/4.jpg" alt=""></li><li><img src="data:images/5.jpg" alt=""></li></ul><ol></ol><span class="left"></span><span class="right"></span></div>

css代码：

* {margin: 0;padding: 0;
}.focus {overflow: hidden;border-radius: 20px;position: relative;width: 800px;height: 500px;background-color: pink;margin: 0 auto;
}li {list-style: none;
}#slide {position: absolute;left: 0;top: 0;width: 4900px;height: 500px;
}#slide li {float: left;width: 800px;height: 500px;
}#slide li img {width: 100%;
}ol {position: absolute;padding: 0 15px;height: 20px;bottom: 20px;left: 50%;transform: translateX(-50%);border-radius: 10px;background-color: rgba(0, 0, 0, .3);
}.left {display: none;position: absolute;left: 10px;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;background-color: rgba(0, 0, 0, .3);
}.left::after {content: '';position: absolute;top: 10px;left: 15px;width: 20px;height: 20px;transform: rotate(-135deg);border-top: 1px solid #fff;border-right: 1px solid #fff;
}.right {display: none;position: absolute;right: 10px;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;background-color: rgba(0, 0, 0, .3);
}.right::after {content: '';position: absolute;top: 10px;right: 15px;width: 20px;height: 20px;transform: rotate(45deg);border-top: 1px solid #fff;border-right: 1px solid #fff;
}ol li {float: left;width: 15px;height: 15px;border-radius: 8px;margin-top: 2px;margin-right: 7px;background-color: #fff;
}ol li:last-child {margin-right: 0;
}.current {background-color: orange;
}

三、jquery代码

注意点：

1、ul必须使用position:absolute才能正常使用动画。

2、为了实现无缝连接，要将第1个li深度克隆并放到ul的后面

3、定义节流阀，防止图片切换过快

4、先判断再进行轮播图的移动，否则会报错

5、设置定时器，自动播放图片

$(function() {// 当鼠标移入focus时，显示左右按钮$('.focus').on('mouseenter', function() {$('.left').css('display', 'block');$('.right').css('display', 'block');// 停止定时器clearInterval(timer);timer = null;})$('.focus').on('mouseleave', function() {$('.left').css('display', 'none');$('.right').css('display', 'none');// 创建定时器，继续轮播timer = setInterval(function() {// 因为是继续右点击的操作，所以会接着停止的地方继续轮播$(".right").click();}, 2000)});// 动态创建小圆圈 数量根据ul li的数量决定var num = $("#slide").children().length;for (var i = 0; i < num; i++) {$('ol').append('<li data-index="' + i + '"></li>');}var number = 0;// 给uol 里面面的第一个li添加current类名console.log($("ol li").eq(0).addClass('current'));$("ol li").on('click', function() {// number从0开始的number = $(this).attr('data-index');// 返回的是string类型的数据，转化为number类型的数据才能用在eq（）里面 number = parseInt(number);// 将里面点击到的那个圆点添加类名$("ol li").eq(number).addClass('current').siblings().removeClass('current');// 做动画if (number >= $("#slide").children().length) {console.log($("#slide").children().length);}$('#slide').animate({left: (800 * -number)})});// 为了实现无缝连接，要将第1个li深度克隆并放到ul的后面var first = $("#slide").children(0)[0].cloneNode(true);$("#slide").append(first);// 定义节流阀，防止图片切换过快var flag = true;// 点击右侧按钮实现ul的轮播效果$(".right").on('click', function() {if (flag) {flag = false;number++;// 先判断再进行移动，否则会报错    // 如果他的number为5到达第六个（复制的第一个），还是执行向右滑动的操作[应该是滑动到第一个]// 如果number是6，就让他的left迅速的回到第一个的位置，并再次做动画让他到第二个的位置if (number >= ($("#slide").children().length)) {$("#slide").css('left', 0);number = 1;};getslide();}});// 点击左侧按钮实现ul的轮播效果$(".left").on('click', function() {if (flag) {flag = false;number--;if (number <= -1) {// -4000就是拷贝图片的坐标$("#slide").css('left', -4000);number = 4;}getslide();}});// 封装成函数，减少代码量function getslide() {$("#slide").animate({left: -number * 800}, 500, function() {flag = true;});//进行一个判断，因为当轮播到最后一张图的时候为了无缝连接还需要轮播复制的第一张图// 所以暂时number还不能为0;但是下面的按钮此时应该转到为第一个，所以进行判断语句· if (number >= 5) {num = 0;} else {num = number;}$("ol li").eq(num).addClass('current').siblings().removeClass('current');};// 设置定时器，自动播放图片var timer = setInterval(function() {$(".right").click();}, 2000)
})

Jquery版轮播图超详细相关推荐

用jQuery实现轮播图——超简单(代码解释)
先看效果鼠标悬浮时停止轮播,离开时自动轮播,点下一张小圆点会随着动直接上代码 <!DOCTYPE html> <html><head><meta char ...
用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
javascript实现图片轮播_手撸一个简易版轮播图(上)
手撸一个简易版轮播图实现原理,通过控制 swiper-warpper 容器的定位来达到切换图片的效果. 页面布局简易版轮播图 < > 页面样式 .container{width: 60 ...
原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
HTML 简易、易懂版轮播图有图有真相 JavaScript实现
HTML 简易.易懂版轮播图 JavaScript实现
网页直播源码，JQuery实现轮播图方法
网页直播源码,JQuery实现轮播图方法 html <!DOCTYPE html> <html> <head lang="en"><met ...
ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法在页面中引入jquer ...
基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧使用需要准备(往下滑动会看到): ...
jQuery实现轮播图（无缝轮播，附效果图），代码有详解。
jQuery实现轮播图这里用了一些有颜色的div块当做图片,复制之后可以直接用,有需要的话再根据自己的需求替换就可以了. 功能: (1)左右无缝轮播. (2)鼠标移上去会停止,移走继续动. (3)点 ...

Jquery版轮播图超详细

主要功能介绍：

1、先搭建框架

2、html和css代码

三、jquery代码

Jquery版轮播图超详细相关推荐

最新文章

热门文章