用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. leetcode 40. 组合总和 II (python)

    给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在每个组合中只能使用一次. ...

  2. mysql转化时间戳毫秒到秒

    其实我感觉都不值得写一篇随笔的,但是呢,我就是想写 其实就是截取毫秒时间戳的前十位就是我们是秒时间戳啦 update 表 set 表字段 = substr(表字段,1,10) 好简单 嫌弃中

  3. 搭建spring项目，无法创建RequestMappingHandlerMapping异常

    异常详情: Error creating bean with name 'org.springframework.web.servlet.mvc.method.annotation.RequestMa ...

  4. iView 实战系列教程(21课时)_3.iView 实战教程之布局篇（一）

    Grid布局 先了解一下iview的24栅格布局 清理一下App.vue 然后从iview的color里面获取推荐的背景色 我们先渲染栅格 24列,然后再讲解他是一个什么东西: 栅格外面row包裹的, ...

  5. Java面试中hashCode（）与equals（Object obj）方法关系的准确回答

    原文地址: https://blog.csdn.net/qq_19260029/article/details/77917925 hashCode()与equals(Object obj)都是Java ...

  6. centos 7 lnmp环境编译安装zabbix-3.4.14

    一.安装环境(zabbix3.0需要php在5.5版本以上) [root@localhost ~]# cat /etc/redhat-release CentOS Linux release (Cor ...

  7. Http中Content-Type的取值讲解

    一.Content-Type的取值 在Http请求中,我们每天都在使用Content-type来指定不同格式的请求信息(MediaType,即是Internet Media Type,互联网媒体类型: ...

  8. [CCPC－Wannafly & Comet OJ 夏季欢乐赛(2019)]飞行棋

    题目链接:https://www.cometoj.com/contest/59/problem/E?problem_id=2714 求期望并且一堆转移基本上就是期望dp了(叉腰 照常的设dp[i]表示 ...

  9. python 搜索路径顺序查找

    但我们通过 import 或者frome .. import...查找模块的时候,当你导入一个模块,Python 解析器对模块位置的搜索顺序是 1.当前目录 2, 如果不在当前目录,Python 则搜 ...

  10. Python学习第四十天函数的装饰器用法

    在软件开发的过程中,要遵循软件的一些原则封装的,不改变原有的代码的基础增加一些需求,python提供了装饰器来扩展函数功能,下面说说函数装饰器用法 def debug(func):      def ...