📄 pic-api.html

📁 JavaScript 图片切换效果

💻 HTML

字号:

<!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>Picture switch API</title>
<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="master.css">
<script type="text/javascript" src="jquery-1.2.6.js"></script>

<link rel="stylesheet" href="picSwitch.css" type="text/css"></link>
<script type="text/javascript" src="picSwitch.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$("#banner").picSwitch({
						imgs: "imgs/1.png,imgs/2.png,imgs/3.png,imgs/4.png",
						links: "",
						holdTime: 2
					});
	});
</script>

</head>

<body>
<div id="imitate-body" class="imitbd">
    <div id="warpper">
        <div id="content">
            <h5>picSwitch</h5>
            <p>取得一个匹配元素，创建图片展示的容器</p>
            <p>控制条功能:</p>
            <ul>
                <li>1. 暂停或开始 自动播放</li>
                <li>2. 点击切换</li>
                <li>3. 控制条移动</li>
            </ul>
            <p>例: 指定一 <i>id="banner"</i> 的 <i>div</i> 元素，规定其 高&宽 </p>
            <ul>
                <li>$("#banner").picSwitch({</li>
                <li>
                    <ul>
                        <li>imgs: "", <span>// 图片地址之间用 ","(逗号) 分割多个地址</span></li>
                        <li>links: "", <span>// 对应图片的链接地址 ","(逗号) 分割多个地址。 可为空，默认不可点击</span></li>
                        <li>holdTime: 3 <span>// 切换的等待时间。可为空，默认为 4</span></li>
                    </ul>
                </li>
                <li>})</li>
            </ul>
            <div id="banner"></div>
        </div>
    </div>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -