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">
<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>

时间： 2024-12-07 12:58:05

jQuery随机切换图片的小例子_jquery的相关文章

jquery实现简单易懂的图片展示小例子_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"> <

jquery插件validate验证的小例子_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时间下拉框小例子_jquery

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

最简单的定时随机切换图片

一共5张图,随机数算法[1,5]: 生成n-m,包含n和m的随机数: 第一步算出 m-n的值,假设等于w 第二步Math.random()*w 第三步Math.random()*w+n 第四步Math.round(Math.random()*w+n) 或者 Math.ceil(Math.random()*w+n) <!DOCTYPE HTML> <html><head><meta charset="utf-8"><title>

jQuery动态背景图片效果实现方法_jquery

本文实例讲述了jQuery动态背景图片效果实现方法.分享给大家供大家参考.具体如下: 这里把背景图片按照1.jpg - 20.jpg放到目录里,jQuery会随机调用这些图片作为背景 $(document).ready(function(){ bgImageTotal=20; randomNumber = Math.round(Math.random()*(bgImageTotal-1))+1; imgPath=('/my/image/path/'+randomNumber+'.jpg'); $

jQuery动画效果图片轮播特效_jquery

从这一章节开始,我将会为大家陆续的介绍利用Jquery完成特效动画.先来看看这一节所介绍的特效:传统轮播. 一.需求分析 1. 提供很多尺寸相等的图片,一排紧挨着显示. 2. 左右有两个切换按钮,用来控制显示上一张还是下一张. 3. 右下方有指示器"小圈圈",用来提示显示到第几个图片:也可以点击它,进行图片的切换. 4. 每隔一个固定的时间,图片会自动滚动. 5. 当鼠标放到图片上面的时候,会停止自动滚动:当鼠标离开后,再经过固定间隔时间后,又会自动播放. 二.代码剖析 1. 用htm

jQuery插件实现图片轮播特效_jquery

好了废话不多说了,先看看效果图.   HTML部分:    <div class="slider"> <div class="ul-box"> <ul> <li><a href="javascript:;"><img src="img/1.jpg"/></a></li> <li><a href="java

jQuery实现切换页面布局使用介绍_jquery

查看实例:DEMO  演示打包下载 XHTML 复制代码 代码如下: <a href="#" id="switch">切换布局</a> <div id="demo" class="showlist"> <div class="list"> <h3><a href="#">文章标题</a></h3&g

jQuery实现切换字体大小的方法_jquery

本文实例讲述了jQuery实现切换字体大小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $.fn.switchSize = function(settings) { // defaults settings settings = $.extend({     container: 'body',     arrSizeClass: ['small', 'medium', 'large'],     defaultClass: 'medium',     saveCook