如何使用子彈用jQuery制作滑塊
[英]How to make a slider with jquery using bullets
問題描述
您好，我想知道如何使用jquery制作滑塊，對此我還很陌生，我會盡力做到具體，我想這樣做：
我有一個帶有3個圖像的滑塊，“它們在同一空間中”，圖像下方有3個項目符號，首先，我看不到圖像，因為它們具有不透明度：0，但是如果單擊第一個項目符號，我將看到第一個圖像， bullet＃2 img＃2，bullet＃3 img＃3，我想放置一個<a>標記，例如<a href="#"class="avanzar1">avanzar</a> ，該標記可以前進到下一個圖像“它會在右側”，而左側將回到您看到的最后一張圖片，我的問題是我該怎么做？ 我將需要保持它們的過渡，以及如何將其加入子彈中？ 因為我需要使用標簽<a> <-“為我”按鈕或項目符號，所以很難，我正在嘗試這樣做，歡迎您提供任何幫助
這是我的html：
<!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;
}
1 個解決方案
解決方案1
0 2016-01-19 05:45:37
這是我想要的，我已經完成了，很高興能幫助到某人
的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;
}
如何使交互式項目符號到我的jquery滑塊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.