vs2012中怎么制作轮播图

Posted 2023-03-27

参考技术A 一.轮播图制作思路：

就是通过修改每一张图片的透明度，让其每隔一段时间将其中的某一张图片透明度设为1，显示出来；而其它的设为0，不显示。从而实现一种图片轮流播放的效果。
思路比较简单：
1.首先让一组图片绝对定位，让其重叠在一起，
2.通过js获取相应的标签,为后面的步骤做铺垫
3、然后制作手动轮播：点击小方块按钮，显示相应图片。
（1）通过设置图片的透明度变化来控制图片的显示效果。（更简单的效果是直接修改display属性，用display:block让该图片显示出来,而设置display:none就可以把其他的图片隐藏起来，这两种方法原理相同。）
（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；
4、点击左右箭头，实现向前向后轮播图片。

二.具体代码实现

首先来看html结构代码：

<div class="box">
<ul id="boxul">
<li><img src="images/f1.jpg" alt=""></li>
<li><img src="images/f2.jpg" alt=""></li>
<li><img src="images/f3.jpg" alt=""></li>
<li><img src="images/f4.jpg" alt=""></li>
<li><img src="images/f5.jpg" alt=""></li>
</ul>
<ol id="boxol">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<div class="prev" id="prev">prev</div>
<div class="next" id="next">next</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
对其进行样式调整之后，图片都在同一个位置，可以先给第一图片设置为显示，其它的图片设为不显示。

下面来看js的代码：

*
padding: 0;
margin: 0;

/* 长按标签会有蓝色背景 */
*::selection
background: none;


li
list-style: none;

/* 子绝父相 */
.box
width: 800px;
height: 500px;
margin: 50px auto;
position: relative;

/* 设置所有的图片不显示 */
.box ul li
width: 800px;
height: 500px;
position: absolute;
opacity: 0;
/* 过度显示图片 */
transition: all .8s;

/* 设置第一张图片可见 */
.box ul li:first-child
opacity: 1;


/*左右箭头*/
.prev,
.next
width: 80px;
height: 40px;
position: absolute;
/* 背景色 */
background-color: rgba(0, 0, 0, .7);
/* 文字设置 */
color: white;
text-align: center;
line-height: 40px;
/* 位置 */
top: 50%;
margin-top: -20px;
/* 鼠标移上去的效果 */
cursor: pointer;

.next
right: 0;

.prev:active,
.next:active
background-color: rgba(0, 0, 0, .5);

.prev:hover,
.next:hover
background-color: rgba(0, 0, 0, .6);

/* 小方块的位置 */
.box ol
position: absolute;
right: 50px;
bottom: 20px;

.box ol li
width: 20px;
height: 20px;
border: 1px solid #ccc;
float: left;
text-align: center;
line-height: 20px;
cursor: pointer;

.current
background-color: yellow;

img
width: 800px;
height: 500px;

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
js的具体代码如下：

//1.1获取ul元素
var boxul = document.getElementById("boxul")
var lis = boxul.querySelectorAll("li")
console.log(lis.length);

//1.2获取ol
var boxol = document.getElementById("boxol")
//获取Ol下面的li
var ol_lis = boxol.querySelectorAll("li")
//console.log(ol_lis);
//获得箭头
var prev = document.getElementById("prev")
var next = document.getElementById("next")
//给ol的li添加点击事件
for(var i = 0 ;i<ol_lis.length;i++)
// console.log(i);
//给oll的i设置index
ol_lis[i].setAttribute("index",i)
ol_lis[i].onclick = function()
for(var i = 0 ;i<ol_lis.length;i++)
ol_lis[i].className = ""
lis[i].style.opacity = 0

this.className = "current"
var index = parseInt(this.getAttribute("index"))
lis[index].style.opacity = 1




//console.log(ol_lis);
//2.给next按钮注册点击事件，让所有的li的透明度变为0，让当前的透明度变为1
var index = 0;
var old_li = lis[0]
var new_li
next.onclick = function()
index++
// 到5时，切到第一张图
if(index == lis.length)
index = 0

old_li.style.opacity = 0
new_li = lis[index]
new_li.style.opacity = 1
old_li = new_li
//ol下li的颜色变化
for(var i =0;i<lis.length;i++)
ol_lis[i].className = ""

ol_lis[index].className = "current"


//3.给上一个按钮注册点击事件，让所有的li的透明度变为0，让当前的透明度变为1

// console.log(index);
// old_li.style.opacity =0
// new_li = lis[index]
// new_li.style.opacity = 1

prev.onclick = function()

// 从第一张图到下标为4的图
if(index == 0)
index = lis.length

