jQuery 轮播图

预览图：

使用jquery实现轮播图要比用原生js简单许多，代码也少很多。

思路

1.外层盒子设置为一个图片的大小
2.内层盒子为所有图片的宽度，图片左浮动
3.外层盒子设置overflow:hidden;
4,让内层盒子移动。

代码：

<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"><link rel="stylesheet" href="./css/indxe.css"><script src="./js/jquery-1.12.4.js"></script><script src="./js/index.js"></script><title>Document</title>
</head>
<body><!-- 显示区域 box --><div class="box"><!-- 所有图片的盒子 --><div class="main"><!-- 为了无缝切换，在后面增加第一张图作为掩饰 --><img src="./img/p1.jpeg" alt=""><img src="./img/p2.jpeg" alt=""><img src="./img/p3.jpeg" alt=""><img src="./img/p4.jpeg" alt=""><img src="./img/p5.jpeg" alt=""><img src="./img/p1.jpeg" alt=""></div><!-- 圆点按钮 --><div class="btns"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div><!-- 上一张按钮 --><div class="last"></div><!-- 下一张按钮 --><div class="next"></div></div>
</body>

body {background-color: rgb(39, 39, 39);
}.box {overflow: hidden;position: relative;margin: 200px auto;width: 450px;height: 300px;
}.main {position: absolute;width: 2700px;height: 300px;
}.main img {float: left;width: 450px;height: 300px;
}.next,
.last {position: absolute;top: 50%;transform: translateY(-50%);width: 30px;height: 60px;
}.next {right: 0;background: url(../img/右.png) no-repeat center center / 32px 32px rgba(255, 255, 255, 0.5);
}.last {left: 0;background: url(../img/左.png) no-repeat center center / 32px 32px rgba(255, 255, 255, 0.5);
}.btns {position: absolute;top: 85%;left: 50%;transform: translateX(-50%);width: 110px;
}.btns span {float: left;display: block;margin: 4px;width: 14px;height: 14px;background-color: #ffffff80;border-radius: 50%;font-size: 12px;line-height: 14px;text-align: center;cursor: pointer;
}.btns span:nth-child(1) {background-color: deepskyblue;color: #fff;
}

$(function() {// 图片的下标var index = 0;// 图片的宽度var w = $('.main img').width();// 点击切换下一张图片$('.next').click(function() {// 图片序号+1，图片向右移动一张图片的距离index++;// 调用 图片移动函数move();// 按钮颜色改变btnColor();});// 点击切换上一张图片$('.last').click(function() {// 图片序号-1，图片向左移动一张图片的距离index--;// 调用 图片移动函数move();// 按钮颜色改变btnColor();});// 点击圆点切换图片$('.btns span').click(function(e) {// 下标是对应的index = $(this).index();move();btnColor();})// 图片移动函数function move() {// 当图片显示第一张时，点击上一张按钮，下标和坐标变为最后一张图片，if (index < 0) {index = 4;$('.main').animate({left: -w * (index + 1)}, 0)}// 根据下标移动图片$('.main').animate({left: -w * index});// 当图片移动到最后一张时，下标变为0，坐标变为第一张图片if (index === 5) {index = 0;$('.main').animate({left: 0}, 0)}};// 圆点颜色随图片移动而改变function btnColor() {// 将点击的圆点变为蓝色$('.btns span').eq(index).css({ backgroundColor: 'deepskyblue', color: '#fff' });// 将其他的圆点变为白色$('.btns span').eq(index).siblings().css({ backgroundColor: '#ffffff80', color: '#000' });}// 定时器，自动轮播var timer = null;// 每隔2s切换下一张图片timer = setInterval(function() {index++;move();btnColor();}, 2000)// 鼠标移入清除定时器$('.box').mouseover(function() {clearInterval(timer);});// 鼠标移出开启定时器$('.box').mouseout(function() {timer = setInterval(function() {index++;move();btnColor();}, 2000)})})

jQuery 实现轮播图相关推荐

用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
网页直播源码，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实现轮播图效果
Jquery实现轮播图效果首先是html <div id="box"><img src="./day6/am/轮播图/img/1.jpg" ...
JQuery实现轮播图及其原理
源码: <!DOCTYPE html> <html><head><meta charset="utf-8" name="view ...
Jquery实现轮播图效果（fadeIn()和fadeOut()方法的应用）
2019独角兽企业重金招聘Python工程师标准>>> 1.jquery.js从官网上下载最新的,使用外链导入到html中, 下载地址: http://jquery.com/down ...
自己定义jquery插件轮播图
轮播图-html <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...

jQuery 实现轮播图

jQuery 轮播图

预览图：

思路

代码：

jQuery 实现轮播图相关推荐

最新文章

热门文章