用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. SpringBoot 切换国际化

    git:https://github.com/xiaozhuanfeng/demoProj 代码结构: application.properties: spring.messages.basename ...

  2. 使用@Value注解对bean进行属性注入

    使用@Value注解,可以有三种属性注入的方式: 1. 使用字面量注入 2. 使用EL表达式注入 3. 使用占位符注入 import org.springframework.beans.factory ...

  3. Mac 10.14 下为php 安装xdebug 并让vscode支持

    安装Xdebug 寻找对应php版本的xdebug版本 先将info输出到一个文件 php -i > info.txt 打开info.txt 复制所有内容 打开寻找合适xdebug的页面http ...

  4. node+express 中安装nodemon实时更新server.js

    每次启动node server.js,有一个缺点,每次server.js文件有改动时,必须重新执行指令node server.js,新的代码才会起作用 解决方案1 全局安装 npm install s ...

  5. [Python3] 005 列表的基本使用

    目录 1. 列表概述 2. 创建列表 3. 列表常用操作 (1) 访问列表 (2) 分片操作 1) 正向操作 2) 反向操作 3) 内置函数 id() 加入队伍 1. 列表概述 一组有顺序的数据的组合 ...

  6. 《剑指offer》面试题16 反转链表 Java版

    (输入链表的头节点,反转链表) 书中方法:对于一个链表,我们只能从头往后遍历,如果要反转,我们需要更改当前节点的next域指向前一个节点,此时链表断开,为了能继续修改下一个节点的next域,我们还要维 ...

  7. Kubeadm安装Kubernetes 1.15.1

    一.实验环境准备 服务器虚拟机准备 IP CPU 内存 hostname 192.168.198.200 >=2c >=2G master 192.168.198.201 >=2c ...

  8. UVA 12849 Mother’s Jam Puzzle( 高斯消元 )

    题目: http://uva.onlinejudge.org/external/128/12849.pdf #include <bits/stdc++.h> using namespace ...

  9. 2019 Multi-University Training Contest 2 - 1009 - 回文自动机

    http://acm.hdu.edu.cn/showproblem.php?pid=6599 有好几种实现方式,首先都是用回文自动机统计好回文串的个数. 记得把每个节点的cnt加到他的fail上,因为 ...

  10. spark复习笔记(3)

    在windows上实现wordcount单词统计 一.编写scala程序,引入spark类库,完成wordcount 1.sparkcontextAPI sparkcontext是spark功能的主要 ...