Carousel introduction
The carousel is a way to display information on the homepage. In order to allow users to see more content without scrolling the screen, designers use carousels to maximize information density. There are many shapes and sizes of the carousel, but the carousel discussed in this article has the following characteristics:
it is displayed at the top of the homepage and occupies a considerable area on the page that can be displayed without scrolling.
Multiple pages of content are displayed in the same place, although only one page is displayed at a time; each page contains pictures and small pieces of text.
An indicator will indicate that there is more than one picture in this carousel.
The carousel chart also has its own advantages and disadvantages:
Advantages
1. The carousel chart enables the most important position on the main screen to display multiple pages of content.
2. The more information is displayed at the top of the page, and users are more likely to see them.
Disadvantages:
1. Users often ignore the carousel picture, even with all the content in it (even if it is automatically scrolled, it will not help)-the user will not pay attention to the top of the page for a long time. Therefore, you can't expect them to watch all the content in the carousel.
2. Designers often think that a carousel is a set of pictures, but users only care about the picture they see. A group of pictures in the carousel may be able to accurately show your products and services, but if the user only sees one of the pictures, he may misunderstand your product.
1. Implementation process:
1.1 Interface diagram :
1.2 Function introduction
The four small pictures at the top of the interface are used to indicate which picture is currently displayed, and there will be a horizontal line at the bottom;
click the icon to the left to jump to the previous one, if the current one is For the first picture, jump to the last picture;
click on the right icon to jump to the next picture, if the current picture is the last picture, jump to the first picture;
the big picture in the middle is the picture being displayed
The following four small dots, after clicking, the corresponding photo will be displayed in the middle, and the dot will turn red;
without human intervention, it will automatically jump to the next
entire background interface at regular intervals. When a jump occurs, the background color will switch. At the same time, when there is no human operation, the background color will change at regular intervals, and it changes randomly.
1.3 Layout preparation:
1. At the top of the interface, there are four p tags, which contain a picture corresponding to the photo currently displayed on the interface, and a span tag to mark which photo is displayed on the current page.
2. There is a big box in the middle, which contains three labels of the previous function div (left), the div (box) that displays the picture, and the next function div (right).
3. There are 4 small dots (label a) at the bottom of the interface, click on a different dot to display the corresponding picture.
1.4 code explanation
First, write the html layout, as follows:
<body>
<div id="p"> // 此处给第一个p标签设置class，并且在css中设置样式，用于对应标签在页面打开时的初始状态
<p class="bottom"><img src="img/1__03.jpg">当前在第一张</p>
<p><img src="img/1__11.jpg">当前在第二张</p>
<p><img src="img/1__07.jpg">当前在第三张</p>
<p><img src="img/1__09.jpg">当前在第四张</p>
</div>
<div id="bigbox">
<div id="left">
<img src="img/left.png" >
</div>
<div id="box">
<img src="img/1__03.jpg" id="img">
</div>
<div id="right">
<img src="img/right.png" >
</div>
</div>
<div id="link"> //此处设置同上方的p标签
<a href="img/1__03.jpg" class="red"></a>
<a href="img/1__11.jpg"></a>
<a href="img/1__07.jpg"></a>
<a href="img/1__09.jpg"></a>
</div>
<img src="img/71_4.jpg" id="mouseimg">
</body>`
css layout style, based on personal preference, not stop here, only show what you need:
.bottom {border-bottom: 5px solid red;}
.red {background-color: red;}
js code
In the js code, we must first consider the realization of several functions of the program
1. When you click on the small dot, the corresponding photo should be displayed. At this time, the src value of the img tag in the middle should be a corresponding to the href value of the a tag, but the link address of the a tag will be parsed in the web page. If you put the address in an array in advance, and then assign the value of the corresponding index bit to the img tag, when you use it later, the corresponding a tag href that has been written will not be equal to the corresponding img tag src , So we need to store the address of the a tag directly into an empty array, so that the address in the array will be equal to the parsed address of the a tag
2. When realizing the change of the previous frame, the next frame, the bottom border of the corresponding p tag, and the background color of the a tag, we first need to get the index of the currently displayed picture in the array, and get the p tag and a tag. In the collection of, otherwise, the small dot will not be connected with the click events of the previous and next one, that is, even after clicking the third small dot to display the third photo, click the next one, the display will be The second one, not the fourth chapter, here, I put these functional events into a function, call execution
3. Whenever the index changes, the background color will randomly change to a color. Here I also write the random event of the background color in a function and call it in each click event
4. The specific code is as follows:
Encapsulated function:
function my$(id){
return document.getElementById(id);
}
//获取随机色
function getRadomclass(){
var r=Math.round(Math.random()*255);
var g=Math.round(Math.random()*255);
var b=Math.round(Math.random()*255);
document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";//设置页面背景色
}
//获取当前img下标
function getNindex(){
for(var i=0;i<arr.length;i++){
//判断当前img的src和a标签href相等，即可取到对应a标签的下标，取出下标并return出去，在外部定义返回值为index，作为实参赋值给下面的函数Nindex()
if(img.src==arr[i]){
return i;
}
}
}
// 得到函数getNindex返回的下标值，遍历集合，修改对应p标签和a标签的class名
function Nindex(Nindex){
for(var i=0;i<links.length;i++){
//首先要清空p标签和a标签所有的class设置
links[i].setAttribute("class","");
simg[i].setAttribute("class","");
}
//给对应的p标签和a标签设置class属性，由于css中写好了样式，所以会直接体现出来
links[Nindex].setAttribute("class","red");
simg[Nindex].setAttribute("class","bottom");
}
Code:
var left=my$("left");
var right=my$("right");
var box=my$("box");
var oimg=my$("img");
var p=my$("p");
//获取a标签集合
var links=document.querySelectorAll("#link a");
//获取p标签集合
var simg=document.querySelectorAll("#p p");
// 定义空数组,用来存放a标签的href地址
var arr=[];
// 给body设置延时属性
document.body.style.transition='all 1s';
//将a标签的href地址放入数组
for(var i=0;i<links.length;i++){
arr[i]=links[i].href
}
//小圆点事件
//遍历a标签所在的links集合
for(var i=0;i<links.length;i++){
// 取到每一个小圆点(a标签)
var link=links[i];
//点击事件
link.onclick=function(){
// 将当前正在被点击的a的href赋值给img标签
//由于程序一加载完成，for循环就已经执行完成，i变为最大值，所以此处不能直接写links[i]，而是使用this
// this:事件源,指当前被点击的a
oimg.src=this.href;
//调用函数,改变背景色
getRadomclass();
//调用函数,获取当前显示的a标签的数组下标
getNindex();
var index=getNindex();
//调用函数,且实参为当前img标签下标值
Nindex(index);
//取消a标签的默认跳转行为
return false;
}
}
//上一张
left.onclick=function(){
//调用函数,改变背景色
getRadomclass();
//调用函数,获取当前显示的a标签的数组下标
getNindex();
var index=getNindex();
// 判断:
// 如果当前下标为0,则跳转到最后一张,即下标为arr.length-1
// 如果不为0,则跳转到上一张,即下标为index-1;
if(index==0){
img.src=arr[arr.length-1]
index=arr.length-1;
}else{
img.src=arr[index-1];
index--;
}
//调用函数,且实参为当前img标签下标值
Nindex(index);
}
//下一张
right.onclick=function(){
//调用函数,改变背景色
getRadomclass();
//调用函数,获取当前显示的a标签的数组下标
getNindex();
var index=getNindex();
// 判断:
// 如果当前下标为最后一张图片的下标,则跳转到第一张,即下标为index为0
// 如果不为最后一张,则跳转到下一张,即下标为index+1;
if(index==arr.length-1){
img.src=arr[0];
index=0;
}else{
img.src=arr[index+1];
index++;
}
//调用函数,且实参为当前img标签下标值
Nindex(index);
}
// function功能与下一张一致
// setInterval():每隔s毫秒执行一次,
// setTimeout():s毫秒后执行
// 格式:
// setInterval(function(){
// },)
// 定时器,每隔5秒切换一次
var timeid= setInterval(function(){
// clearInterval(timeid);
getRadomclass();
getNindex();
var index=getNindex();
if(index==arr.length-1){
img.src=arr[0];
index=0;
}else{
img.src=arr[index+1];
index++;
}
Nindex(index);
},3000)
2. Conclusion
This time, I used js code to complete a case of implementing a carousel diagram. There are other simpler js implementation methods. Welcome to comment below.