1.首先看一下目录结构

images文件夹放所需要播放的图片。

js文件夹放jquery库和main.js

2.html代码:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery slideShow</title>
<style>
*{margin: 0;padding: 0}
ul,ol{list-style: none;}
.slideShow{position: relative;margin: 100px auto;height: 140px;width: 340px;overflow: hidden;}
.slideShow ul{ position: relative;width: 2000px; }
.slideShow ul li{float: left;width: 340px}
.slideShow .nav{text-align: center;position: absolute;right: 10px;bottom: 10px;font-size: 12px;line-height: 18px;}
.slideShow .nav span{ -webkit-user-select:none;user-select:none;float: left;cursor: pointer;border-radius: 9px;display: inline-block;width: 18px;height: 18px;background:rgba(0,0,0,0.7);margin-left: 2px;color: #fff;opacity: 0.5;}
.slideShow .nav span.active{opacity: 1;}
</style>
</head>
<body>
<div class="slideShow">
<ul>
<li><a href="#"><img src="./images/01.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/02.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/03.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/04.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/05.jpg" alt=""></a></li>
</ul>
<div class="nav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

3.main.js代码:

 $(document).ready(function(){
var slideShow = $(".slideShow"), //获取div
ul=slideShow.find("ul"),
nav=slideShow.find(".nav span"), //获取按钮
oneWidth=ul.find("li").eq(0).width(),
timer=null,
iNow=0;
slideShow.hover(function(){
clearInterval(timer);
},autoPlay); nav.on("click",function(){ //添加点击按钮
var me=$(this),
index=me.index();
iNow=index;
ul.animate({
"left":- oneWidth * iNow,
});
nav.removeClass("active");
me.addClass("active");
}); autoPlay();
function autoPlay(){
timer = setInterval(function(){
iNow++;
if(iNow>nav.length-1){
iNow=0;
}
nav.eq(iNow).trigger("click");
},2000);
}
});

4.效果图

当然了,大小可以利用CSS自己进行调整!

声明:代码非原创,取自网络。

使用JQuery制作幻灯片(轮播图)的更多相关文章

  1. [vuejs短文]使用vue-transition制作小小轮播图

    提示 本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中 也有可能会上线,方便看效果 开始制作 超简易呼吸轮播 简单粗暴的使 ...

  2. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  3. 用jQuery写的轮播图

    效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...

  4. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  5. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  6. (数据科学学习手札90)Python+Kepler.gl轻松制作时间轮播图

    本文示例代码及数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 Kepler.gl作为一款强大的开源地理信 ...

  7. 用JavaScript制作banner轮播图

    JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...

  8. H5制作显示轮播图的方法Swiper

    1.需要引入Swiper插件 <!-- swiper插件 --> <link rel="stylesheet" href="https://unpkg. ...

  9. JQuery实现一个轮播图

    1.HTML <div class="banner"> <div class="b_main"> <div class=" ...

随机推荐

  1. 如何知道自己的CPU支持SLAT

    因为WP8 SDK发布,很多WP8的开发者们也开始陆续安装WP8的SDK的,然而安装WP8的SDK有很多软件和硬件的要求,其中有一个就是——要求CPU支持二级地址转换(SLAT),如果CPU不支持二级 ...

  2. 1、DataGridView

    DataGridView赋值后 通过RowPostPaint事件绘制行号 private void AddXh() { DataGridViewTextBoxColumn col = new Data ...

  3. Luogu P2970 [USACO09DEC]自私的放牧

    https://www.luogu.org/problemnew/show/P2970 P2970 [USACO09DEC]自私的放牧 题目描述 Each of Farmer John's N (1 ...

  4. 求n!(高精度问题)

    #include <iostream> #include <stdio.h> #define MAX 10000 using namespace std; void Mul(i ...

  5. web开发如何使用百度地图API(一)判断点是否在范围内

    准备工作 注册开发者 创建应用 拿到百度地图ak 前端实现方案 引入百度地图API和工具类库 <script type="text/javascript" src=" ...

  6. (40). springboot + devtools(热部署)【从零开始学Spring Boot】

    我们之前在在()Spring Boot热部署[从零开始学Spring Boot] (http://412887952-qq-com.iteye.com/blog/2291518 )讲过通过使用spri ...

  7. 如何修改cnblogs的文本编辑器

    我发现从别处复制过来的文本,文字上下间隔太大,所以我点击“html”标签,然后,把html内容复杂到记事本里,用记事本替换的功能,把“<p>”替换为“<p style="p ...

  8. [cf 599A]Patrick and Shopping

    傻逼题,但是我还是wa了一发. #include <iostream> using namespace std; int main() { long long a,b,c,Ans=0x7f ...

  9. CODEVS1533 Fibonacci数列 (矩阵乘法)

    嗯,,,矩阵乘法最基础的题了. Program CODEVS1250; ..,..] of longint; var T,n,mo:longint; a,b:arr; operator *(a,b:a ...

  10. jquery easyui datagrid实现数据改动

    1.单击选中待改动行 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA= ...