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实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
Jquery获取radio选中的值
May 05 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jquery实现拖拽添加元素功能
Dec 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
简明json介绍
2008/09/28 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
Python魔术方法详解
2015/02/14 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Python restful框架接口开发实现
2020/04/13 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
了解AppleTalk协议吗
2014/04/01 面试题
员工廉洁自律承诺书
2014/05/26 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript