CSS轮播
index.jsp
<!--轮播-->
<div id="fwslider"> <!-- 设置框架大小 -->
<div class="slider_container"> <!-- 只是一个框架,无任何意义 -->
<!-- 设置透明度,优先级,隐藏/显示 -->
<div class="slide" style="opacity: 1; z-index: 0; display: none;">
<img id="img1" src="img/img1.jpg">
</div>
<div class="slide" style="opacity: 1; z-index: 1; display: block;">
<img id="img2" src="img/img2.jpg">
</div>
<div class="slide" style="opacity: 1; z-index: 1; display: block;">
<img id="img3" src="img/img3.jpg">
</div>
<div class="slide" style="opacity: 1; z-index: 0; display: none;">
<img id="img4" src="img/img4.jpg">
</div>
<div class="slide" style="opacity: 1; z-index: 0; display: none;">
<img id="img5" src="img/img5.jpg">
</div>
</div>
<!-- 定时跳转 -->
<div class="timers" style="width: 180px;">
</div>
<!-- 左边的跳转键 -->
<div class="slideNext">
<span></span>
</div>
<!-- 右边的跳转键 -->
<div class="slidePrev">
<span></span>
</div>
</div>
<!--轮播-->
<script src="js/jquery.min.js">
</script>
<script src="js/jquery-ui.min.js">
</script>
<script src="js/fwslider.js">
</script>
轮播css
/* ------------------------------- 轮播风格 ------------------------------- */
#fwslider {
position: relative;
width:100%;
height: 554px;
}
#fwslider .slide {
display: none;
position: absolute;
top:0;
left:0;
z-index: 0;
width:100%;
}
#fwslider .slide img {
width:100%;
}
/*左边跳转键*/
#fwslider .slideNext {
background:#ddd;
width:50px;
height:50px;
position: absolute;
top:50%;
right:-50px;
opacity:0.5; /*设置透明度*/
z-index: 10; /*设置优先度*/
}
/*右边跳转键*/
#fwslider .slidePrev {
background:#ddd;
width:50px;
height:50px;
position: absolute;
top:50%;
left:-50px;
opacity:0.5; /*设置透明度*/
z-index: 10; /*设置优先度*/
}
#fwslider .slideNext span {
background-image:url("../img/arrows.png");
width:45px;
height:45px;
float:left;
background-position:90% 50%;
background-repeat: no-repeat; /*background-repeat 属性定义了图像的平铺模式。*/
cursor: pointer;
}
#fwslider .slidePrev span {
background-image: url("../img/arrows.png");
width: 45px;
height: 45px;
float: left;
background-position: -10% 50%;
background-repeat: no-repeat; /*background-repeat 属性定义了图像的平铺模式。*/
cursor: pointer;
/*
cursor 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
url 需使用的自定义光标的 URL。
注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(南)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。
*/
}
#fwslider .timers {
position: absolute;
bottom:15px;
right:0;
z-index: 3;
}
轮播js
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/fwslider.js"></script>
图片展示