jQuery随机切换图片的小例子

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    img
    {
       width:200px; height:200px;
        }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                var num = Math.floor(Math.random() * 8 + 1);
             $('img').attr('src','picture/'+num+'.jpg')
            })
        })
    </script>
</head>
<body>
<img src="picture/1.jpg" id="img1" />
<input id="btn1" type="button" value="变换" />
</body>
</html>

赞 (0)

相关推荐

  • Jquery实现点击切换图片并隐藏显示内容(2种方法实现)

    我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢? 我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏.于是就有了题目说的这个问题. 其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结. 这里我想到了两种方法,给大家分享一下. 好了不多说,下面看代码: 第一种,是常规的方法: [javascript] 复制代码 代码如下: $(function(){ var images = ['

  • jQuery 一个图片切换的插件

    jQuery 一个图片切换的插件

    以下是参数说明:  参数名称  描述  delay  图片切换速度,单位毫秒  maskOpacity  遮罩层透明度,1为不透明,0为全透明  numOpacity  数字按钮透明度,1为不透明,0为全透明  maskBgColor  遮罩层背景色  textColor  标题字体颜色  numColor  数字按钮字体颜色  numBgColor  数字按钮背景色  alterColor  数字按钮选中项字体颜色  alterBgColor  数字按钮选中项背景颜色插件代码及调用 - 插件名

  • jquery淡化版banner异步图片文字效果切换图片特效

    复制代码 代码如下: <pre code_snippet_id="280064" snippet_file_name="blog_20140408_1_8982765" name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

  • jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】

    jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】

    本文实例讲述了jQuery实现最简单的切换图效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>最简单的切换图</title> <!-- 兼容IE6+ 兼容火狐 兼容谷歌 兼容欧朋 --> </head> <body> <

  • Jquery实现动态切换图片的方法

    本文实例讲述了Jquery实现动态切换图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • 一个基于jquery的图片切换效果

    一个基于jquery的图片切换效果

    下面的代码对于学习jquery的朋友是个参考html代码: 代码 复制代码 代码如下: <div class="warp" id="warp"> <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic1.bmp" alt="" class="imgBig" /> <img src="ht

  • 基于Jquery的简单图片切换效果

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascrip

  • jQuery+css实现的切换图片功能代码

    jQuery+css实现的切换图片功能代码

    本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <script type="text/javascript" src="jquery.js"></script> <style type="t

  • jQuery随机切换图片的小例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></titl

  • jquery实现简单易懂的图片展示小例子

    HTML代码: 复制代码 代码如下: <body> <div style="overflow:hidden;width:360px;height:225px;position:absolute;top:30px;" id="div"> <div style="width: 360px; height: 900px; position: relative;" id="imgCon"> <

  • Django1.7+JQuery+Ajax验证用户注册集成小例子

    Django1.7+JQuery+Ajax验证用户注册集成小例子

    Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时,用户名存在不存在的一个小应用.注意,验证存在不存在使用的是Ajax的方式,不用让用户点击按钮验证是否存在. 截图如下: 页面HTML代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta

  • jquery插件validate验证的小例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></titl

  • jquery时间下拉框小例子

    一.调用jSelectDate.js文件 二.页面调用 复制代码 代码如下: <script type="text/javascript"> $("body").ready(function(){ $("input.date").jSelectDate({ css:"date", yearBeign: 1995, disabled : true }); }) </script> 三.input选项框调用

  • js同比例缩放图片的小例子

    复制代码 代码如下: function DrawImage(ImgD, FitWidth, FitHeight) {    var image = new Image();    image.src = ImgD.src;    if (image.width > 0 && image.height > 0) {        if (image.width / image.height >= FitWidth / FitHeight) {            if (

  • jQuery实现图片随机切换、抽奖功能(实例代码)

    jQuery实现图片随机切换、抽奖功能(实例代码)

    效果图: 源代码: HTML: <body> <!-- 小像框 --> <div id="div1"> <img id="xiaoImgID" src="img/mei0.jpg"> </div> <!-- 开始按钮 --> <input id="startID" type="button" value="开始"

  • jquery实现焦点图片随机切换效果的方法

    jquery实现焦点图片随机切换效果的方法

    本文实例讲述了jquery实现焦点图片随机切换效果的方法.分享给大家供大家参考.具体如下: 1. 运行效果如下图所示: 2.完整实例代码点击此处本站下载. 3.完整代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">     <title>Slides, A Slideshow Plugin f

  • jquery的幻灯片图片切换效果代码分享

    jquery的幻灯片图片切换效果代码分享

    本文实例讲述了jquery的幻灯片图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于jquery的幻灯片图片切换效果代码,有缩略图和标题,可以自定义标题. 运行效果图:     -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <LINK rel=stylesheet type=text/css href="css/lrtk.css&quo

  • js实现网页随机切换背景图片的方法

    本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB

随机推荐