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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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
php max_execution_time执行时间问题
2011/07/17 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
PHP中使用curl入门教程
2015/07/02 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
详解js闭包
2014/09/02 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
python 统计代码行数简单实例
2017/05/04 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python正则表达式指南 推荐
2018/10/09 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
会计自我鉴定范文
2013/10/06 职场文书
毕业生求职简历的自我评价
2013/10/23 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
日语系毕业求职信
2014/07/27 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书