slides.jquery.js快速实现轮播图效果
最近在做项目的时候，发现了这款插件slides.jquery.js，操作起来非常简单，不用自己去敲js代码，只需要简单配置几个属性就可以实现幻灯片轮播了。
使用例子：
tips:这个例子不做过多样式的修饰，只为了让你们可以快速了解它的使用方法，例子下面我会再写一个好看的轮播图实例哒！
<head>
<script src="jquery-1.2.6.min.js">script>
<script src="slides.jquery.js">script>
head>
<div id="slides">
<div class="slides_container">
<div style="background-color: red">div>
<div style="background-color: yellow">div>
<div style="background-color: green">div>
<div style="background-color: blue">div>
div>
div>
.slides_container {
width: 670px;
height: 370px;
}
.slides_container div {
width: 670px;
height: 370px;
display: block;
}
.prev{
margin-right: 10px;
}
$(function () {
$("#slides").slides({
container: 'slides_container', /*设置放置图片层的顶级div 样式名称*/
generateNextPrev: true, /*是否自动生成 上一个 下一个 按钮*/
generatePagination: true, /*是否自动生成分页导航层*/
next: 'next', /*自动生成的下一个按钮 样式名称*/
prev:'prev', /*自动生成的上一个按钮 样式名称*/
play: 2000,
pause: 2000,
effect: "fade",
currentClass: 'current', /*设置分页导航层中 当前分页项目的样式名称*/
paginationClass:'page', /*设置分页导航层的 样式名称*/
});
});
效果图如下：
实例
经测试，可正确显示，图片和一些图标你们可以替换成自己的哈。ps:我分页的图标是设计在一张图片上，然后进行定位显示我想要的那一部分的，你们那里可以按照自己习惯来，如果用多张的就修改一下样式就行了。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="jquery-1.2.6.min.js">script>
<script src="slides.jquery.js">script>
head>
<body>
<div id="banner-box">
<div class="banner-nav banner-nav-abs">
<div class="banner-inner png">
<ul>
<li>
<div>div>
<a href="javascript:;" class="bg1"><span class="png">span>文字文字文字a>
li>
<li>
<div>div>
<a href="javascript:;" class="bg2"><span class="png">span>文字文字文字a>
li>
<li>
<div>div>
<a href="javascript:;" class="bg3"><span class="png">span>文字文字文字a>
li>
<li>
<div>div>
<a href="javascript:;" class="bg4"><span class="png">span>文字文字文字a>
li>
<li>
<div>div>
<a href="javascript:;" class="bg5"><span class="png">span>文字文字文字a>
li>
<li>
<div>div>
<a href="javascript:;" class="bg6"><span class="png">span>文字文字文字a>
li>
ul>
div>
div>
<div class="banner-list">
<li style="background: url(img/9df786c8988a28d2a2f9e2f807b0898e.jpg) ;">
<div class="animate-box png">
<div class="t-d">
<h2>文字h2><br/>
<p>
文字文字文字文字文字文字
<br/>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
p>
<p>
<a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多
>>a>
p>
div>
<div class="animate-img"><img src="img/a777b23736b812414d59e18810923b54.png" alt="营销型PHPCMS建站系统">div>
div>
li>
<li style="background: url(img/636ac37125119d607b3d09c1de0d42d1.png) ;">
<div class="animate-box png">
<div class="t-d">
<h2>文字h2><br/>
<p>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
<br/>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
p>
<p>
<a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多
>>a>
p>
div>
<div class="animate-img"><img src="img/3c0fa7f92161942b2ae01eee3fa4a606.png" alt="提升企业效率的管理软件">
div>
div>
li>
<li style="background: url(img/e293a9de67ac76b9e3935e29746017f3.jpg) ;">
<div class="animate-box png">
<div class="t-d">
<h2>文字h2><br/>
<p>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
<br/>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
p>
<p>
<a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多
>>a>
p>
div>
<div class="animate-img"><img src="img/7234cc1cde26b5706851778da4c2abaf.png" alt="互联网产品和企业管理咨询">
div>
div>
li>
<li style="background: url(img/988cd5140fc8f79336a245f6049f1af9.jpg) ;">
<div class="animate-box png">
<div class="t-d">
<h2>文字h2><br/>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
<br/>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
p>
<p>
<a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多
>>a>
p>
div>
<div class="animate-img"><img src="img/5cad388a23c06f1107e50da1721e810b.png" alt="大数据高并发的系统解决方案">div>
div>
li>
<li style="background: url(img/3915643fd2db78f09ff0b2d543b83a38.jpg) ;">
<div class="animate-box png">
<div class="t-d">
<h2>文字h2>
<p><br/> 文字文字文字文字文字文字文字文字文字文字字文字文字文字
<br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字
<br/> 文字文字文字文字文字文字文字文字文字文字文文字文字文字
<br/>文字文字文字文字文字文字文字文字文字文字文字文字文字文
<br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
<br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
p>
<p>
<a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多
>>a>
p>
div>
<div class="animate-img"><img src="img/4e1ecdad7b77b2adb51a9e190322c632.png" alt="平台网站建设">div>
div>
li>
<li style="background: url(img/8d2483d87745aaa88e2a6dd887b8371c.jpg) ;">
<div class="animate-box png">
<div class="t-d">
<h2>文字h2>
<p><br/> 文字文字文字文字文字文字文字文字文字文字字文字文字文字
<br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字
<br/> 文字文字文字文字文字文字文字文字文字文字文文字文字文字
<br/>文字文字文字文字文字文字文字文字文字文字文字文字文字文
<br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
<br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
p>
<p>
<a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多
>>a>
p>
div>
<div class="animate-img"><img src="img/46a85e97bb0745ffa4b9c3a4e9089d03.png" alt="电商网站建设">div>
div>
li>
div>
div>
body>
html>
@charset "utf-8";
body {
font-family: "寰蒋闆呴粦";
font-size: 12px;
margin: 0px;
padding: 0px;
color: #333;
line-height: 24px;
height: auto;
clear: both;
min-width: 1200px;
}
img {
border: 0px;
}
ul,
li {
list-style: none;
}
em,
i {
font-style: normal;
}
a {
text-decoration: none;
color: #333;
outline: none;
}
a:hover {
background-repeat: no-repeat;
color: #03a5e3;
}
.clear {
clear: both;
line-height: 0;
height: 0;
font-size: 0;
}
a,
area {
blr: expression(this.onFocus=this.blur())
}
.clearfix::before, .clearfix::after {
display: table;
line-height: 0;
content: "";
}
.m-t-35 {
margin-top: 35px;
}
#banner-box {
margin: 0px auto;
/* height: 500px;*/
overflow: hidden;
position: relative;
padding-top: -40px;
}
.banner-inner {
height: 65px;
margin: 0px auto
}
.banner-nav-abs {
position: absolute;
left: 0px;
bottom: 0px;
z-index: 3;
min-width: 1200px;
}
.banner-nav-abs-opac {
position: absolute;
width: 100%;
height: 78px;
left: 0px;
bottom: -22px;
z-index: 2
}
.banner-nav-fix {
position: fixed;
left: 0px;
top: 82px;
z-index: 3
}
.banner-nav {
width: 100%
}
.banner-nav ul {
width: 1200px;
margin: 0px auto
}
.banner-nav li {
float: left;
display: inline;
width: 112px;
height: 65px;
font-size: 14px;
padding: 5px 43px 0px 43px;
cursor: pointer;
position: relative;
margin: 0px 1px
}
.banner-nav li div {
width: 110px;
height: 65px;
padding: 5px 43px 0px 43px;
position: absolute;
left: 0px;
top: 0px;
z-index: 5;
background: #fff;
filter: alpha(opacity=20);
-moz-opacity: 0.2;
-khtml-opacity: 0.2;
opacity: 0.2
}
.banner-nav li a span {
display: block;
height: 36px;
width: 60px;
margin: 3px auto 0px auto;
background: url(img/icon-banner.png) no-repeat;
}
.banner-nav li a.bg1 span {
background-position: 15px 2px
}
.banner-nav li a.bg2 span {
background-position: -53px 2px
}
.banner-nav li a.bg3 span {
background-position: -110px 2px
}
.banner-nav li a.bg4 span {
background-position: -174px 2px
}
.banner-nav li a.bg5 span {
background-position: -235px 2px
}
.banner-nav li a.bg6 span {
background-position: -297px 2px
}
.banner-nav li a {
display: block;
float: left;
position: absolute;
left: 0px;
top: 0px;
color: #fff;
z-index: 6;
padding: 5px 43px 0px 43px;
display: inline;
width: 110px;
height: 65px;
padding-top: 5px;
text-align: center
}
.banner-nav li.current {
cursor: default
}
.banner-nav li.current div {
width: 95px;
height: 95px;
background: none;
}
.banner-nav li.current a {
color: #333;
cursor: default;
background: #eee;
}
.banner-nav li.current a.bg1 span {
background-position: 15px -32px
}
.banner-nav li.current a.bg2 span {
background-position: -53px -32px
}
.banner-nav li.current a.bg3 span {
background-position: -110px -32px
}
.banner-nav li.current a.bg4 span {
background-position: -174px -32px
}
.banner-nav li.current a.bg5 span {
background-position: -235px -32px
}
.banner-nav li.current a.bg6 span {
background-position: -297px -32px
}
.banner-list {
position: absolute;
height: 500px;
position: absolute;
z-index: 2;
overflow: hidden;
width: 100%
}
.banner-list li {
width: 100%;
height: 500px;
text-align: center;
float: left;
display: inline-block
}
.banner-list li .animate-box {
width: 1200px;
margin: 0px auto;
position: relative
}
.banner-list li .animate-box .t-d {
position: absolute;
width: 420px;
left: 20px;
top: 100px
}
.banner-list li .animate-box .t-d h2 {
display: block;
margin: 0px;
padding: 0px;
font-size: 30px;
text-align: left;
color: #fff
}
.banner-list li .animate-box .t-d p {
color: #fff;
padding: 10px 0px 0 0;
line-height: 28px;
left: 20px;
text-align: left;
font-size: 14px;
}
.banner-list li .animate-box .animate-img {
position: absolute;
top: 50px;
right: 0px
}
.slider-btn {
width: 100px;
height: 30px;
background: #fff;
border-radius: 4px;
-moz-border-radius: 4px;
line-height: 30px;
text-align: center;
font-size: 12px;
color: #444;
display: block;
font-family: "宋体";
}
.slider-btn:hover {
color: #fff;
background: #c80106;
}
$(function () {
$(".banner-list li").width($(window).width());
$('#banner-box').slides({
generateNextPrev: false, /*是否自动生成 上一个 下一个 按钮*/
generatePagination: false, /*是否自动生成分页导航层*/
paginationClass: "banner-nav", /*设置分页导航层的 样式名称*/
container: 'banner-list', /*设置放置图片层的顶级div 样式名称*/
play: 10000,
pause: 6000,
effect: "fade",
slideEasing: "easeInOutQuart",
slidesLoaded: function () {
},
animationStart: function (current) {
$('.t-d').animate({
top: 100, left: 0
});
$('.animate-img').animate({top: 50, right: 0});
},
animationComplete: function (current) {
$('.t-d').animate({top: 100, left: 20});
$('.animate-img').animate({top: 50, right: 50});
}
});
});
效果图如下：
