简单的JQuery背景图自动切换

最新推荐文章于 2022-11-10 08:56:30 发布
最新推荐文章于 2022-11-10 08:56:30 发布
阅读量1.6k 收藏
点赞数
分类专栏： 编程笔记 文章标签： html jquery javascript

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>swapbackpicture</title>
<!--<link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jqplug/9/bgstretcher.css" />-->
    <style type="text/css">
        HTML {_background: url(/images/trans.gif) no-repeat fixed;}
        .bgstretcher-area { text-align: left; }
        .bgstretcher, .bgstretcher UL, .bgstretcher UL LI {
     position: absolute;
     top: 0;
     left: 0;
        }
        .bgstretcher UL, .bgstretcher UL LI {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .bgstretcher {
         background: black;
         overflow: hidden;
         width: 100%;
         position: fixed;
         z-index: 1;
         _position: absolute; /*IE6 doesn't support fixed positioning*/
         top: 0;
         left: 0;
}
    </style>
<script src="http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqplug/9/bgstretcher.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        // Initialize Backgound Stretcher   
        $('BODY').bgStretcher({
            images: ['images/1.jpg'
            , 'images/2.jpg'
            , 'images/3.jpg'
            , 'images/4.jpg'
            , 'images/1.jpg'
            , 'images/2.jpg'],
            imageWidth: 1024,
            imageHeight: 768,
            slideDirection: 'N',
            slideShowSpeed: 1000,
            transitionEffect: 'fade',
            sequenceMode: 'normal',
            buttonPrev: '#prev',
            buttonNext: '#next',
            pagination: '#nav',
            anchoring: 'left center',
            anchoringImg: 'left center'
        });

    });
</script>
<!--<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqplug/9/main.js"></script>-->
</head>
<body>
</body>
</html>

reikocao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery动态切换背景图片的简单实现方法
10-22
使用jQuery这个流行的JavaScript库，我们可以非常简单地实现背景图片的动态切换效果。下面将详细讲解jQuery动态切换背景图片的实现方法及相关知识点。 首先，了解jQuery自定义函数。jQuery允许开发者编写自定义的...
JQuery自动更换背景图
weixin_44167504的博客
10-13 1047
JQuery自动更换背景图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>更换背景图</title> <style> #box { width
jquery实现自动切换背景
lswoqsked的博客
04-28 708
<?xml version="1.0"?>   <form action="#"><div> <div class="column"> <div class="row"> <select id="effect"> <optio...
JS+JQuery自动切换背景颜色
weixin_45746054的博客
10-22 490
**JS+JQuery自动切换背景颜色 效果图 HTML代码` <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jQuery.js"></sc...
jQuery 背景切换
qq3305559894的博客
05-08 2108
今天我要分享的jQuery 背景切换事件的知识点 首先创建一个文件夹，准备好三张图片，创建html文档，放置一个div标签包裹三个img标签，div添加ID，把三张图片载入，如下图所示； 第二步，写Css代码用通配符把边距设置为零，如下图所示； 第三步，在body标签设置背景图，如下图所示； 第四步，给div标签设置透明背景，如下图所示； 第五步，在设置图片大小，如下图所示如下图所示； 最后，引用JQ文件和代码给img标签绑定点击事件，点击图片在body里显示图片，...
JQuery实现图片切换（自动切换+手动切换）
最新发布
m0_72345017的博客
11-10 1483
/以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮。//显示图片函数，根据接收的index值显示相应的内容。
jquery实现简单自动轮播图效果
10-15
本文将深入探讨如何使用 jQuery 实现一个简单的自动轮播图效果。 首先，我们来分析给出的 HTML 结构。轮播图的核心部分包含了一个 `id` 为 "box" 的容器，其中包含三个子元素：一个用于展示图片的 `ul`（class 为 ...
jquery特效背景图片自动轮播效果源码下载
11-24
本资源提供了一套基于jQuery实现的背景图片自动轮播效果源码，适用于网站头部、主体或者任何需要背景动态展示的区域。下面我们将详细探讨该源码的工作原理及实现方式。 一、jQuery基础 jQuery是一个轻量级的...
Jquery实现图片左右自动滚动示例
10-26
在本示例中，我们将探讨如何使用jQuery实现图片的左右自动滚动效果。这种效果常见于网站的轮播图或图片展示区域，能够增加用户界面的动态性和吸引力。以下是实现这一功能的关键步骤和涉及的技术点： 1. **HTML结构*...
jquery背景自动切换特效特效代码
03-20
实现背景自动切换，我们可以首先准备一组背景图片，并将它们的URL存储在一个数组中。例如： ```javascript var backgroundImages = ['image1.jpg', 'image2.jpg', 'image3.jpg']; ``` 接下来，我们使用jQuery的`....
jquery背景图片轮播特效.zip
07-04
jquery背景图片轮播特效是一款支持图片左右滑动，图片自动播放，带左右控制按钮。
jQuery实现随机变换背景图片
ArikaKirihara的博客
07-10 458
简单社区网站发帖页面的一点小心思，为了防止无聊（？）设置了每一分钟换一次背景图片 //存储背景图片路径 var pictures = new Array(); pictures[0] = "./images/background1.jpg"; pictures[1] = "./images/background2.jpg"; pictures[2] = "./images/background3.jpg"; pictures[3] = "./images/background4.jpg"; //设置计时器
html自动变换图片,jQuery实现的全屏背景图片动态自动切换效果_脚本之家
weixin_31542739的博客
05-30 420
jbgallery 2.0 BETAjbgallery is a UI widget webpage written in javascript on top of the jQuery library.Its function is to show a single big image, multiple images, multiple galleries, slideshows, as a ...
jQuery实现页面背景随机切换
wml
11-11 2987
jQuery实现页面背景随机切换 .back { position: absolute; width: 1000px; height: 100px; background-size: cover; } $(document).ready(function(){ var imgArr=["bg001.jpg", "bg002.png", "bg003.png"
JS 实现背景图片的自动变换（设定每3秒变化一次）
woyizhidouzai0505的专栏
11-16 2万+
下面写两种情况： 第一种是有几张
通过Jquery实现背景图的轮换
Tertiary_grass
05-04 5273
本文主要使用Jquery实现背景图的缓慢显隐，变换。
定时循环切换背景图片
z_l_ming的专栏
06-08 4913
这里设置的是每隔5s 切换背景图片 一直无限循环下去；var t = 0; function setBackground(){ switch (t%4){ case 0 : { $('body').css("background","url('page_1.jpg') no-repeat center center fixed");
HTML中如何自动切换页面背景图片
热门推荐
qq_34129336的博客
08-25 4万+
附js主要代码： 一、切换body图片   var curIndex = 0; //时间间隔(单位毫秒)，每秒钟显示一张，数组共有3张图片放在img文件夹下 var timeInterval = 1000;                         //定义一个存放照片位置的数组，可以放任意个，在这里放3个 var arr = new Array(); arr[0] = "i
jQuery实现焦点图片切换：手动/自动播放与横向滚动
本篇文章主要介绍了如何使用jQuery插件实现焦点图片的切换功能，包括数字标注、手动控制、自动播放以及横向滚动。在提供的`demo01.html`示例代码中，开发者展示了如何在一个网页中集成jQuery库（版本1.8.0）和一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值