用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. 20160513--js 弹出窗口带有iframe控件 备忘

    需要引用JQuery. /*! * 主 题:<页面弹出窗口> * 说 明:用于页面弹出的窗口. * 功能描述: * 1.生成弹出窗口,窗口内包括iframe控件: * 2.窗口弹出时,生成 ...

  2. 阶段1 语言基础+高级_1-3-Java语言高级_03-常用API第二部分_第6节 基本类型包装类_1_包装类的概念

    只有这两个比较特殊

  3. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_06 Set集合_1_HashSet集合介绍

    特点:不允许有重复的记录,无序的集合 set不允许重复.接口中没有索引.所以方法和Collection中的方法是一样的,没有带索引的方法 因为Set的方法和Collection都是一样的.所以这里不再 ...

  4. python学习笔记（数据类型）

    python数据类型: int 类型 float 小数类型 string 字符串 布尔类型 a = True b = False 1.列表,也称数组或list或array.它的表达方式通过下标或索引或 ...

  5. oracle 11g 数据库恢复技术 ---04 rman

    四 RMAN RMAN体系结构的主要组成部分: --1 目标数据库(target) --2 RMAN命令行客户端 --3 通道(channel) --4 快速恢复区(fast recovery are ...

  6. python函数及调用

    python的函数是一段重复多次可调用的代码,依据python的函数,我们可以利用函数式的编程,来减少代码的重复. 在本章节中,详细的介绍python的函数,以及python的函数式编程的与众不同,函 ...

  7. Matlab入门基础

    matlab入门篇,一些基础用法记一下~ M语言是解释型语言 ​ who:查看当前变量 ​ whoes:查看当前变量及其维数.所占字节数等. ​ clear: 清除所有变量 ​ clear + 变量名 ...

  8. 002--PowerDesigner显示注释comment

    PowerDesigner显示注释comment 参考博客:https://blog.csdn.net/chao_1990/article/details/52620206 原始样式 显示操作 调出执 ...

  9. docker--docker版本以及安装

    3 docker 版本以及安装 3.1 docker 版本介绍 https://www.docker.com/ Docker CE 在 17.03 版本之前叫 Docker Engine, Docke ...

  10. Web API 入门三(参数绑定)

    学到现在,感觉到微软的.NET各种框架和模型基础大致都差不多,所以,这部分内容大致和MVC部分差不多.在学习参事绑定之前,我们肯定要知道Controller(即控制器)是啥干啥的. 其实,Contro ...