如何使用项目符号使用 jquery 制作滑块
How to make a slider with jquery using bullets
你好,我想知道如何用jquery制作滑块,我对此很陌生,我会尽力具体,我想这样做:
我有一个滑块,上面有 3 张图像"它们在同一个空间上",图像下方有 3 个项目符号,首先我看不到图像,因为它们不透明度:0,但如果我单击第一个项目符号,我会看到第一个图像,子弹# 2 img# 2,子弹# 3 img# 3,例如,我想放一个<a>
标签,例如<a href="#"class="avanzar1">avanzar</a>
前进到下一个图像"它将在右侧侧",左侧将回到您看到的最后一个图像,我的问题是我该怎么做?我需要保持它们的过渡以及如何将其加入子弹?因为我需要使用标签<a>
<-"为我"按钮或项目符号,这很困难,我正在尝试这样做,欢迎任何帮助
这是我的网页:
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/slider.js"></script>
</head>
<body>
<div class="sliders">
<a href="#" class="retroceder">back</a>
<a href="#" class="avanzar">next</a>
<ul >
<li><img src="image_1.jpg"></li>
<li><img src="image_2.jpg"></li>
<li><img src="image_3.jpg"></li>
</ul>
<!-- <ul class="controles">
<li class="activa"> </li>
<li> </li>
<li> </li>
</ul> -->
</div>
<div class="sliders">
<a href="#" class="retroceder1">back</a>
<a href="#" class="avanzar1">next</a>
<ul>
<li><img src="image_1.jpg"></li>
<li><img src="image_2.jpg"></li>
<li><img src="image_3.jpg"></li>
</ul>
</div>
</body>
</html>
这是 js:
$.fn.slider = function(config){
var nodos = this;
var delay = (typeof config.delay == "number")?parseInt(config.delay):4000;
for (var i = 0; i < nodos.length; i++) {
Slider(nodos[i]);
}
function Slider(nodo){
var galeria = $(nodo).find('ul');
if(!$(nodo).hasClass('slider'))
$(nodo).addClass('slider');
if(!galeria.hasClass('galeria'))
galeria.addClass("galeria");
//Encontrar cuantas imagenes hay en la galeria
var imagenes = $(galeria).find('li');
//Controles
var html_bullets="<ul class='controles'>";
for (var it = 0; it < imagenes.length; it++) {
html_bullets+="<li data-index='"+it+"'> </li>";
}
html_bullets+="</ul>";
$(nodo).append(html_bullets);
var bullets = $(nodo).find("ul.controles li");
bullets.click(function(){
var index= $(this).data("index");
bullets.removeClass('activa');
$(imagenes[index]).addClass("activa");
$(bullets[index]).addClass("activa");
});
}
};
$(document).ready(function() {
$(".sliders").slider({delay:5000});
});
这是 css:
.slider{
width: 320px;
overflow: hidden;
}
.slider ul{
list-style: none;
padding: 0;
}
.slider ul.galeria{
height: 200px;
position: relative;
}
.slider ul.galeria li{
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 2s;
}
.slider ul.galeria li.activa{
opacity: 1;
}
.slider ul.galeria img{
max-height: 200px;
}
/*Controles*/
.slider ul.controles {
text-align: center;
}
.slider ul.controles li{
background-color: black ;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
}
这是我想要的 我已经完成了它,如果它对某人有帮助,我很高兴
.html:
<!DOCTYPE html>
<html>
<head>
<title>Practica2Jquery</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<script src="slider.js"></script>
</head>
<body>
<div class="sliders">
<a href="#" class="atras">Atras</a>
<ul >
<li class="activa"><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
<a href="#" class="siguiente">Siguiente</a>
</div>
<div class="sliders">
<a href="#" class="atras">Atras</a>
<ul>
<li class="activa"><img src="image4.jpg"></li>
<li><img src="image5.jpg"></li>
<li><img src="image6.jpg"></li>
</ul>
<a href="#" class="siguiente">Siguiente</a>
</div>
</body>
</html>
.js:
$.fn.slider = function(config){
var nodos = this;
var delay = (typeof config.delay === "number")?parseInt(config.delay):3000;
for (var i = 0; i < nodos.length; i++) {
Slider(nodos[i]);
}
function Slider(nodo){
var galeria = $(nodo).find('ul');
var tag = "<a class='atras'></a>";
if(!$(nodo).hasClass('slider'))
$(nodo).addClass('slider');
if(!galeria.hasClass('galeria'))
galeria.addClass("galeria");
//Encontrar cuantas imagenes hay en la galeria
var imagenes = $(galeria).find('li');
//Controles
var html_bullets="<ul class='controles'>";
for (var it = 0; it < imagenes.length; it++) {
if(it==0)
html_bullets+="<li data-index='"+it+"' class='activa'> </li>";
else
html_bullets+="<li data-index='"+it+"'> </li>";
}
html_bullets+="</ul><a class='siguiente'></a>";
$(nodo).append(html_bullets);
$(nodo).prepend(tag);
var bullets = $(nodo).find("ul.controles li");
bullets.click(function(){
var index= $(this).data("index");
$(imagenes).add(bullets).removeClass('activa');
$(imagenes[index]).add(bullets[index]).addClass('activa');
});
}
$(".slider").on("click","a.atras",function(){
direcciones({div: this.parentElement});
});
$(".slider").on("click","a.siguiente",function(){
direcciones({div: this.parentElement,direccion:1});
});
function direcciones(lado){
var div = lado.div;
var imagen = $(div).find("ul.galeria li.activa");
var imagenes = $(div).find("ul.galeria li");
var bullet = $(div).find("ul.controles li.activa");
var bullets = $(div).find("ul.controles li");
var index = bullet.data("index");
var max = bullets.length-1;
$(bullets).add(imagenes).removeClass('activa');
if(lado.direccion){
// === ?
if(index == max){
$(imagenes[0]).add(bullets[0]).addClass('activa');
}else {
$(imagenes[index+1]).add(bullets[index+1]).addClass('activa');
}
}
else{
if(index == 0){
$(imagenes[max]).add(bullets[max]).addClass('activa');
}else {
$(imagenes[index-1]).add(bullets[index-1]).addClass('activa');
} } } };
$(document).ready(function() {
$(".sliders").slider({delay:3000});
});
.css:
.slider{
width: 420px;
overflow: hidden;
}
.slider ul{
list-style: none;
padding: 0;
}
.slider ul.galeria{
height: 200px;
position: relative;
margin-left: 30px;
}
.slider ul.galeria li{
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 2s;
}
.slider ul.galeria li.activa{
opacity: 1;
}
.slider ul.galeria img{
max-height: 400px;
max-width: 300px;
margin-left: 5px;
}
/*Controles*/
.slider ul.controles {
position: relative;
left: 38%;
bottom: 45px;
}
.slider ul.controles li{
background-color: black ;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
}
.slider ul.controles li.activa{
background-color: red ;
}
.slider a.atras{
position: relative;
left: 0;
top: 128px;
}
.slider a.siguiente{
position: relative;
left: 80%;
bottom: 120px;
}
相关文章:
- 我可以在Javascript/jQuery中使用一个变量作为键吗
- 如何在jquery中使用实时计算求和值
- 在jQuery中使用$('body').html('')意味着什么
- 在Jquery中使用变量作为对象名称
- 如何将while循环中生成的值存储到变量中,以便以后在JQuery中使用
- jquery无法使用无限滚动
- 将FormParams与Jersey和jQuery一起使用
- jQuery UI使用json文件自动完成
- SlideDown()不会'不能在jQuery中使用After()
- 在JQuery中使用谷歌地图Api事件/侦听器
- jQuery字符串使用split()方法在空格后拆分字符串
- 自动完成jquery;t使用ngmodel和ngrepeat(angular)
- 在jquery中使用css获取背景值
- jQuery idTabs-使用鼠标悬停自动更改和淡入淡出
- Javascript:在jQuery中使用xpath
- jQuery 无法使用 AJAX 调用访问函数内部的函数参数
- 在 for 循环 jQuery 中使用 one()
- Jquery/Javascript使用IF/ELSE语句更改img SRC
- jQuery动态使用.append()添加输入,但发布表单不是追加数据
- 存储数据的最佳方式是什么,以便与jquery一起使用