jQuery CSS图像滑块
时间：2020-02-23 14:46:10 来源:igfitidea点击:
今天，我们将学习如何制作自己的jQuery图像滑块。
网站的核心-滑块
图像滑块或者画廊是任何的主要首页内容。
始终创建一个动态的动态相册，而不是转到一个静态页面，因为页面上到处都是图片，这总是一个更好的选择。
我不会说在您的上使用所有滑块，但是当您有很多图像时，它们肯定会派上用场。
有很多很好的理由选择这些滑块而不是静态内容。
滑块的优点
用于突出显示重要信息。
他们可以描绘出您是谁以及您的全部身份。
它们比静态内容更具吸引力，并节省了大量空间。
创建一个漂亮的图库。
用于在各种幻灯片之间分发信息并正确指导用户。
给您的网页优雅的外观。
它们可以链接到其他内容以显示即显消息。
jQuery Image Slider前提条件
本文假定读者具有有关什么是网页的基本知识，HTML基本标签，很少CSS属性和JavaScript知识。
您可以访问www.w3schools.com上的这些主题。
那些熟悉这些知识的人可以直接从"实施滑块"部分开始。
实现jQuery CSS图像滑块
现在，有了HTML，CSS和JavaScript的一些基本背景，我们就可以继续执行滑块了。
只需遵循以下准则。
jQuery Image Slider基本目录结构
让我们在Root目录中的文件夹之间组织不同的资源。
" SimplePhotoSlider"是我们的Root文件夹，其中包含带有其他子文件夹HTML文件。" scripts"文件夹包含Javascript库，例如JQuery和其他一些脚本文件。
" styles"文件夹包含定义不同HTML标签样式CSS文件。
"图像"文件夹包含两个子文件夹，用于存储不同尺寸的图像。
一张照片/框架jQuery Slider每帧一张照片意味着一次您只会看到一张幻灯片。
该滑块仅具有与两个名为"下一个"和"上一个"的导航控件一起移动的幻灯片。
滑块的布局如图所示。
SimpleSlider.html文件具有结构元素以及与为滑块创建对象有关的脚本。
观察每个幻灯片图像如何被列为无序列表元素。
两个文件simpleStyle.css和simpleSliderScript.js包含用于控制滑块运动和方向的样式和方法。
您还需要引用JQuery库，即https://code.jquery.com/jquery-2.1.0.js，可以下载并保存在" scripts"文件夹中。
simpleSliderScript.jsslider()方法的解释接受两个参数并提取一些信息，如否。
图片列表和图片宽度中的图片。" simpleSliderScript.js"文件中的" transition"对象计算每次移动时的位移，该位移等于幻灯片图像的宽度。
用户单击导航按钮后，" setCurrentPos"对象将计算"当前"计数器的值。
基于按下的"下一个"或者"上一个"按钮，电流值将增加或者减少。
同样，如果"当前"值低于0，则将其设置为列表中的最后一个元素。
所有这些文件的代码如下所示。
HTML代码
SimpleSlider.html
<!Doctype html>
<html>
<head>
<title>Simple Slider</title>
<link rel="stylesheet" href="styles/simpleStyle.css">
</head>
<body>
<!-- Container for Slider and Navigation Controls -->
<div class="gallery">
<h2>Photo Slider</h2>
<!-- The actual moving Slider -->
<div class="slider">
<ul>
<li><img src="images/bigimg/bigimg1.jpeg" class="slides" alt="Image1"></li>
<li><img src="images/bigimg/bigimg2.jpeg" class="slides" alt="Image2"></li>
<li><img src="images/bigimg/bigimg3.jpeg" class="slides" alt="Image3"></li>
<li><img src="images/bigimg/bigimg4.jpeg" class="slides" alt="Image4"></li>
</ul>
</div>
<!-- Navigation Button Controls -->
<div id="slider-nav">
<button data-dir="prev">Previous</button>
<button data-dir="next" style="float:right;">Next</button>
</div>
</div>
<!-- Loading JavaScript Codes. -->
<script src="scripts/jquery-2.1.0.js"></script>
<script src="scripts/simpleSliderScript.js"></script>
<script>
//
jQuery(document).ready(function ($) {
//creating a container variable to hold the 'UL' elements. It uses method chaining.
var container=$('div.slider')
.css('overflow','hidden')
.children('ul');
/*
On the event of mouse-hover,
i) Change the visibility of Button Controls.
ii) SET/RESET the "intv" variable to switch between AutoSlider and Stop mode.
*/
$('.gallery').hover(function( e ){
$('#slider-nav').toggle();
return e.type=='mouseenter'?clearInterval(intv):autoSlider();
});
//Creating the 'slider' instance which will set initial parameters for the Slider.
var sliderobj= new slider(container,$('#slider-nav'));
/*
This will trigger the 'setCurrentPos' and 'transition' methods on click of any button
"data-dir" attribute associated with the button will determine the direction of sliding.
*/
sliderobj.nav.find('button').on('click', function(){
sliderobj.setCurrentPos($(this).data('dir'));
sliderobj.transition();
});
autoSlider(); //Calling autoSlider() method on Page Load.
/*
This function will initialize the interval variable which will cause execution of the inner function after every 2 seconds automatically.
*/
function autoSlider()
{
return intv = setInterval(function(){
sliderobj.setCurrentPos('next');
sliderobj.transition();
}, 2000);
}
});
</script>
</body>
</html>
CSS代码
simpleStyle.css
*
{
margin:0;
padding:0;
}
.gallery
{
width:640px;
height:370px;
margin:10px auto;
background:#999;
border:1px solid orange;
}
.slider
{
width:inherit;
height:344px;
overflow:scroll;
}
.slider ul
{
width:10000px;
list-style:none;
margin-left:0px;
}
.slider li
{
float:left;
}
#slider-nav
{
display:none; /* This is important to hide the buttons if jQuery is 不支持. */
margin-top: -10em;
cursor: pointer;
}
JavaScript代码
simpleSliderScript.js
/*
This method will initialize each slider instance.
*/
function slider(container, nav){
this.container=container;
this.nav=nav.hide(); //This will assign 'nav' from parameters to 'nav' of current slider instance. It uses method chaining.
this.imgs=this.container.find('.slides'); //Returns jQuery object containing all matched elements.
console.log('Value of this.imgs is : '+this.imgs);
this.width=this.imgs[0].width;
console.log('Value of width is : '+this.width);
this.imgLen=this.imgs.length; //Returns the total number of sliding elements.
/* Initialize the "current" counter.
This counter keeps track of the index of current slide in the unordered list of elements.
This will be used for calculating the required displacement.
*/
this.current=0; //Initialize the "current" counter.
}
//This method will apply the needed animation and displacement.
slider.prototype.transition=function(coords){
this.container.animate({
'margin-left': coords || -(this.current*this.width) //First element is multiplied by Zero.
},500);
};
//This method will set the "current" counter to next position.
slider.prototype.setCurrentPos=function(dir){
var pos=this.current;
console.log('Value of this.value is : '+dir);
//It'll check which button is pressed and accordingly increments or decrements the 'pos' variable.
pos+= ~~(dir=='next') || -1; //You can use alternate "Math.floor()" method instead of double tilde (~~) operator.
this.current=(pos<0)?this.imgLen-1: pos%(this.imgLen);
console.log(this.current);
};
源代码在任何需要的地方都有注释。
如有特殊疑问，您可以通过注释直接问我。
Simple Image Slider Output
多图像/框架jQuery滑块每帧三张照片意味着您一次可以看到三张幻灯片。
正确理解"每帧简单一张照片"滑块后，应该很容易掌握在此滑块中所做的新更改。在两个幻灯片之间引入了一个称为"分隔线"的新对象，该幻灯片可以是指定尺寸的任何图像。
因此，已经修改了multiImageSliderScript.js文件中的"转换"对象，以适应任何两张幻灯片之间的间隙(还包括分隔线的宽度)。同样，" setCurrentPos"对象也有一点变化，这很容易理解。
从代码MultiImageSlider.html中可以看到，该无序列表已经过一些修改，可以在两个连续的幻灯片元素之间添加分隔符。
所有这些文件的代码如下所示。
HTML代码
MultiImageSlider.html
<!Doctype html>
<html>
<head>
<title>Multiple Image Slider</title>
<link rel="stylesheet" href="styles/multiImageStyle.css">
</head>
<body>
<!-- Container for Slider and Navigation Controls -->
<div class="gallery">
<h2>MultiImage Slider</h2>
<!-- The actual moving Slider with Slides and Dividers-->
<div class="slider">
<ul>
<li><img src="images/smallimg/smallimg1.png" class="slides" alt="Image1"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg2.png" class="slides" alt="Image2"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg3.png" class="slides" alt="Image3"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg4.png" class="slides" alt="Image4"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg1.png" class="slides" alt="Image1"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg2.png" class="slides" alt="Image2"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg3.png" class="slides" alt="Image3"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg4.png" class="slides" alt="Image4"></li>
</ul>
</div>
<!-- Navigation Button Controls -->
<div id="slider-nav">
<button data-dir="prev">Previous</button>
<button data-dir="next" style="float:right;">Next</button>
</div>
</div>
<!-- Loading JavaScript Codes. -->
<script src="scripts/jquery-2.1.0.js"></script>
<script src="scripts/multiImageSliderScript.js"></script>
<script>
//
jQuery(document).ready(function ($) {
//creating a container variable to hold the 'UL' elements. It uses method chaining.
var container=$('div.slider')
.css('overflow','hidden')
.children('ul');
/*
On the event of mouse-hover,
i) Change the visibility of Button Controls.
ii) SET/RESET the "intv" variable to switch between AutoSlider and Stop mode.
*/
$('.gallery').hover(function( e ){
$('#slider-nav').toggle();
return e.type=='mouseenter'?clearInterval(intv):autoSlider();
});
//Creating the 'slider' instance which will set initial parameters for the Slider.
var sliderobj= new slider(container,$('#slider-nav'));
/*
This will trigger the 'setCurrentPos' and 'transition' methods on click of any button
"data-dir" attribute associated with the button will determine the direction of sliding.
*/
sliderobj.nav.find('button').on('click', function(){
sliderobj.setCurrentPos($(this).data('dir'));
sliderobj.transition();
});
autoSlider(); //Calling autoSlider() method on Page Load.
/*
This function will initialize the interval variable which will cause execution of the inner function after every 2 seconds automatically.
*/
function autoSlider()
{
return intv = setInterval(function(){
sliderobj.setCurrentPos('next');
sliderobj.transition();
}, 2000);
}
});
</script>
</body>
</html>
CSS代码
multiImageStyle.css
*
{
margin:0;
padding:0;
}
.gallery
{
width:550px;
height:112px;
margin:10px auto;
background:#999;
border:1px solid orange;
}
.slider
{
width:inherit;
height:100px;
overflow:scroll;
}
.slider ul
{
width:10000px;
list-style:none;
margin-left:0px;
}
.slider li
{
float:left;
}
.dividers
{
margin:0 15px 0 15px; /* This is Important and margin must be same on both sides */
}
#slider-nav
{
display:none; /* This is important to hide the buttons if jQuery is 不支持. */
margin-top: -4em;
cursor:pointer;
}
JavaScript代码
multiImageSliderScript.js
/*
This method will initialize each slider instance.
*/
function slider(container, nav){
this.container=container;
this.nav=nav.hide(); //This will assign 'nav' from parameters to 'nav' of current slider instance. It uses method chaining.
this.imgs=this.container.find('.slides'); //Returns jQuery object containing all matched elements.
console.log('Value of this.imgs is : '+this.imgs);
this.width=this.imgs[0].width;
console.log('Value of width is : '+this.width);
this.imgLen=this.imgs.length; //Returns the total number of sliding elements.
/* Initialize the "current" counter.
This counter keeps track of the index of current slide in the unordered list of elements.
This will be used for calculating the required displacement.
*/
this.current=0;
}
//This method will apply the needed animation and displacement.
slider.prototype.transition=function(coords){
this.container.animate({
'margin-left': coords || -(this.current*this.width+35*this.current) //First element is multiplied by Zero. The number 35 is the actual gap between two slides.
},500);
};
//This method will set the "current" counter to next position.
slider.prototype.setCurrentPos=function(dir){
var pos=this.current;
console.log('Value of this.value is : '+dir);
//It'll check which button is pressed and accordingly increments or decrements the 'pos' variable.
pos+= ~~(dir=='next') || -1; //You can use alternate "Math.floor()" method instead of double tilde (~~) operator.
this.current=(pos<0)?this.imgLen-3: pos%(this.imgLen-2);
console.log(this.current);
};
Multi Images/Frame Slider Output
在单个网页上嵌入多个jQuery图像滑块在本节中，我们将学习如何在单个网页本身中添加多个滑块。
如果您遵循以前的代码，则会发现我们的滑块位于" gallery" div元素内。因此，以相同的方式，我们将添加一个内容完全相同的新gallery div元素，并在需要时为它们指定CLASS和ID属性的其他名称。
因此，必须修改CSS文件以创建两组样式，一组用于gallery-1，另一组用于gallery-2。
multiSliderScript.js文件的唯一变化是，我们正在修改" setCurrentPos"对象以检查两个滑块的"下一步"按钮。
所有这些文件的代码如下所示。
HTML代码MultiSlider.html
<!Doctype html>
<html>
<head>
<title>Multiple Slider on Single Page</title>
<link rel="stylesheet" href="styles/multiStyle.css">
</head>
<body>
<!-- Container for Slider and Navigation Controls -->
<!-- This is First Slider. -->
<div class="gallery_1">
<h2>MultiImage Slider-1</h2>
<!-- The actual moving Slider with Slides and Dividers-->
<div class="slider_1">
<ul>
<li><img src="images/smallimg/smallimg1.png" class="slides" alt="Image1"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg2.png" class="slides" alt="Image2"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg3.png" class="slides" alt="Image3"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg4.png" class="slides" alt="Image4"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg1.png" class="slides" alt="Image1"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg2.png" class="slides" alt="Image2"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg3.png" class="slides" alt="Image3"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg4.png" class="slides" alt="Image4"></li>
</ul>
</div>
<!-- Navigation Button Controls -->
<div id="slider-nav_1">
<button data-dir="prev_1">Previous</button>
<button data-dir="next_1" style="float:right;">Next</button>
</div>
</div>
<!-- This is Second Slider. -->
<div class="gallery_2">
<h2>MultiImage Slider-2</h2>
<!-- The actual moving Slider with Slides and Dividers-->
<div class="slider_2">
<ul>
<li><img src="images/smallimg/smallimg1.png" class="slides" alt="Image1"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg2.png" class="slides" alt="Image2"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg3.png" class="slides" alt="Image3"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg4.png" class="slides" alt="Image4"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg1.png" class="slides" alt="Image1"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg2.png" class="slides" alt="Image2"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg3.png" class="slides" alt="Image3"><img src="images/smallimg/SmallDivider.jpg" class="dividers" alt="Divider"></li>
<li><img src="images/smallimg/smallimg4.png" class="slides" alt="Image4"></li>
</ul>
</div>
<!-- Navigation Button Controls -->
<div id="slider-nav_2">
<button data-dir="prev_2">Previous</button>
<button data-dir="next_2" style="float:right;">Next</button>
</div>
</div>
<!-- Loading JavaScript Codes. -->
<script src="scripts/jquery-2.1.0.js"></script>
<script src="scripts/multiSliderScript.js"></script>
<script>
//
jQuery(document).ready(function ($) {
//creating a container variable to hold the 'UL' elements. It uses method chaining.
var container_1=$('div.slider_1')
.css('overflow','hidden')
.children('ul');
var container_2=$('div.slider_2')
.css('overflow','hidden')
.children('ul');
/*
On the event of mouse-hover,
i) Change the visibility of Button Controls.
ii) SET/RESET the "intv" variable to switch between AutoSlider and Stop mode.
*/
$('.gallery_1').hover(function( e ){
$('#slider-nav_1').toggle();
return e.type=='mouseenter'?clearInterval(intv_1):autoSlider_1();
});
$('.gallery_2').hover(function( e ){
$('#slider-nav_2').toggle();
return e.type=='mouseenter'?clearInterval(intv_2):autoSlider_2();
});
//Creating the 'slider' instance which will set initial parameters for the Slider.
var sliderobj_1= new slider(container_1,$('#slider-nav_1'));
var sliderobj_2= new slider(container_2,$('#slider-nav_2'));
/*
This will trigger the 'setCurrentPos' and 'transition' methods on click of any button
"data-dir" attribute associated with the button will determine the direction of sliding.
*/
sliderobj_1.nav.find('button').on('click', function(){
sliderobj_1.setCurrentPos($(this).data('dir'));
sliderobj_1.transition();
});
sliderobj_2.nav.find('button').on('click', function(){
sliderobj_2.setCurrentPos($(this).data('dir'));
sliderobj_2.transition();
});
//Calling autoSlider() method on Page Load.
autoSlider_1();
autoSlider_2();
/*
This function will initialize the interval variable which will cause execution of the inner function after every 2 seconds automatically.
*/
function autoSlider_1()
{
return intv_1 = setInterval(function(){
sliderobj_1.setCurrentPos('next_1');
sliderobj_1.transition();
}, 2000);
}
function autoSlider_2()
{
return intv_2 = setInterval(function(){
sliderobj_2.setCurrentPos('next_2');
sliderobj_2.transition();
}, 2000);
}
});
</script>
</body>
</html>
CSS代码
multiStyle.css
*
{
margin:0;
padding:0;
}
.dividers
{
margin:0 15px 0 15px; /* This is Important and margin must be same on both sides */
}
/* This style is for first Slider */
.gallery_1
{
width:550px;
height:112px;
margin:10px auto;
background:#999;
border:1px solid orange;
}
.slider_1
{
width:inherit;
height:100px;
overflow:scroll;
}
.slider_1 ul
{
width:10000px;
list-style:none;
margin-left:0px;
}
.slider_1 li
{
float:left;
}
#slider-nav_1
{
display:none; /* This is important to hide the buttons if jQuery is 不支持. */
margin-top: -4em;
cursor:pointer;
}
/* This is for Second Slider */
.gallery_2
{
width:550px;
height:112px;
margin:10px auto;
background:#999;
border:1px solid orange;
}
.slider_2
{
width:inherit;
height:100px;
overflow:scroll;
}
.slider_2 ul
{
width:10000px;
list-style:none;
margin-left:0px;
}
.slider_2 li
{
float:left;
}
#slider-nav_2
{
display:none; /* This is important to hide the buttons if jQuery is 不支持. */
margin-top: -4em;
cursor:pointer;
}
JavaScript代码
multiSliderScript.js
/*
This method will initialize each slider instance.
*/
function slider(container, nav){
this.container=container;
this.nav=nav.hide(); //This will assign 'nav' from parameters to 'nav' of current slider instance. It uses method chaining.
this.imgs=this.container.find('.slides'); //Returns jQuery object containing all matched elements.
console.log('Value of this.imgs is : '+this.imgs);
this.width=this.imgs[0].width;
console.log('Value of width is : '+this.width);
this.imgLen=this.imgs.length; //Returns the total number of sliding elements.
/* Initialize the "current" counter.
This counter keeps track of the index of current slide in the unordered list of elements.
This will be used for calculating the required displacement.
*/
this.current=0; //Initialize the "current" counter.
}
//This method will apply the needed animation and displacement.
slider.prototype.transition=function(coords){
this.container.animate({
'margin-left': coords || -(this.current*this.width+35*this.current) //First element is multiplied by Zero. The number 35 is the actual gap between two slides.
},500);
};
//This method will set the "current" counter to next position.
slider.prototype.setCurrentPos=function(dir){
var pos=this.current;
console.log('Value of this.value is : '+dir);
//It'll check which button is pressed and accordingly increments or decrements the 'pos' variable.
pos+= ~~(dir=='next_1' || dir=='next_2') || -1; //You can use alternate "Math.floor()" method instead of double tilde (~~) operator.
this.current=(pos<0)?this.imgLen-3: pos%(this.imgLen-2);
console.log(this.current);
};
