<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
{
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
all ol licurrent {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 03;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<!--相框-->
<div class="screen">
<ul>
<li>
<img src="images/41jpg" width="500" height="200" />
</li>
<li>
<img src="images/42jpg" width="500" height="200" />
</li>
<li>
<img src="images/43jpg" width="500" height="200" />
</li>
<li>
<img src="images/44jpg" width="500" height="200" />
</li>
<li>
<img src="images/45jpg" width="500" height="200" />
</li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<!-- <script src="commonjs"></script> -->
<script>
function my$(id) {
return documentgetElementById(id);
}
function setInnerText(element, content) {
if (typeof elementtextContent === "undefined") {
//IE浏览器
elementinnerText = content;
} else {
elementtextContent = content;
}
}
function animate(element, target) {
//先干掉定时器
clearInterval(elementtimeId);
elementtimeId = setInterval(function () {
//时时的获取元素的当前的位置
var current = elementoffsetLeft;
//每次移动的步数
var step = 10;
//设置每次移动的步数是正数还是负数
step = current < target step : -step;
//移动后的当前的位置
current += step;
if (Mathabs(target - current) > Mathabs(step)) {
elementstyleleft = current + "px";
} else {
clearInterval(elementtimeId);
elementstyleleft = target + "px";
}
}, 20);
}
//获取最外面的div
var box = my$("box");
//获取相框
var screen = boxchildren[0];
//获取相框的宽度
var imgWidth = screenoffsetWidth;
//获取ul
var ulObj = screenchildren[0];
//获取ul中的li
var ulLiObj = ulObjchildren;
//获取ol
var olObj = screenchildren[1];
//获取的是左右焦点的div
var arr = my$("arr");
//获取左边的按钮
var left = my$("left");
//获取右边的按钮
var right = my$("right");
var pic = 0;
//页面加载后先创建小按钮,根据ul中的li个个数来创建li,把li加入到ol中
for (var i = 0; i < ulLiObjlength; i++) {
//创建li
var liObj = documentcreateElement("li");
//把li加入到ol中
olObjappendChild(liObj);
setInnerText(liObj, (i + 1)); //兼容代码
//为每个ol中的li添加一个自定义属性存储索引值
liObjsetAttribute("index", i);
//为每个li注册鼠标进入事件
liObjonmouseover = function () {
//先把ol中所有的li的背景颜色全部干掉
for (var j = 0; j < olObjchildrenlength; j++) {
olObjchildren[j]removeAttribute("class");
}
//设置当前鼠标进入的li有背景颜色
thisclassName = "current";
//移动ul
//获取鼠标进入的ol中的li的索引值
pic = thisgetAttribute("index");
animate(ulObj, -pic imgWidth);
};
}
//第一个标签设置颜色
olObjchildren[0]className = "current";
//追加一个到ul中
ulObjappendChild(ulObjchildren[0]cloneNode(true));
//页面加载之后自动移动
var timeId = setInterval(f1, 1000);
//鼠标进入
boxonmouseover = function () {
arrstyledisplay = "block";
clearInterval(timeId);
}
//鼠标离开
boxonmouseout = function () {
arrstyledisplay = "none";
timeId = setInterval(f1, 1000);
}
//右边焦点
rightonclick = f1;
function f1() {
//判断是否到达最后一张
if (pic == ulLiObjlength - 1) {
//跳转到第一张
pic = 0;
ulObjstyleleft = -pic imgWidth + "px";
}
pic++;
//调用动画函数
animate(ulObj, -pic imgWidth);
//刷一遍
for (var i = 0; i < olObjchildrenlength; i++) {
olObjchildren[i]removeAttribute("class");
}
//第一个按钮的颜色
if (pic == ulLiObjlength - 1) {
olObjchildren[0]className = "current";
} else {
olObjchildren[pic]className = "current";
}
};
//左边焦点
leftonclick = function () {
//判断是否到达第一张
if (pic == 0) {
//跳转到第六张
pic = ulLiObjlength - 1;
ulObjstyleleft = -pic imgWidth + "px";
}
pic--;
//调用动画函数
animate(ulObj, -pic imgWidth);
//刷一遍
for (var i = 0; i < olObjchildrenlength; i++) {
olObjchildren[i]removeAttribute("class");
}
olObjchildren[pic]className = "current";
}
</script>
</body>
</html>
stop停止动画队列具体参数查下jquery手册,removeClass移除某个class属性的值eq是查找$("#focus btn span")
的索引是index的元素让他停止动画队列再给他加上class为on的值
具体的意思就是先停止所有$("#focus btn span")的动画让他们的class全部不为on
再让$("#focus btn span")
的索引等于index的元素加上class为on的值
en英文
zh-CN中文
ja-jp日文
<！-- -- >注释
<p></p>分段
<br>强制换行
<ins></ins>下划线
<hr/>水平线
<strong></strong>强调突出内容
<em></em>强调倾斜内容
<del></del>删除线
<sub></sub>下际
<sup></sup>上际
<；大于号
>；小于号
&emsp；空格
&trade；TM
®；®
©；©
&；&
¥；￥
°；摄氏度
color=""水平线颜色
width=""水平线宽度
align=""水平线方向，left左，right右
noshade="noshade"水平线默认阴影消除
<img src＝" " alt＝" ">
相对路径 / /
绝对路径 去网络里找链接
/是找同级或下级
/是找上级
src＝""引入链接
alt＝""当出现问题，可以提示一段文字
title＝""鼠标悬停信息
width＝" px"设定宽度
height＝" px"设定高度
<a href=""></a>
href=""链接的地址
tltle=""悬停提示信息
target=""填入网址
target=""里包含_blank和_self
_blank在浏览器新窗口打开页面
_self在浏览器原窗口打开页面
<img src=" alt">可以在里加链接
1#号和id属性
在要跳转的文本位置前填上块元素，给块元素命名
<div id＝""></div>
<a href="# "></a>
2#号和name属性
在要跳转的文本位置前在写一个
<a name=" "></a>
<a herf="# "></a>
ul和li必须是组合出现的，他们之间是不能有其他标签的
<ul>
<li></li>
</ul>
<ul></ul>列表最外层容器
<li></li>列表项
type=""是改变前面标记样式（一般都是用css去控制 ）
<ul type=""><li> </li> </ul>
disc是实心圆 circle是空心圆
square是实心方块 none是空白可以随意发挥
ol和li必须是组合出现的，他们之间是不能有其他标签的
<ol>
<li></li>
</ol>
<ol></ol>列表最外层容器
<li></li>列表项
type=""是改变前面标记样式（一般都是用css去控制
<ol type="" start=""> <li> </li> </ol>
1是数字 a是小写字母 A大写字母 i罗马数字小写 I罗马数字大写
start=""从哪个数字开始（取值只能是数字）
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl></dl>列表最外层容器
<dt></dt>定义专业术语或名词
<dd></dd>对名词进行解释和描述
<table></table>表格最外层容器
<tr></tr>定义表格行
<th></th>定义表头
<td></td>定义表格单元
<caption></caption>定义表格标题
border=""表格边框
cellpadding=""单元格内的空间
cellspacing=""单元格之间的空间
rowspan=""合并行
colspan=""合并列
align=""单元格文字左右对齐方式
align：left、center、right
valign=""单元格文字上下对齐方式
valign：top、middle、bottom
<form action="">
<input type＝"text">
</form>
<form></form>表单最外层容器
action＝""提交到一个地址
<input>标签用于搜集用户信息，根据不同的type属性值，展示不同的控件
<input type="">
text普通文本密码框
password密码输入框
placeholdr提示文本
button自定义按钮
disabled禁用
readonly只读
submit提交按钮
hidden是给后端带信息普通用户看不见 一般伴随（value）
<input type="image"src="/ ">代替提交按钮
reset重置按钮
2checkbox复选框
加上checked会出现一个默认选择
disabled禁止使用
3radio单选框
name="(写一个自定义的值)"通过name可以让两个或多个单选框变为一组（自定义的值要相同）
加上checked会出现一个默认选择
4file上传文件
multiple按住鼠标左键鼠标滑过可以多选
5textarea多行文本框
<textarea cols="30" rows="10"></textarea>
cols=""表示列
rows=""表示行
可以通过调节行列改变大小
resize重新设置大小（css）
: vertical;垂直
:horizontal;水平
:both;默认
:none;无法控制
6 <select><option></option></select>
select下拉菜单
size=""填入数字可以让下拉菜单显示多项
multiple按住鼠标左键鼠标滑过可以多选
option菜单里的选项传给后端要设置value值
selected下拉菜单默认显示当前被选中的那一项
7 <label for=""></label>是一个辅助属性
id和for要相同
拿3做例子
正常点这个文字是选不中的
<input type="radio" name="gender">男
<input type="radio" name="gender">女
但是用上label后就可以了
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="girl"><label for="girl">女</label>
<fieldset><legend></legend></fieldset>
<legend></legend>缺口
1<div></div>(块)用来划分区域
2<span></span>（内联）对文字单独修饰
style=""设计
color颜色
<span style＝"color: "></span>
div和span都是没有任何默认样式的，需要配合css
<audio src=" " ></audio>
controls控制栏
loop循环
autoplay自动播放
muted静音
<video src=" "><video>
controls控制栏
loop循环
autoplay自动播放
muted静音
poster属性海报
section元素 表示页面中的一个内容区块（页面身体）
article元素 表示一块与上下文无关的独立的内容
aside元素 在article之外的，与article内容相关的辅助信息（侧边栏）
header元素 表示页面中一个内容区块或整个页面的标题（页面头部）
footer元素 表示页面中一个内容区快或整个页面的脚注（页面底部）
nav元素 表示页面中导游链接部分（页面导航栏）
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题（第一个获最后一个子元素的位置）
main元素 表示页面中的主要内容（ie不兼容）
<form></form>表单最外层容器
<form action=""></form>
action提交到一个地址
<input></input>标签用于搜集用户信息，根据不同的type属性值，展示不同的控件
<input type="">
加上name是给后端的
type="color"生成一个颜色选择的表单
type="email"生成一个邮箱输入框
type="tel"换起拨号盘表单
type="search"产生一个搜索意义的表单
type="range"产生一个滑动条表单，支持min，max，value，step
（min最小值）
（max最大值）
（value设置默认）
（step移动数值）
type="number"产生一个数值表单，支持min，max，value，step
type="email"限制用户必须输入email类型
type="url"限制用户必须输入url类型
type="date"限制用户必须输入日期
type="month"限制用户必须输入月类型
type="week"限制用户必须输入周类型
type="time"限制用户必须输入时间类型
type="datetime-local"选取本地时间
<input type="text" list="mylist">（list和id相连）
<datalist id="mylist">(id自定义)
<option value="手机"></option>（这个是列表可以想写多少写多少）
</datalist>
va lue自定义名称
autofocus自动获取焦点
required验证输入不能为空
multiple可以输入一个或多个值，每个值用逗号隔开
<input type="email" multiple/>还可用于file
pattern
将属性值设为某个正则表达式，在提交时会检查其内容是否合给定格式
<input pattern="[0-9][A-Z][3]" title="输入内容：一个数与三个大写字母" placeholder="输入内容：一个数与三个大写字母">
获取焦点事件，应该满足不了这个要求吧，试试我这个吧：首先，我们将d出框中的内容放置在一个特殊的DIV层中，然后默认隐藏它（即初始不可见，使用CSS即可实现）。当用户执行某个动作时——比如点击某个链接或者将鼠标光标移动到某个链接上——我们将之前设置好的隐藏层显示在所有页面元素的最上层（将使用JS *** 作实现）。此外，我们还将在d出DIV窗口中设置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。就如我上面提到的，我们首先需要创建一个特殊的DIV层，然后我们将d出窗口的内容放在这个DIV层里面。在这里，我们将其ID命名为“popupcontent ”以区别于其他DIV层。下来，让我们给上面已创建好的这个DIVd出层进行CSS美化。其中最重要的几个参数分别是：overflow（内容溢出）,和position（定位方式）。同时我也给这个窗口效果添加了很多其他代码，但这些只是用于美化，使这个窗口更绚丽。所以，我们最后定义的CSS代码形从上面CSS代码中的红色部分可以看出：这个DIV层初始默认状态是不可见的。大家可以根据需要对以上代码进行美化，但请务必保留position，visibility，overflow三个属性。这可能是本教程最重要最有趣的地方了。我们接下来会编写2个过程函数分别用于显示和隐藏上面那个DIVd窗。当然，这两个函数之中会包含一些主体逻辑。在d出窗口中添加一个状态栏（或按钮），用于关闭打开状态下的窗口；显示d出窗口。为了简单起见，本例中我们设置的显示位置是Top：200，Left：200。即以浏览器内容框的左上角为坐标，向下偏移200PX，向左偏移200PX。d出窗口的大小我们可以在显示函数的参数中进行设置，包括两个参数：窗口长度和窗口宽度。如果你需要将本例中的代码进行二次开发，有个地方需要特别注意，那就是获取d出窗口DIV层的DOM对象，我们可以通过下面这个getElementById函数来获取ID名为“Popcontent”的DOM对象。在获取这个（d出窗口）DOM对象之后，我们可以在JS代码中修改窗口的相对的位置和窗口大小。下来，我们需要给窗口添加一个“关闭”按钮，用于在窗口开启状态下关闭这个窗口。要完美的实现这一功能，首先我们需要声明一个全局变量，用于存储d出窗口DIV中的内容。这是因为，如果你在一个页面中显示多个内容不同的d出窗口，你不需要将按钮重复的复制到这些DIV层中，这样就简化了行为逻辑：最后一个需要注意的地方是这个“关闭”按钮的定位问题。这个很容易实现，设置一下这个按钮对象的向上的空白边即可（空白边的数值设置成稍小于整个d出窗口的DIV高度即可）。至此，所有的行为逻辑讲解完毕，最后的d窗显示函数的完整代码如下：隐藏d出窗口的过程就相当简单了。只需要首先获取d出窗口那个DIV的DOM对象，然后将其属性设置成“隐藏”即可。我们需要做的就是在某个链接或者按钮的对应事件上添加JS函数“showPopup() ”即可。比如，需要在鼠标移动到某连接上时d出窗口：setTimeout("codefans()",2000);//2秒，可以改动position: fixed用于生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。这个函数中，url链接的是一个html，我试过了，显示出来的还是我的主界面。我的意思，在我的主界面中，隐藏了一个Div，我想点击一个"XXX"后，在新的窗口/对话框中显示出Div中的信息。哦吼，原来这样。那简单，将你那个隐藏DIV设置一个唯一ID，好让它能够让JS调用到。那么你这个时候，使用js调用它需要一个前提，就是要在窗口中显示出一个DIV，这个DIV你是要新生成，还是现成的，有不同的办法，如果是新生成的话：//这里你可以为这个DIV加上class什么的，以便于CSS（dcreateAttribute()函数）documentbodyappendChild(div);//把div元素节点添加到body元素节点中成为其子节点，但是放在body的现有子节点的最后接下来，你就可以为这个DIV加入内容了：就是这样。以上我只是给出一个思路，你可以依据这个思路继续往下走，写程序千万不要全都等现成的。比如你这段程序，主要的还是需要对JS如果 *** 作DOM节点有了解，所以多在这方面下点功夫，就OK了。不对，而是：大意了，不好意思ok 我再好好研究研究 ，刚接触jQuery。。。谢谢了哦
思路：首先获取这个新创建的input对象，然后使用focus()方法设置焦点。
示例如下——点击按钮创建一个input，并使其获得焦点：
1、HTML结构
<ul>
<li><input type="text"></li>
<li></li>
</ul>
<input type="button" value="添加">
2、jquery代码
$(function(){
$("input:button")click(function() {
pwd = $("<input type='password'>"); // 创建的input对象
$("ul li:last")append(pwd); // 将创建的input添加到相应的位置
$("ul li:last input")focus(); // 获取新添加的input，使用focus()设置焦点
});
});
3、效果演示
没有看出什么问题 你的 #fcvf 是不对的，其他的应该是好的，好友就是 你的 main 有没有这个class 如果都有应该就没有问题
我给你个完整的例子吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-172minjs"></script>
</head>
<body>
<div id="main-main">
<ul>
<li class="main">xsdd</li>
<li class="main">xsdd</li>
<li class="main">xsdd</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
$(document)ready(function(){
var len = $("#main-main ul li")length; //获取焦点图个数
switch(len){
case 0:$("main")css({"background-color":"#f00"});break;
case 1:$("main")css({"background-color":"#0f0"});break;
case 2:$("main")css({"background-color":"#00f"});break;
case 3:$("main")css({"background-color":"#fed"});break;
default:$("main")css({"background-color":"#fff"});break;
}
})
</script>
以上就是关于求js轮播图代码,有详细注释全部的内容，包括:求js轮播图代码,有详细注释、js banner轮播 $("#focus .btn span").stop(true,false) 这个stop是什么意思呢、HTML常用标签和属性等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）