English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
本文实例为大家分享了js图片轮播具体实现代码，供大家参考，具体内容如下
一、html代码部分（et.thtml）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/styleet.css">
<script type="text/javascript" src="js/system.js"></script>
</head>
<body>
<div id="main">
<div id="top">
<span id="imgL" class="span1></span>
<img src="images/1.jpg" id="img" data-index="1" alt=""/>
<span id="imgR" class="span2></span>
</div>
<div id="bottom">
<img src="images/1.jpg" id="img1" class="focusClass" data-index="1" alt=""/>
<img src="images/2.jpg" id="img2" class="initClass" data-index="2" alt=""/>
<img src="images/3.jpg" id="img3" class="initClass" data-index="3" alt=""/>
<img src="images/4.jpg" id="img4" class="initClass" data-index="4" alt=""/>
<img src="images/5.jpg" id="img5" class="initClass" data-index="5" alt=""/>
<img src="images/6.jpg" id="img6" class="initClass" data-index="6" alt=""/>
<img src="images/7.jpg" id="img7" class="initClass" data-index="7" alt=""/>
</div>
</div>
<script type="text/javascript" src="js/et.js"></script>
</body>
</html>
二、css代码部分（styleet,css）:
#main span{
ancho: 22px;
height: 38px;
position: absolute;
display: inline-block;
cursor: pointer;
background: url("../images/1.png") no-repeat 0 0;
}
.span1{
fondo-position: 0 0;
izquierda:20px;
top: 90px;
}
.span2{
fondo-posición: -22px 0;
derecha: 20px;
top: 90px;
}
#main{
ancho: 500px;
margen: 20px auto;
texto-alineación: centro;
borde: sólido 2px rojo;
posición: relativa;
}
.initClass{
ancho: 50px;
borde: sólido 2px #fff;
margen: 10px 5px;
}
.focusClass{
ancho: 50px;
borde: sólido 2px rojo;
margen: 10px 5px;
}
Tercero, parte del código js (et.js):
/**
* Creado por LuanReco el 2015/8/28.
*/
var slide={
arrImg:new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg'),
initClass:'initClass',
focusClass:'focusClass',
index:1,
arrMax:7,
imgMain:'img'
}
slide.top={
//Evento de navegación
navEvent:function(){
//Mostrar la imagen grande superior correspondiente al índice acumulado
$$(slide.imgMain).src=slide.arrImg[slide.index-1
//Combinar el valor del índice de enfoque para formar el nombre de la imagen de navegación
var n='img'+slide.index;
//Ejecutar el evento de clic en la imagen de navegación correspondiente
$$(n).click();
},
//Procesar la lógica de la parte anterior de la página
clickRight:function(){
//Procesar el evento al hacer clic en el botón derecho
console.log(slide.index);
//Cuando el índice sea menor o igual al número máximo de imágenes
if(slide.index<slide.arrMax){
//Aumentar el valor del índice actual
slide.index++;
slide.top.navEvent();
}
},
clickLeft:function(){
//Procesar el evento al hacer clic en el botón derecho
console.log(slide.index);
//Cuando el índice sea menor o igual al número máximo de imágenes
if(slide.index>1{
//Aumentar el valor del índice actual
slide.index--;
slide.top.navEvent();
}
}
}
slide.bottom={
initImgClass:function(){
//Inicializar el estilo de todas las imágenes
for(var i=1;i<=slide.arrMax;i++{
var n='img'+i;
$$(n).className=slide.initClass;
}
},
click:function(){
//Procesar la lógica de la parte siguiente de la página
function() {$$('imgL').onclick=
slide.top.clickLeft();
}
function() {$$('imgR').onclick=
slide.top.clickRight();
}
//获取所有底部的小图片
for(var i=1;i<=slide.arrMax;i++{
//为每一张图片绑定点击事件
var n='img'+i;
$$(n).onclick=function(){
//初始化全部样式
slide.bottom.initImgClass();
//图片元素本身获取焦点样式
this.className=slide.focusClass;
//在上部图片中显示点击小图片对应的大图片
$$(slide.imgMain).src=slide.arrImg[this.getAttribute('data-index')-1
//Vuelva a registrar la posición del índice correspondiente de la imagen de enfoque en el array
slide.index=this.getAttribute('data-index');
}
}
}
}
slide.autoplay={
play:function(){
var m=1;
//for(var i=1;i<=slide.arrMax;i++{
setInterval(function(){
var n='img'+m;
m++;
$$(n).click();
if(m>6)
m=1;
},1000)
//}
}
}
slide.autoplay.play();
slide.bottom.click();
Esto es todo el contenido del artículo, espero que sea útil para su aprendizaje y que todos apoyen a la tutoría de gritos.
Declaración: El contenido de este artículo se obtiene de la red, pertenece al propietario original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha editado de manera humana y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.