Introducción al carrusel
El carrusel es una forma de mostrar información en la página de inicio. Para permitir a los usuarios ver más contenido sin desplazarse por la pantalla, los diseñadores usan carruseles para maximizar la densidad de la información. Hay muchas formas y tamaños de carrusel, pero el carrusel discutido en este artículo tiene las siguientes características:
se muestra en la parte superior de la página de inicio y ocupa un área considerable en la página que se puede mostrar sin desplazarse.
Se muestran varias páginas de contenido en el mismo lugar, aunque solo se muestra una página a la vez; cada página contiene imágenes y pequeños fragmentos de texto.
Un indicador indicará que hay más de una imagen en este carrusel.
El gráfico de carrusel también tiene sus propias ventajas y desventajas:
Ventajas
1. El gráfico de carrusel permite que la posición más importante en la pantalla principal muestre varias páginas de contenido.
2. Cuanta más información se muestre en la parte superior de la página, es más probable que los usuarios la vean.
Desventajas:
1. Los usuarios a menudo ignoran la imagen del carrusel, incluso con todo el contenido en ella (incluso si se desplaza automáticamente, no ayudará): el usuario no prestará atención a la parte superior de la página durante mucho tiempo. Por lo tanto, no puede esperar que vean todo el contenido del carrusel.
2. Los diseñadores suelen pensar que un carrusel es un conjunto de imágenes, pero a los usuarios solo les importa la imagen que ven. Un grupo de imágenes en el carrusel puede mostrar con precisión sus productos y servicios, pero si el usuario solo ve una de las imágenes, es posible que no comprenda su producto.
1. Proceso de implementación:
1.1 Diagrama de interfaz :
1.2 Introducción de la función
Las cuatro imágenes pequeñas en la parte superior de la interfaz se utilizan para indicar qué imagen se muestra actualmente, y habrá una línea horizontal en la parte inferior;
haga clic en el icono de la izquierda para saltar al anterior, si el actual es Para la primera imagen, salte a la última imagen;
haga clic en el icono de la derecha para saltar a la siguiente imagen, si la imagen actual es la última imagen, salte a la primera imagen;
la imagen grande en el medio es la imagen que se muestra
Los siguientes cuatro pequeños puntos, después de hacer clic, la foto correspondiente se mostrará en el medio y el punto se volverá rojo;
sin intervención humana, saltará automáticamente a la siguiente
interfaz de fondo completa a intervalos regulares. Cuando se produce un salto, el color de fondo cambiará. Al mismo tiempo, cuando no hay una operación humana, el color de fondo cambiará a intervalos regulares y cambiará aleatoriamente.
1.3 Preparación del diseño:
1. En la parte superior de la interfaz, hay cuatro etiquetas p, que contienen una imagen correspondiente a la foto que se muestra actualmente en la interfaz, y una etiqueta de extensión para marcar qué foto se muestra en la página actual.
2. Hay un cuadro grande en el medio, que contiene tres etiquetas de la función anterior div (izquierda), el div (cuadro) que muestra la imagen y la siguiente función div (derecha).
3. Hay 4 pequeños puntos (etiqueta a) en la parte inferior de la interfaz, haga clic en un punto diferente para mostrar la imagen correspondiente.
1.4 explicación del código
Primero, escriba el diseño html, como sigue:
<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>`
estilo de diseño CSS, basado en preferencias personales, no se detenga aquí, solo muestre lo que necesita:
.bottom {border-bottom: 5px solid red;}
.red {background-color: red;}
código js
En el código js, primero debemos considerar la realización de varias funciones del programa
1. Al hacer clic en el punto pequeño, se debe mostrar la foto correspondiente. En este momento, el valor src de la etiqueta img en el medio debe corresponder al valor href de la etiqueta a, pero la dirección del enlace de la etiqueta a se analizará en la página web. Si coloca la dirección en una matriz de antemano y luego asigna el valor del bit de índice correspondiente a la etiqueta img, cuando la use más adelante, la etiqueta correspondiente href que se ha escrito no será igual a la etiqueta img correspondiente src , Por lo tanto, necesitamos almacenar la dirección de la etiqueta a directamente en una matriz vacía, de modo que la dirección en la matriz sea igual a la dirección analizada de la etiqueta a
2. Al darse cuenta del cambio del fotograma anterior, el siguiente fotograma, el borde inferior de la etiqueta p correspondiente y el color de fondo de la etiqueta a, primero necesitamos obtener el índice de la imagen que se muestra actualmente en la matriz y obtener la etiqueta py una etiqueta. En la colección de, de lo contrario, el punto pequeño no estará conectado con los eventos de clic del anterior y el siguiente, es decir, incluso después de hacer clic en el tercer punto pequeño para mostrar la tercera foto, haga clic en la siguiente, la pantalla será El segundo, no el cuarto capítulo, aquí, pongo estos eventos funcionales en una función, ejecución de llamada
3. Siempre que cambie el índice, el color de fondo cambiará aleatoriamente a un color. Aquí también escribo el evento aleatorio del color de fondo en una función y lo llamo en cada evento de clic
4. El código específico es el siguiente:
Función encapsulada:
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");
}
Código:
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. Conclusión
Esta vez, usé código js para completar un caso de implementación de un diagrama de carrusel. Hay otros métodos de implementación js más simples. Bienvenido al comentario a continuación.