0

我正在寻找与此主题中的“最新项目”滑块类似的内容滑块（主滑块下方的两个部分）。我想实现一个没有任何 CMS 系统的系统。我搜索了大量的关键字，但没有找到任何有用的东西。如果您能给我一个关键字或类似的东西，我将非常感激。

内容滑块必须在起始位置显示四个项目 - 使用这些导航滑块，它需要允许无限的项目。

预先感谢您的帮助！

信托基金

4

1 回答 1

0

Bootstrap 内置了一个滑块（又名轮播）。使用 Bootstrap 的一个优点是您的网站变成responsive（处理所有尺寸的屏幕/设备）。

这是一个 Bootstrap 滑块的演示。

或者，您可以自己滚动。以下是来自 jsFiddle 的几个简单的滑块演示：

$(function(){
	$('#slider li').hide().filter(':first').show();
	setInterval(slideshow, 3000);
});

function slideshow() {
	$('#slider li:first').fadeOut('slow').next().fadeIn('slow').end().appendTo('#slider');
}
#slider	{ 
    position:relative;
    margin:0;
    padding:0;
    list-style-type:none;
    width:650px;
    height:430px;
    border: 1px solid #008000;     
    overflow:hidden; 
}
#slider li { 
    position:absolute;        
}
#slider img {
    width:650px;
    height:430px;    
}
#slider p { 
    position:absolute;
    bottom:0;
    padding:20px;
    color:#ffffff;
    background-color: #008000;
    opacity: 0.6;
    margin:0;
    left:0;
    right:0; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="slider">
	<li>
		<a href="https://flic.kr/p/pq1UFA">
			<img src="https://c4.staticflickr.com/4/3867/15367978792_acd632254d_h.jpg" alt="Alter Apfelbaum"/>
		</a>
		<p>Alter Apfelbaum</p>
	</li>
	<li>
    	<a href="https://flic.kr/p/ppXtn4">
        	<img src="https://c3.staticflickr.com/3/2942/15367308281_cf8a164414_h.jpg" alt="Ruth St Flowers-191"/>
    	</a>
    	<p>Ruth St Flowers-191</p>
	</li>
	<li>
    	<a href="https://flic.kr/p/pq5a4k">
        	<img src="https://c4.staticflickr.com/4/3862/15368612485_251ef5de2f_h.jpg" alt="Canada Close In."/>
    	</a>
    	<p>Canada Close In.</p>
	</li>
</ul>

jsFiddle - 淡出，重复（与上面的代码片段相同）

jsFiddle - 滑动，点击

Bootstrap 教程 （一切都是关于网格的 - 掌握网格并且你已经掌握了 Bootstrap）

关于滑块的重要一点是要了解滑块是什么：它只是一个 DIV 容器，其中包含几个其他 DIV（这些内部 DIV 中的每一个都包含照片、<h1>（或其他）、<p>带有文本的标签等，并且全部排成一行并排排成一排）。

想象一个纸板移动箱坐在地板上，左右两侧都有孔，前面有一个观察口。你有一列鞋盒从左到右滑过，每个都停在观察口。当每个鞋盒从移动的盒子中滑出时，它会被拉回火车的末端，所以这个过程会无限地继续下去。

关键的秘密是纸板移动箱的样式position:relative;overflow:hidden;和每个鞋盒的样式float:left（将它们并排对齐，因为 DIV 的默认设置是相互堆叠）。

每个鞋盒都是自己的立体模型。每个鞋盒都是一个容器，每个鞋盒里面可以有一个图像、一个 h1、一些并排的 div、一个页脚——所有这些都在每个鞋盒内（又名“容器”，又名 div）。每个鞋盒都是一个 div。DIV 可以并且通常应该包含其他 div。<section>, <nav>, <aside>,<footer>都是 DIV。为什么名字不一样？对于搜索引擎优化。

上面发布的示例应该可以为您解决问题。您只需要更改每个鞋盒的内容/形状。

这是一篇很棒的文章，它解释了有关样式容器 div （又名“鞋盒”）的大量内容。

于 2016-04-04T17:49:04.993 回答