图片轮播

<tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

> ? ? ? ? > ? ? ? ? 图片轮播> ? ? ? ? ? ? ? ? ? ? ? ? #pics{width: 100%;position: relative;} ? ? ? ? ? ? ? ? #pics img{width: 100%;height: auto;} ? ? ? ? ? ? ? ? #pics ul{position: absolute;right: 5%;bottom: 3%;list-style: none;} ? ? ? ? ? ? ? ? #pics li{width:20px;height: 20px;border-radius: 50%;overflow: hidden;display: inline-block;} ? ? ? ? ? ? ? ? #pics li.out{background: #fff;} ? ? ? ? ? ? ? ? #pics li.active{background: orange;} ? ? ? ? > > ? ? ? ? > ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ><> ? ? ? ? ? ? ? ? ? ? ? ? ><> ? ? ? ? ? ? ? ? ? ? ? ? ><> ? ? ? ? ? ? ? ? ? ? ? ? ><> ? ? ? ? ? ? ? ? > ? ? ? ? > ? > > ? ? ? ? var imgs=['1.jpg','2.jpg','3.jpg','4.jpg']; ? ? ? ? var img=document.getElementById('img'); ? ? ? ? var pics=document.getElementById('pics'); ? ? ? //先获取li的父级元素，再在父级元素下获取li，可以避免与文档中其他部分的li产生混乱 ? ? ? ? var lis=pics.getElementsByTagName('li'); ? ? ? ? var t=null; ? ? ? ? var i=0; ? ? ? ? function imgsToggle(){ ? ? ? ? ? ? ? ? clearTimeout(t); ? ? ? ? ? ? ? ? if(i +imgsi; ; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 调用函数lisFor i.className; i>=imgs.length){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? i=0; ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? t=window.setTimeout('imgsToggle()',2000); ? ? ? ? } ? ? ? ? function msor(p){ ? ? ? ? ? ? ? ? clearTimeout(t);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //清楚计时器，当鼠标mouSEOver时图片不会自动切换 ? ? ? ? ? ? ? ? i=p+1;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //避免当鼠标mouSEOut时当前图片多停留1倍时间 ? ? ? ? ? ? ? ? img.src='img/'+imgs[p]; ? ? ? ? ? ? ? ? lisFor(); ? ? ? ? ? ? ? ? lis[p].className='active'; ? ? ? ? } ? ? ? ? function msot(){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? t=window.setTimeout('imgsToggle()',2000); ? ? ? ? } ? ? ? ? function lisFor(){? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //将li的循环遍历单独封装在一个函数中，可以多次直接通过函数名调用，不用每次用到时都要写一遍 ? ? ? ? ? ? ? ? for(var j=0;j lisj.className j.className; imgsToggle; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文档加载完毕时，就调用图片轮播的函数，（函数自身不会自主执行） > >（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

<table class="html5">