jQuery系列（十三）：实现轮播
1、轮播一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.slider-list{ width: 580px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
.slider-list .slider-wrapper{
height: 470px;
}
.slider-wrapper ul{
height: 100%; position: relative; }
.slider-wrapper ul li{
float: left;
width: 590px;
height: 470px; }
.slider-wrapper ul li a{
display: block;
width: 100%;
height: 100%;
}
.focus-img{
width: 590px;
height: 470px;
}
button{
position: absolute;
width: 24px;
height: 40px;
top: 50%;
line-height: 40px;
text-align: center;
background-color: rgba(0,0,0,.2);
color: white;
font-size: 30px;
border: 0;
outline: none;
cursor: pointer;
z-index: 99;
}
button.next{
right: 0;
}
button.prev{
left: 0;
}
.slider-index{
position: absolute;
bottom: 10px;
left:250px;
z-index: 2; }
.slider-index span{
display: inline-block;
width: 10px;
height: 10px;
border: 2px solid red;
border-radius: 50%;
}
.slider-index span.active{
background-color: orange;
} </style>
</head>
<body>
<div class="slider-list">
<div class="slider-wrapper">
<ul> </ul>
</div>
<button class="next">></button>
<button class="prev"><</button>
<div class="slider-index">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
<script type="text/javascript"> $(function(){
// 1.获取本地图片数据 590*470
let imgArr = ['./5.jpg','./1.jpg','./2.jpg','./3.jpg','./4.jpg','./5.jpg','./1.jpg']; // 获取图片的宽度
let imgWidth = 590;
let len = $('span').length; // 2.遍历数据 将图片添加到ul中
for(let i = 0;i < imgArr.length;i++){
let width = i*imgWidth;
$(`<li>
<a href="javascript:;">
<img src=${imgArr[i]} alt=${i}>
</a>
</li>`).appendTo('.slider-wrapper ul').addClass('slider-item') }
// 设置图片的类名
$('img').addClass('focus-img');
// 设置父盒子的总宽度
$('.slider-wrapper').width((imgArr.length+1)*imgWidth);
$('.slider-wrapper ul').width((imgArr.length+1)*imgWidth);
// 初始化
// 默认显示第一张图片
init();
function init(){
$("ul").css("left",-imgWidth);
}
// 下一张
$('button.next').click(function(event) {
next();
}); // 控制图片显示第几张
let count = 1;
function next(){ if (count ===len+1) {
count = 2;
$("ul").css("left",-imgWidth);
}else{
count++;
}
$('.slider-wrapper ul').stop().animate({left:-count*imgWidth},200);
// 控制轮播图索引改变颜色
if (count>len) {
$("span").eq(0).addClass("active").siblings("span").removeClass("active");
}else{ $("span").eq(count-1).addClass("active").siblings("span").removeClass("active");
} }
// 给小圆圈添加点击事件
$('span').click(function(){
//自己的样式
$(this).addClass("active").siblings("span").removeClass("active");
count = $(this).index()+1;
$("ul").animate({"left":-count*imgWidth},200);
});
setInterval(next,2000);
})
</script>
</body>
</html>
2、轮播二
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,ol{ list-style: none;}
.wrapper{
width: 580px;
height: 240px;
margin: 100px auto;
/*overflow: hidden;*/
position: relative;
}
.wrapper ul{
width: 100%;
height: 240px;
overflow: hidden; }
.wrapper ul li{
float: left;
width: 580px;
height: 240px;
}
ol{
position: absolute;
right: 0;
bottom: 10px;
width: 190px;
}
ol li{
float: left;
width: 20px;
height: 20px;
margin: 0 5px;
text-align: center;
border-radius: 50%;
cursor: pointer;
background-color: #abc;
}
ol li.current{
background-color: pink;
}
</style>
<script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 根据ol下li的索引号，匹配ul下相对应li的索引号
$(".wrapper ol li").mouseenter(function () {
$(this).addClass("current").siblings().removeClass("current");
$(".wrapper ul li").eq($(this).index()).stop().fadeIn("fast").siblings().stop().fadeOut();
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul>
<li><img src="./1.png" alt=""/></li>
<li><img src="./2.png" alt=""/></li>
<li><img src="./3.png" alt=""/></li>
<li><img src="./4.png" alt=""/></li>
<li><img src="./5.png" alt=""/></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
jQuery系列（十三）：实现轮播的更多相关文章
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- jQuery实现todo及轮播图
内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- jQuery美女幻灯相册轮播源代码
体验效果:http://hovertree.com/texiao/jquery/ 本幻灯片包含小图列表和大图轮播,包含图片标题和详细介绍,详细介绍字数可以很多,每张图片包含链接,可以实现跳转 HTML ...
- JQuery slidebox实现图片轮播
jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于jQuery的图片左右轮播，基本原理通用
毕竟新人,写点基础的小东西,希望能和大家沟通交流,提高自己的水平. 这个是应用较多的轮播部分,希望能和大家分享一下思路,拓宽视野. 话不多说,上内容. 我的思路很简单就是通过判断index值的大小变化 ...
随机推荐
- win10系统查看激活状态及是否永久激活
查看windows系统是否激活 找到“此电脑”,右击“属性” 查看windows系统是否永久激活 第一种方法 win+r 进入运行,输入slmgr.vbs -xpr 如图,再点击确定. 弹出一个对话 ...
- Inversion 多校签到题
存下值和下标后排序,每次从坐后面开始取就可以了. ac代码: #include <algorithm> #include <cstdio> #include <cstri ...
- vue中的键盘事件
@keydown(键盘按下时触发),@keypress(键盘按住时触发),@keyup(键盘弹起) 获取按键的键码 e.keyCode @keyup.13 按回车键 @keyup.enter ...
- java关键知识汇总
1.泛型理解 2.java或Java框架中常用的注解及其作用详解 3.三层架构和MVC的区别 4.jdk1.8手册(提取码:bidm) 5.Rocketmq原理&最佳实践 6.spring入门 ...
- c# 粘贴复制
复制 1. 复制 Clipboard.SetText("123456"); Clipboard.SetImage(Image img); Clipboard.SetAudio(Sy ...
- 记一次邮件推送的坑，c#基于smtp使用腾讯企业邮箱发送邮件总是失败的原因
今天在弄企业邮箱推送的东西,原版代码是这样的 public void SendEmail(string title, string content) { try { MailMessage mailM ...
- 关于微信小程序中的样式使用变量值的方法
在开发过程中,通常碰到样式非固定的情况,这时候就要使用变量来规定样式,例如,一个view的宽度需要使用变量: 1. 在wxss中,定义变量:width:var(--width--); 2. 在js中, ...
- Navicat for MySQL 设置定时任务（事件）
1.查询界面输入命令,查看定时任务是否开启,未开始时OFF: show variables like '%event_scheduler%'; 2. 查询界面输入命令,开启定时任务: set glob ...
- 【转】SpringBoot+SpringCloud实现登录用户信息在微服务之间的传递
实现思路: 1:准备一个ThreadLocal变量,供线程之间共享. 2:每个微服务对所有过来的Feign调用进行过滤,然后从请求头中获取User用户信息,并存在ThreadLocal变量中. 3:每 ...
- Emeditor代码编辑器常见的正则表达式总结
Emeditor 目前来说是我个人感觉非常不错的一款记事本软件, 其中查找替换功能由于支持正则表达式而显得非常强大. <tr[^>]*> 匹配:<tr xxxxxxxxxxxx ...