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. mybatis 简单的入门实例

    第一步:添加mybaties的架包 第二步:配置mybaties的文件 <?xml version="1.0" encoding="UTF-8" ?> ...

  2. 00_Rust安装及Hello World

    Rust 官网: https://www.rust-lang.org 版本:nightly.beta.stable 如何设计语言的讨论:https://github.com/rust-lang/rfc ...

  3. SprinMVC接收参数乱码解决篇

    1.Spring 默认的字符编码格式为iso-8859-1,为此Spring专门提供了字符过滤器org.springframework.web.filter.CharacterEncodingFilt ...

  4. 关于框架搭建-web

    最近一直在学习前端相关的东西,在学了一堆基础可以以及动手在某个前端框架上写了一些东西之后,我想尝试着开始自己搭建一个框架.不知道时间需要多久,但会持续更新.小菜鸟的成长记录. ------------ ...

  5. 【hiho一下 第144周】机会渺茫

    [题目链接]:http://hihocoder.com/contest/hiho144/problem/1 [题意] [题解] 找出两个数相同的因子的个数x 然后两个数各自的因子的个数numa,nub ...

  6. noip模拟赛 财富

    题目描述LYK有n个小伙伴.每个小伙伴有一个身高hi.这个游戏是这样的,LYK生活的环境是以身高为美的环境,因此在这里的每个人都羡慕比自己身高高的人,而每个人都有一个属性ai表示它对身高的羡慕值.这n ...

  7. 从SQL Server到MySQL,近百亿数据量迁移实战

    从SQL Server到MySQL,近百亿数据量迁移实战 狄敬超(3D) 2018-05-29 10:52:48 212 沪江成立于 2001 年,作为较早期的教育学习网站,当时技术选型范围并不大:J ...

  8. 怎样用Android Studio打多包名APK

    问题:项目中不同的分发渠道可能须要打包多种APK(相同的代码),包名可能是不一样的,假设一个一个改动包名又一次编apk是非常麻烦,能够參考下列步骤在Android Studio上操纵Gradle来打包 ...

  9. HDU 5392 BC #51

    就是求最大公倍数,但要用分解质因子求. 自己写的WA到爆.... #include<iostream> #include<stdio.h> #include<math.h ...

  10. UIView 的图层关系

    个人认为用字母取代这样的比較好理解,.给新人学习 addSubview是一层一层往上加,新加的仅仅能放到父视图的最上层, insertSubView能够控制它加入到父视图的哪一层  A addSubv ...