用jquery简单实现图片轮播效果，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        .slideShow {

            width: 600px;

            height: 350px; /*其实就是图片的宽度和高度*/

            border: 1px #eeeeee solid;

            margin: 100px auto;

            position: relative;

            overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/

        }

        .slideShow ul {

            width: 3000px;

            position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/

        }

        .slideShow ul li {

            float: left; /*让五张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/

            width: 600px;

        }

        .slideShow .showNav {

            position: absolute; /*用绝对定位给数字按钮进行布局*/

            right: 10px;

            bottom: 5px;

            text-align: center;

            font-size: 12px;

            line-height: 20px;

        }

        .slideShow .showNav span {

            cursor: pointer;

            display: block;

            float: left;

            width: 20px;

            height: 20px;

            background: #ff5a28;

            margin-left: 2px;

            color: #fff;

        }

        .slideShow .showNav .active {

            background: #b63e1a;

        }

    </style>

</head>

<body>

<div class="slideShow">

    <ul>

        <li><a href="#"><img src="data:image/pic1.png" alt=""></a></li>

        <li><a href="#"><img src="data:image/pic2.png" alt=""></a></li>

        <li><a href="#"><img src="data:image/pic3.png" alt=""></a></li>

        <li><a href="#"><img src="data:image/pic4.png" alt=""></a></li>

        <li><a href="#"><img src="data:image/pic5.png" alt=""></a></li>

    </ul>

    <div class="showNav">

        <span class="active">1</span>

        <span>2</span>

        <span>3</span>

        <span>4</span>

        <span>5</span>

    </div>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var slideShow = $(".slideShow"),    //获取最外层框架的名称

                ul = slideShow.find('ul'),

                showNumber = slideShow.find('.showNav span'),   //获取按钮

                oneWidth = slideShow.find('ul li').eq(0).width();   //获取每个图片的宽度

            var timer = null;   //定时器返回值，主要用于关闭定时器

            var iNow = 0;   //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0

            showNumber.on('click', function () {     //为每个按钮绑定一个点击事件

                $(this).addClass('active').siblings().removeClass('active');    //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉

                var index = $(this).index();    //获取哪个按钮被点击，也就是找到被点击按钮的索引值

                iNow = index;

                ul.animate({'left': -oneWidth * iNow,})   //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定

            });

            function autoplay() {

                timer = setInterval(function () {   //打开定时器

                    iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片

                    if (iNow > showNumber.length - 1) {  //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始

                        iNow = 0;

                    }

                    showNumber.eq(iNow).trigger('click');   //模拟触发数字按钮的click

                }, 2000);    //2000为轮播的时间

            }

            autoplay();

            slideShow.hover(function () {

                clearInterval(timer);

            }, autoplay())

        })

    </script>

</div>

</body>

</html>　　

未完待续。。。

用jquery实现图片轮播的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  3. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  4. （转）jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 基于jquery的图片轮播 （IE8以上）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. jQuery实现图片轮播

    之前有碰到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号,效果如下: 先看一看html代码,以及对应的css代码: < ...

  7. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  8. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  9. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  10. html css+div+jquery实现图片轮播

    一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...

随机推荐

  1. 在自定义组件中获取spring底层组件

    要想在自定义组件中获取spring底层的各种组件,只需让自定义组件实现一系列接口即可,这些接口都是Aware的子接口.常见的有: 1. ApplicationContextAware——用于获取IOC ...

  2. deepin 安装tar.gz

    由于网上推荐的比较多的安装方式是:sudo apt-get install mysql-server mysql-client,这个安装的是mysql5.7,既然都安装了就要安装最新的,所以从官网下载 ...

  3. csr_matrix用法

    1 csr_matrix默认对未填充的位置置为0, row = [0, 0, 0, 1, 1, 1, 2, 2, 2] # 行指标 col = [0, 1, 2, 0, 1, 2, 0, 1, 2] ...

  4. 解决旋转屏幕闪退在androidManifest.template.xml里，activity项添加：

     解决旋转屏幕闪退在androidManifest.template.xml里,activity项添加:android:configChanges="orientation|keyboard ...

  5. 解决Delphi窗体缩放の疑难杂症

    http://anony3721.blog.163.com/blog/static/511974201082235754423/ 解决Delphi窗体缩放の疑难杂症 2010-09-22 15:57: ...

  6. Linux - 创建交换分区 swap

    购买的 1GB 内存的 Linux 小机器,在编译安装 PHP 的时候内存捉急,只好开启 swap 交换分区来增大内存. [root@VM_139_38_centos php-7.2.12]# cat ...

  7. Sql Server 之游标

    一般来说,我们通过SQL一般是面向集合进行数据操作,但是游标提供给我们更加强大的功能可以对数据集合进行逐行遍历有选择性的操作处理.当然游标也有其不可避免的缺陷就是:低效和复杂.所以一般正常的操作处理不 ...

  8. Oracle数据库的特点与工作原理

    Oracle数据库的特点 1.开放性: Oracle能在所有主流平台上运行(包括Windows),完全支持所有的工业标准,采用完全开放策略,可以使客户选择最适合的解决方案,对开发商全力支持. 2.可伸 ...

  9. Water Tree CodeForces 343D 树链剖分+线段树

    Water Tree CodeForces 343D 树链剖分+线段树 题意 给定一棵n个n-1条边的树,起初所有节点权值为0. 然后m个操作, 1 x:把x为根的子树的点的权值修改为1: 2 x:把 ...

  10. 【focus-lei 】微服务

    随笔分类 - 微服务 .net core使用NLog+Elasticsearch记录日志 摘要:在微服务或分布式系统中,如果将日志作为文件输出,查看系统日志将非常不便:如果将日志保存到数据库中,又不能 ...