介绍 & lt; div 类=癰anner"比;
,,,& lt; !——第一张图片为最后一张,用来做轮播连接使用,所以一开始显示的第一章,应是第二张图片,这里图片的宽度为1170 px,所以一开始为-1170 px,同理最后一张图也为第一张图。——比;
& lt;才能div 类=皃ic-list",在
,,,& lt; img src=?静态/img/4. jpg", alt=?“在
,,,& lt; img src=?静态/img/1. jpg", alt=?“在
,,,& lt; img src=?静态/img/2. jpg", alt=?“在
,,,& lt; img src=?静态/img/3. jpg", alt=?“在
,,,& lt; img src=?静态/img/4. jpg", alt=?“在
,,,& lt; img src=?静态/img/1. jpg", alt=?“在
& lt;才能/div>
& lt;才能div id=癰uttons"比;
,,,& lt; !——,确保跨度的数量跟img数量一样多,不包括第一张img和最后一张img——比;
,,,& lt; span 类=& # 39;在# 39;祝辞& lt;/span>
,,,& lt; span> & lt;/span>
,,,& lt; span> & lt;/span>
,,,& lt; span> & lt;/span>
& lt;才能/div>
& lt;才能a href=癹avascript:“,类=癮rrow", id=皃rev"祝辞,lt; & lt;/a>
& lt;才能a href=癹avascript:“,类=癮rrow", id=皀ext"祝辞,gt; & lt;/a>
& lt;/div> css .banner {
,,宽度:100%;
,,身高:500 px;
,,溢出:隐藏。
位置:,才能相对;
}
.banner {
文字修饰才能:没有;
}
.banner .pic-list {
,,宽度:10000 px;
,,身高:500 px;
位置:才能,绝对;
,,z - index: 1;
}
.banner .pic-list img {
,,宽度:1170 px;
浮:,才能离开;
}
#按钮{
位置:才能,绝对;
,,z - index: 2;
,,身高:10 px;
底才能:20 px;
,,左:550 px;
}
# buttons 跨度{
,,光标:指针;
浮:,才能离开;
边境才能:1 px solid # fff;
,,宽度:10 px;
,,身高:10 px;
,,这个特性:50%;
,,背景:# 333;
,,margin-right: 5 px;
}
# buttons 碧绿{
背景:才能,橙色;
}
.arrow {
,,光标:指针;
,,行高:36 px;
,,text-align:中心;
,,字体大小:20 px;
,,粗细:大胆的;
,,宽度:40像素;
,,身高:40像素;
位置:才能,绝对;
,,z - index: 2;
,,:200 px;
背景:才能,rgba (0, 0, 0, 0.5);
,,颜色:# fff;
,,显示:没有;
}
.banner: hover .arrow{显示:块;}
#:{
,,左:20 px;
}
#下一个{
右:才能20 px;
} $(文档)时(函数(){
var 才能;picNum =, 4,//图片数量,根据实际修改
var 才能;picWidth =, 1170;//图片的宽度,根据实际修改
var 才能;picMaxWidth =, 1, *, picNum *, picWidth;
var 才能;currentPic =, 1;
var 才能;next =,美元(& # 39;#下# 39;);
var 才能;prev =,美元(& # 39;#:# 39;);
var 才能;flag =,假;
prev.on才能(& # 39;点击# 39;,函数(){
,,,如果(国旗){
,,,,,calPx (1170);
,,,,,currentPic——;
,,,,,if (currentPic & lt;, 1), {
,,,,,,,currentPic =, picNum;
,,,,,}
,,,,,美元(& # 39;# buttons 跨度# 39;).eq (currentPic-1) .addClass(& # 39;在# 39;).siblings () .removeClass(& # 39;在# 39;);
,,,}
,,});
next.on才能(& # 39;点击# 39;,函数(){
,,,如果(国旗){
,,,,,calPx (-1170);
,,,,,currentPic + +;
,,,,,if (currentPic 祝辞,picNum), {
,,,,,,,currentPic =, 1;
,,,,,}
,,,,,美元(& # 39;# buttons 跨度# 39;).eq (currentPic-1) .addClass(& # 39;在# 39;).siblings () .removeClass(& # 39;在# 39;);
,,,}
,,});
美元才能(& # 39;.banner& # 39;)。(& # 39;鼠标悬停# 39;函数(){
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关jquery + css如何实现图片轮播效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
ps:
功能比较简单,整个框并不能根据图片的大小自动调节,这里所用的图片是1170 * 500的,如果需要改成其他大小的图片,自行修改.pic-list下img的宽度。
.pic-list中的宽度为整个横幅的宽度,如果需要轮播的图片数量很多,。pic-list的宽度应大于数量*单张宽度,html
js
