javascript - 可以在单个页面上多次使用的 css js 滑块
问题描述
我想制作可以在同一个 HTML 页面上多次使用的 CSS/jQuery 滑块。
我有一个客户需要滑块作为类别链接。到目前为止,我还没有设法让它作为页面上的单个滑块工作。有人可以检查代码并指出我做错了什么吗?我不知道如何组织这个项目。
如果有人可以写下要采取的步骤,我不需要代码,这将如何最有效地完成,我将不胜感激。
var intervalid = {};
$(document).ready(function() {
function slide(elem) {
sliderid = $("#" + elem);
//console.log(sliderid);
//console.log(sliderid.find(".main_image"));
sliderid.find(".main_image").on("mouseover", function() {
//alert("hover");
$(this).find(".main-desc").css("display", "block");
});
sliderid.find(".main_image").on("mouseleave", function() {
//alert("hover");
$(this).find(".main-desc").css("display", "none");
});
intervalid[elem] = setInterval(slidecycle(elem), 4500);
//myinter = setInterval(testcycle(elem), 4500);
//console.log(intervalid);
}
function testcycle(elem) {
console.log("cycle");
}
function slidecycle(elem) {
//console.log("slidecycle");
sliderid = $("#" + elem); //id elementa
//console.log(sliderid.find(".imgs_holder > .image"));
var lastimage = sliderid.find(".imgs_holder > .image:last").hasClass("active"); // last image to cycle
var currentimage = sliderid.find(".imgs_holder > .image.active"); // find current image
// Check if last image, else use next()
if (lastimage) {
var nextimage = sliderid.find(".image_thumb > .image:first")
} else {
var nextimage = sliderid.find(".imgs_holder > .image.active").next();
}
// Switch active image from current to next()
$(currentimage).removeClass("active");
$(nextimage).addClass("active");
// Duplicate code for animation
var imgAlt = $(nextimage).find('img').attr("alt");
var imgSrc = $(nextimage).find('img').attr("src");
var imgTitle = $(nextimage).find('a').attr("href");
var imgDesc = $(nextimage).find('.desc').html();
var imgDescHeight = sliderid.find(".main_image").find('.main-desc').height();
console.log(nextimage);
$(nextimage).css("background-color", "#efefef");
//Switch image
sliderid.find(".main_image .main-desc").animate({
opacity: 0,
marginBottom: -imgDescHeight
}, 250, function() {
sliderid.find(".main_image .main-desc").html(imgDesc).animate({
opacity: 0.85,
marginBottom: "0"
}, 250);
sliderid.find(".main_image img").attr({
src: imgSrc,
alt: imgAlt,
name: imgAlt
});
});
}
slide("slider1");
slide("slider2");
});
html {
font-family: arial;
font-size: 1em;
}
.imgs_holder {
width: 100%;
}
.image {
width: auto;
height: 150px;
display: inline-block;
margin-right: 20px;
line-height: 150px;
padding: auto;
margin: auto;
background-color: black;
}
.image a>img {
width: 200px;
height: auto;
margin: auto;
padding: 0 10px;
vertical-align: middle;
}
.main-desc {
position: absolute;
color: black;
z-index: 100;
padding: 10px;
margin: 0;
top: 65%;
bottom: 0;
width: 873px;
background-color: black;
opacity: .7;
color: white;
display: none;
}
.main_image {
position: relative;
width: 893px;
}
.main_image img {
width: 893px;
}
.desc {
display: none;
}
.slideshow {
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow" id="slider1">
<div class="main_image">
<img src="images/banner01.jpg" alt="slika 1" name="slika 1">
<div class="main-desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="imgs_holder">
<div class="image active">
<a href="#"><img src="images/banner01.jpg" alt="Slika 1" name="Slika 1" /></a>
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<a href="#"><img src="images/banner02.jpg" alt="Slika 2" name="Slika 2" /></a>
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<a href="#"><img src="images/banner03.jpg" alt="Slika 3" name="Slika 3" /></a>
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<a href="#"><img src="images/banner04.jpg" alt="Slika 4" name="Slika 4" /></a>
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
</div>
</div>
<div class="slideshow" id="slider2">
<div class="main_image">
<img src="images/banner01.jpg" alt="slika 1" name="slika 1">
<div class="main-desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="imgs_holder">
<div class="image">
<a href="#"><img src="images/banner01.jpg" alt="Slika 1" name="Slika 1" /></a>
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<a href="#"><img src="images/banner02.jpg" alt="Slika 2" name="Slika 2" /></a>
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<a href="#"><img src="images/banner03.jpg" alt="Slika 3" name="Slika 3" /></a>
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<a href="#"><img src="images/banner04.jpg" alt="Slika 4" name="Slika 4" /></a>
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
</div>
</div>
解决方案
您的代码中有很多错误。
首先,我建议在开头使用美元符号命名 jQuery 变量$
。例如。var $test = $(".test");
这样你就不会做不必要的 jQuery 调用,就像你的情况一样
...
var nextimage = sliderid.find(".image_thumb > .image:first");
...
var imgAlt = $(nextimage).find('img').attr("alt");
...
nextimage
变量已经是一个 jQuery 对象,所以$()
没有必要。
其次,您将当前元素检查为具有类的元素,active
并将下一个元素作为当前元素之后的下一个元素。active
但是,如果像您在第二个滑块中的情况一样,一开始没有带类的元素怎么办?
你应该考虑到这一点。
第三,当你调用setInterval
函数时,你应该这样做
setInterval(function() {
slidecycle(elem);
}, 4500);
最后但并非最不重要的一点是尽量减少 jQuery 调用,因为它会消耗时间和内存。不要重复自己 - 例如,如果您对同一个元素执行某些操作不止一次,则将该元素保存到变量中。
例子:
sliderid.find(".main_image").on("mouseover", function() {
//alert("hover");
$(this).find(".main-desc").css("display", "block");
});
sliderid.find(".main_image").on("mouseleave", function() {
//alert("hover");
$(this).find(".main-desc").css("display", "none");
});
至
var $main = sliderid.find(".main_image"),
$mainDesc = $(this).find(".main-desc");
$main.on("mouseover", function() {
//alert("hover");
$mainDesc.css("display", "block");
});
$main.on("mouseleave", function() {
//alert("hover");
$mainDesc.css("display", "none");
});
或者
var $mainDesc = $(this).find(".main-desc");
sliderid.find(".main_image").on("mouseover", function() {
//alert("hover");
$mainDesc.css("display", "block");
})
.on("mouseleave", function() {
//alert("hover");
$mainDesc.css("display", "none");
});
这是一个工作示例:
var intervalid = {};
$(document).ready(function() {
function slide(elem) {
var $slider = $("#" + elem);
var $description = $slider.find(".main-desc");
$slider.find(".main_image").on("mouseover", function() {
$description.show();
})
.on("mouseleave", function() {
$description.hide();
});
intervalid[elem] = setInterval(function() {
slidecycle($slider)
}, 2000);
}
function slidecycle($slider) {
var lastimage = $slider.find(".imgs_holder .image:last").hasClass("active");
var $currentImage = $slider.find(".imgs_holder .image.active");
if ($currentImage.length <= 0) {
$currentImage = $slider.find(".imgs_holder .image:last");
lastimage = true;
}
if (lastimage) {
var $nextimage = $slider.find(".imgs_holder .image:first");
} else {
var $nextimage = $currentImage.next();
}
$currentImage.removeClass("active");
$nextimage.addClass("active");
var imgAlt = $nextimage.find('img').attr("alt");
var imgSrc = $nextimage.find('img').attr("src");
var imgTitle = $nextimage.find('a').attr("href");
var imgDesc = $nextimage.find('.desc').html();
var imgDescHeight = $slider.find(".main_image").find('.main-desc').height();
$slider.find(".main_image .main-desc").animate({
opacity: 0,
marginBottom: -imgDescHeight
}, 250, function() {
$slider.find(".main_image .main-desc").html(imgDesc).animate({
opacity: 0.85,
marginBottom: "0"
}, 250);
$slider.find(".main_image img").attr({
src: imgSrc,
alt: imgAlt,
name: imgAlt
});
});
}
slide("slider1");
slide("slider2");
});
html {
font-family: arial;
font-size: 1em;
}
.imgs_holder {
width: 100%;
}
.image {
width: auto;
height: 150px;
display: inline-block;
margin-right: 20px;
line-height: 150px;
padding: auto;
margin: auto;
background-color: black;
}
.image.active {
background-color: #efefef
}
.image a>img {
width: 200px;
height: auto;
margin: auto;
padding: 0 10px;
vertical-align: middle;
}
.main-desc {
position: absolute;
color: black;
z-index: 100;
padding: 10px;
margin: 0;
top: 65%;
bottom: 0;
width: 873px;
background-color: black;
opacity: .7;
color: white;
display: none;
}
.main_image {
position: relative;
width: 893px;
}
.main_image img {
width: 893px;
}
.desc {
display: none;
}
.slideshow {
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow" id="slider1">
<div class="main_image">
<img src="images/banner01.jpg" alt="Slika 1" name="Slika 1">
<div class="main-desc">
<h3>Subject 1</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="imgs_holder">
<div class="image active">
<a href="#"><img src="images/banner01.jpg" alt="Slika 1" name="Slika 1"></a>
<div class="desc">
<h3>Subject 1</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<a href="#"><img src="images/banner02.jpg" alt="Slika 2" name="Slika 2"></a>
<div class="desc">
<h3>Subject 2</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<a href="#"><img src="images/banner03.jpg" alt="Slika 3" name="Slika 3"></a>
<div class="desc">
<h3>Subject 3</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<a href="#"><img src="images/banner04.jpg" alt="Slika 4" name="Slika 4"></a>
<div class="desc">
<h3>Subject 4</h3>
<p>Aje, sem desc.</p>
</div>
</div>
</div>
</div>
<div class="slideshow" id="slider2">
<div class="main_image">
<img src="images/banner01.jpg" alt="slika 1" name="slika 1">
<div class="main-desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="imgs_holder">
<div class="image">
<a href="#"><img src="images/banner01.jpg" alt="Slika 1" name="Slika 1"></a>
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<a href="#"><img src="images/banner02.jpg" alt="Slika 2" name="Slika 2"></a>
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<a href="#"><img src="images/banner03.jpg" alt="Slika 3" name="Slika 3"></a>
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
<div class="image">
<a href="#"><img src="images/banner04.jpg" alt="Slika 4" name="Slika 4"></a>
<div class="desc">
<h3>Subject</h3>
<p>Aje, sem desc.</p>
</div>
</div>
</div>
</div>
推荐阅读
- postgresql - 将 Apache 超集与 PostgreSQL 连接起来
- javascript - EJS - 无法识别右括号
- scala - 参数在结果表达式中重复时可以使用通配符匿名函数吗?
- javascript - 从另一个 javascript 文件中读取/使用变量
- python - Pandas DataFrame:将数据扩展到整月
- json - 如何正确解析 SWIFT 中的 JSON 对象
- json - 从 Wagtail 流域中检索 blog_index_page 的第一张图像
- xcode - 没有Phonegap构建的Phonegap/Cordova到ipa文件
- python - 使用重复描述的单词使用 protobuf 元素的子属性
- c# - 在 2legged 上下文中使用 c# forge 包中的 x-user-id