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实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery实现动态加载瀑布流
Sep 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
php4的彩蛋
2006/10/09 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
python实现广度优先搜索过程解析
2019/10/19 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
python实现猜拳游戏项目
2020/11/30 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
三月学雷锋月活动总结
2014/04/28 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
mysql函数全面总结
2021/11/11 MySQL
Python集合set()使用的方法详解
2022/03/18 Python