index--
old_li.style.opacity = 0
new_li = lis[index]
new_li.style.opacity = 1
old_li = new_li
//ol下li的颜色变化
for(var i =0;i<lis.length;i++)
ol_lis[i].className = ""

ol_lis[index].className = "current"

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
69
70
71
72
73
74
75
76
77
78
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
69
70
71
72
73
74
75
76
77
78
这里面实现的时候结合了css3的transition属性，让图片的切换有一个过渡效果

三、相关知识点。

1、获取DOM元素：
（1）document.getElementsById():通过id获取对象，id是唯一的，可以不获取。
（2）document.getElementsByClassName()：通过class属性获取对象。
（3）document.getElementsByTagName()：通过标签名获取对象。
（4）document.querySelectorAll():可通过所有获取。
2、(1)onmouseover():鼠标移上时事件；
(2)onmouseout():鼠标移开时事件；
3、onclick():单击事件。

js网站轮播图怎么做如何做？鸡哥教你简单制作效果炫酷

日了狗啦，刚刚鸡哥辛苦码了那么多字全丢了又要重新写，这是第二遍写了...
今天鸡哥给小白写个不需要写js原生代码，只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图，当然js原生代码写着也不算很繁琐，但是有些浪费时间，更何况很多人并不会用js直接写包括鸡哥，当年在学校还是研究过一段时间js的，当时还独自写了一个轮播图俘获了多少同班妹子的芳心，不过现在是基本废了，这东西要常写，不然忘的很快。

唉，本来还有妹子等着鸡哥呢，我这一大意文章丢了，重新写的话估计来不及了，先打个电话让妹子回家吧~~  好了切入主题！

本次教程的原理就是用一个大神写好的插件，里边包含了很多封装好的js函数供我们使用，我们只需引入这个插件和jquery库配合，然后写出规定的html结构，最后再插一段通俗易懂的jquery代码就大功告成了~~ 
大家先百度一下“大话主席”  第一个就是点进去点击下载页面



下载之后是一个本地的网站其实和线上是一样的下载不下载都一样，打开之后点击基础效果，如果想下载扩展效果的话是要付费的，反正也不贵19块钱，就当给作者得辛苦钱（鸡哥是不是要想这货要点广告费啊~~~哈哈哈）



鸡哥截图没截完，其实下边还有很多效果，右侧红框框住的是轮播效果的属性选择，可以生成一段jquery代码（橙色部分代码），就是刚才所说的那段通俗易懂得代码。这段代码在最后是要用到的，我在后边会讲到。
好了，大话主席的插件简单的介绍完了，下边给大家列一下需要得插件：
1：jquery1.42.min.js                                 / jquery库 知道点js的人都懂得
2：jquery.SuperSlide.2.1.1.js                 /  这个就是刚刚介绍得大话主席的插件
这俩插件鸡哥会在大家伙看完文章后在结尾附上下载链接，鸡哥打包好的。
下边鸡哥介绍下这俩文件如何引要放在哪里先看个截图：



如截图，在body结束标签后边引入我们的这俩文件，当然你的路径可能跟我的不一样。
特别注意一下：引入的顺序一定要先引入jquery插件然后引入大话主席插件不然没得效果~~~

知道怎么引入之后大家再看看html的结构怎么写，必须要按照这个结构，不然也没得效果，见下方代码结构。

  <div class="box">      / 此标红类名后边会用到 留意

   <div class="hd">
     <ul><li>1</li><li>2</li><li>3</li></ul>
   </div>

   <div class="bd">
     <ul><li>1.jpg</li><li>2.jpg</li><li>3.jpg</li></ul>
   </div>

  </div>

如上述代码：一个大的div包住俩小div，大div类名就是标红地方可以任意起，俩小div是固定的类名，hd就是head的缩写，就是轮播图中的1234之类的按钮。bd缩写就是body，就是轮播图啦。
好了，现在已经基本差不多了就差一个生成的刚刚讲过的那个橙色部分代码了，按照自己想要的效果生成一个代码，然后复制到你引入大话主席代码的下边就ok了，见下方代码：

  jQuery(".box").slide({mainCell:".bd ul",effect:"fold",autoPlay:true,interTime:7000,delayTime:1000});

标红的地方填的就是刚刚所讲的大div的类名，特别注意前边有个点。
到现在已经基本成了，但是大家还不要忘了给你的html加上css样式哟，怎么样是不是很简单~~~

好了文章到这终于写完了，第二次啊.....可能写的有些粗糙，毕竟现在已经凌晨一点多了，不知各位看官觉得写的怎么样，哪里没写明白请在下方评论中写出，这样及提升了你也提升了我。

感谢浏览啊

原文链接：js网站轮播图怎么做如何做？鸡哥教你简单制作效果炫酷