jQuery实现图片简单轮播功能示例


Posted in jQuery onAugust 13, 2018

本文实例讲述了jQuery实现图片简单轮播功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>3water.com jQuery图片轮播</title>
    <style type="text/css">
      #frame{
        width:700px;
        height:300px;
        position:relative;
      }
      #img2,#img3{
        display:none;
      }
      .box{
        position:absolute;
        width:50px;
        height:50px;
        line-height:50px;
        text-align:center;
        color:white;
        font-family:Microsoft-Yahei;
        background:grey;
      }
      #move1{
        bottom:0;
        right:100px;
      }
      #move2{
        bottom:0;
        right:50px;
      }
      #move3{
        bottom:0;
        right:0;
      }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        n = 1;
        interval = setInterval(
          function(){
            $("img").hide();
            $("#img"+n).show();
            $(".box").css("background","grey");
            $("#move"+n).css("background","red");
            n = n % 3 + 1;
          }
          ,
          2000
        );
        $(".box").bind("click",function() {
          clearInterval(interval);
          n = $(this).attr("id").slice(4);
          interval = setInterval(
            function(){
              $("img").hide();
              $("#img"+n).show();
              $(".box").css("background","grey");
              $("#move"+n).css("background","red");
              n = n % 3 + 1;
            }
            ,
            2000
          );
        });
      });
    </script>
  </head>
  <body>
    <div id="frame">
      <div id="photos">
        <img id="img1" src="images/background1.png">
        <img id="img2" src="images/background2.png">
        <img id="img3" src="images/background3.png">
      </div>
      <div class="box" id="move1">1</div>
      <div class="box" id="move2">2</div>
      <div class="box" id="move3">3</div>
    </div>
  </body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun 测试运行效果(记得替换上述图片为网络图片)

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件之validation插件
Mar 29 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 #jQuery
jQuery中$原理实例分析
Aug 13 #jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 #jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 #jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 #jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 #jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 #jQuery
You might like
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php curl选项列表(超详细)
2013/07/01 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
Javascript String.replace的妙用
2009/09/08 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
微信小程序后端实现授权登录
2020/02/24 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python 字典与字符串的互转实例
2017/01/13 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
如何整合JQuery和Prototype
2014/01/31 面试题
制药工程专业毕业生推荐信
2013/12/24 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
运动会宣传稿50字
2015/07/23 职场文书
初一英语教学反思
2016/02/15 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
Node实现搜索框进行模糊查询
2021/06/28 Javascript
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS