轮播图
前言
今天有把昨天上传的淘宝首页轮播图的js代码重写了一遍，越看越觉得之前写的跟个翔一样。。。
加上好几天没写博客了，就把这次的改动写在这里，整理一下思路。
结构
<div class="banner-outter">
<!-- 轮播图片 -->
<div class="img-wrapper">
<div id="banner-group1" class="banner-group visible">
<a href="#"><img src="./img/left-top-nav-banner-1-1.jpg" alt=""></a>
</div>
<div id="banner-group2" class="banner-group hidden">
<a href="#"><img src="./img/left-top-nav-banner-1-2.jpg" alt=""></a>
</div>
<div id="banner-group3" class="banner-group hidden">
<a href="#"><img src="./img/left-top-nav-banner-1-3.jpg" alt=""></a>
</div>
<div id="banner-group4" class="banner-group hidden">
<a href="#"><img src="./img/left-top-nav-banner-1-4.jpg" alt=""></a>
</div>
<div id="banner-group5" class="banner-group hidden">
<a href="#"><img src="./img/left-top-nav-banner-1-5.jpg" alt=""></a>
</div>
</div>
<!-- 提示信息 -->
<div>
<div class="left-arr hidden" onclick="prePage()"><</div>
<div class="right-arr hidden" onclick="nextPage()">></div>
<ul class="promo-wrapper">
<li><a href="javascript:void(0)" id="promo-1" class="select">1</a></li>
<li><a href="javascript:void(0)" id="promo-2">2</a></li>
<li><a href="javascript:void(0)" id="promo-3">3</a></li>
<li><a href="javascript:void(0)" id="promo-4">4</a></li>
<li><a href="javascript:void(0)" id="promo-5">5</a></li>
</ul>
<div class="info-wrapper">
<strong><i id="info-text">1</i>/5</strong>
</div>
</div>
</div>
样式就不发了。么得什么意思。
let curIndex = 1;
let changeIndex = 2;
let timerNo = setInterval("doTimeToPage()", 2000);
//下一页
function nextPage() {
changeIndex = curIndex + 1;
if (changeIndex > 5) {
changeIndex = 1;
}
changePage();
}
// 上一页
function prePage() {
changeIndex = curIndex - 1;
if (changeIndex < 1) {
changeIndex = 5;
}
changePage();
}
// 遍历圆点标签,并动态添加点击事件。
function init() {
let tags = document.querySelectorAll(".promo-wrapper>li>a");
for (let i = 0; i < tags.length; i++) {
tag = tags[i];
tag.onclick = doClickForCirclIndi;
}
}
//圆点切换
function doClickForCirclIndi() {
let text = this.innerText;
console.log(text);
changeIndex = Number(text);
changePage();
}
// 自动播放
function doTimeToPage() {
nextPage();
}
// 定义翻页
function changePage() {
clearInterval(timerNo);
//设置为全部隐藏
var tag;
for (let i = 1; i < 6; i++) {
tag = document.getElementById("banner-group" + i);
tag.className = "banner-group hidden";
tag = document.getElementById("promo-" + i);
tag.classList.remove("select");
}
// 图片切换
tag = document.getElementById("banner-group" + changeIndex);
tag.className = "banner-group visible";
// 圆点切换
tag = document.getElementById("promo-" + changeIndex);
tag.className = "select";
//数字切换
tag = document.getElementById("info-text");
tag.innerText = changeIndex;
curIndex = changeIndex;
timerNo = setInterval("doTimeToPage()", 2000);
}
大概思路
前一次
刚开始写的时候，是一个模块一个模块写的。分开说。
下一页
首先是点击翻到下一页
首先在下一个的标签上加上οnclick=“nextPage()” 属性定义一个点击事件。
再声明一个个全局变量curPageIndex用来存放选择器的数字。
声明一个函数
function nextPage(){
}
用来执行翻页操作。
再定义一个局部变量nextIndex 用来存放下一张的选择器的数字。
之后就是返回这个图片所在块的对象，声明一个变量接收。
var tag = document.getElementById("banner-group" + curPageIndex);
将他的类名改为隐藏。
tag.className = "banner-group hidden";
再将下一张要显示的类名改为显示
tag = document.getElementById("banner-group" + nextIndex);
tag.className = "banner-group visible";
再将正在显示的图片的选择器数字赋予curPageIndex
curPageIndex = nextIndex;
此时，点击下一次就能成功翻页了，说是翻页也不对，只是换照片而已，无非是将之前显示的那张图片隐藏，然后令下一张图片显示。emmmm，可以骗一骗自己，然而问题来了，这样写完后，当点击到最后一张时，再点下一次会因为：”下面没有了“这种原因而显示不出东西。因此不能算是一个循环。所以，我们要在前面加上一个判断。如果”下面没有了“就跳转到第一个，重新开始，再长出来（大雾）。
if (nextIndex > 5) {
nextIndex = 1;
}
此时，一个最最简易的下一页就做好了。然而，我们会发现我们设计的圆形指示器（就是图片下面的一红四白五个小圆点）以及数字指示器没有反应。
所以，我们要解决一下他们的问题。
圆形指示器
一样我们要获取圆形指示器的对象。
tag = document.querySelector(".promo-wrapper>li:nth-child(" + curPageIndex + ")>span");
然后改变他的类名（取消覆盖在公共样式上的类名）
tag.classList.remove("select");
再在下一个点上加上类名
tag = document.querySelector(".promo-wrapper>li:nth-child(" + nextIndex + ")>span ");
tag.classList.add("select");
搞定。之后是数字指示器
数字指示器
获取对象，然后这次是改变内容。
tag = document.getElementById("info-text");
tag.innerText = nextIndex;
ps:记得把这个东西curPageIndex = nextIndex; 放在最后，不然两个数字一样，后面的圆形指示器之前的那个红色去不掉。
上一页
上一页的思路和下一页的一样，这里就不在赘述（主要是我懒），就是改改变量名和判断，么得什么技术含量（虽然之前的也没什么技术含量）。
自动播放
下面说说自动播放
其实也简单，就是定义一个定时器，让定时器每隔多少ms调用一次下一页函数就可以了。
var time = setInterval("changeBanner()", 1000);
function changeBanner() {
nextPage();
}
后面的1000就是间隔的时间，单位是毫秒（ms）。
圆形指示器
最后的最后，我们要完成圆形指示器的点击跳转。
首先，我们要在圆点标签中加入 οnclick=“choice(this)” 属性，这个this我也没太搞明白，只知道，这样可也指示点击的是那个标签。
然后一样声明一个函数，用obj来接受返回的对象（就是点击的那个标签）
function choice(obj) {
}
然后将此标签中的内容（标签中是有1 2 3 4 5的，只不过字体大小为0 看不见，就是为了此刻用。）赋予一个变量
var text = obj.innerHTML;
声明一个变量tag待用。
将所有的样式该隐藏的隐藏，该取消的取消（因为我们选择，没有上一个或者下一个的联系，所以我们没有办法找到我们点击之前的那个标签，再修改，所以就干脆全都隐藏，点击哪个就让哪个显示）
for (i = 1; i < 6; i++) {
tag = document.getElementById("banner-group" + i);
tag.className = "banner-group hidden";
tag = document.getElementById("promo-" + i);
tag.classList.remove("select");
}
之后就是重复的操作了，获取标签，添加样式（类名），结束。。。
tag = document.getElementById("banner-group" + text);
tag.className = "banner-group visible";
// 颜色
tag = document.getElementById("promo-" + text);
tag.classList.add("select");
//文字
tag = document.getElementById("info-text");
tag.innerText = text;
curPageIndex = Number(text);
ps：最后一行上，可以看到我用了一个强制类型转换，因为通过 .innerHTML 获取的东西是一个字符串。。。当一个字符串+上一个数字时，会都按照字符串处理，然后拼接到一起就像这样 “5” + 2 = “52” emmmmm。 然后你的自动播放， 上一次 ，下一次都会用到这个变量进行加减法。。。 就很刺激。。。之前写错了，死活找不到错在哪（不会调试的我是真的蠢），头发都要薅秃了…屮！！
总结：
大概刚做的时候就是这样的一个思路，我们会发现，重复的代码非常的多，而且整体看起来也非常的麻烦。然后，今天，我把之前的js文件删除了，重新整理了一下思路，重新写了一个。感觉就好了很多（不愧是我）。
这一次
这一次的代码贴在了上面，没有样式文件可以自己去我的资源库里找，最新的那个里面有（昨天传的），但是js文件不是这次的。
大概思路
由于上次的js的复用率底到令人发指，所以又重整思绪写了这次的js。
大概的思路是将获取标签和改变类名写到一个函数中，然后由个个单位调用。由于上面有代码，变量的声明和赋值就不说了，我就直接分模块开始解释吧。
代码下面就不发了，省的水字数。
changePage();
先是核心的changePage()模块
老规矩，先是直接将所有的样式都隐藏（这次我将所有的图片也都隐藏了）。然后用无论你做什么操作生成的changeIndex给对应的标签添加样式。
下一页
依旧是nextPage() 我们直接将原数字+1赋予changeIndex 然后加个判断，再调用changePage(); 搞定。
上一页
同理
圆点指示器
这次的圆点指示器我们不在标签中加onclick属性，而是在body中加上οnlοad="init()"加载这个函数，标记多有的圆点标签，生成一个数组，通过遍历所有的数组给每个标签动态添加点击事件。
然后处理doClickForCirclIndi() 点击事件，通过 .innerText 获取标签内容（标签中是有1 2 3 4 5的，只不过字体大小为0 看不见，就是为了此刻用。）将内容赋值changeIndex 再调用changePage(); 搞定。
自动播放
直接写在最外面，然后调用nextPage() 。
还有一件事
我在changePage() 函数的上下添加了这样两个东西
clearInterval(timerNo);
timerNo = setInterval("doTimeToPage()", 2000);
效果是当我进行操作时，定时器暂停，点击过后，重启定时器。
啊啊啊啊啊，结束啦 ，耗光了我一天的勤勉。令人头大。。。
上午该代码，听课，下午写博客听课。晚上应该是属于我自己的了吧。。。
我老婆，不接受反驳。
4229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
