本文是作者在毕业设计中学习并实现前端Slide效果的分享。介绍了包括左右滑动、上下滑动以及带有动态过渡效果的Slide设计，适合后台开发者提升前端技能。
最近在忙于毕业设计，因为平时我是后台开发的，这次前台也要自己搞，像我这样前台设计烂到渣的果然不会爱了。
刚刚要用到首页Slide效果，自己去网上学了一下，下面分享一下我的代码。
首先是最简单的两种效果：左右滑动和上下滑动。
html 代码：
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slider.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>slide</title>
</head>
<body>
<!-- Scheme1 -->
<!-- big_frame(1,2,3,4) -->
<!-- big_list(1,2,3,4) -->
<div id="big_frame" class="frame">
<ul id="big_list" class="list">
<li style="background-color: #000000;">aa</li>
<li style="background-color: #ff0000;">bb</li>
<li style="background-color: #00ff00;">cc</li>
<li style="background-color: #0000ff;">dd</li>
<li style="background-color: #ff00ff;">ee</li>
</ul>
</div>
<br />
<!-- back(1,2,3,4) -->
<!-- small_frame(1,2,3,4) -->
<!-- small_list(1,2,3,4) -->
<!-- slide_nav(1,2) -->
<!-- l_frame(1,2) -->
<a id="back" class="slide_nav" href="#">left</a>
<div id="small_frame" class="l_frame">
<ul id="small_list" class="list">
<li class="cur" style="background-color: #000000;">aa</li>
<li style="background-color: #ff0000;">bb</li>
<li style="background-color: #00ff00;">cc</li>
<li style="background-color: #0000ff;">dd</li>
<li style="background-color: #ff00ff;">ee</li>
</ul>
</div>
<!-- forward(1,2,3,4) -->
<!-- slide_nav(1,2) -->
<a id="forward" class="slide_nav" href="#">right</a>
<br />
<br />
<!-- Scheme2 -->
<div id="big_frame2" class="frame">
<ul id="big_list2" class="list">
<li style="background-color: #000000;">aa</li>
<li style="background-color: #ff0000;">bb</li>
<li style="background-color: #00ff00;">cc</li>
<li style="background-color: #0000ff;">dd</li>
<li style="background-color: #ff00ff;">ee</li>
</ul>
</div>
<br />
<a id="back2" class="slide_nav" href="#">left</a>
<div id="small_frame2" class="l_frame">
<ul id="small_list2" class="list">
<li class="cur" style="background-color: #000000;">aa</li>
<li style="background-color: #ff0000;">bb</li>
<li style="background-color: #00ff00;">cc</li>
<li style="background-color: #0000ff;">dd</li>
<li style="background-color: #ff00ff;">ee</li>
</ul>
</div>
<a id="forward2" class="slide_nav" href="#">right</a>
<br />
<br />
<!-- Scheme3 -->
<div style="float: left;">
<div id="big_frame3" class="frame">
<ul id="big_list3" class="list">
<li style="background-color: #000000;">aa</li>
<li style="background-color: #ff0000;">bb</li>
<li style="background-color: #00ff00;">cc</li>
<li style="background-color: #0000ff;">dd</li>
<li style="background-color: #ff00ff;">ee</li>
</ul>
</div>
</div>
<div style="float: left;">
<a id="back3" class="slide_nav2" href="#">left</a>
<div id="small_frame3" class="l_frame2">
<ul id="small_list3" class="list">
<li class="cur" style="background-color: #000000;">aa</li>
<li style="background-color: #ff0000;">bb</li>
<li style="background-color: #00ff00;">cc</li>
<li style="background-color: #0000ff;">dd</li>
<li style="background-color: #ff00ff;">ee</li>
</ul>
</div>
<a id="forward3" class="slide_nav2" href="#">right</a>
</div>
<br />
<br />
<!-- Scheme4 -->
<div style="float: left;">
<div id="big_frame4" class="frame">
<ul id="big_list4" class="list">
<li style="background-color: #000000;">aa</li>
<li style="background-color: #ff0000;">bb</li>
<li style="background-color: #00ff00;">cc</li>
<li style="background-color: #0000ff;">dd</li>
<li style="background-color: #ff00ff;">ee</li>
</ul>
</div>
</div>
<div style="float: left;">
<a id="back4" class="slide_nav2" href="#">left</a>
<div id="small_frame4" class="l_frame2">
<ul id="small_list4" class="list">
<li class="cur" style="background-color: #000000;">aa</li>
<li style="background-color: #ff0000;">bb</li>
<li style="background-color: #00ff00;">cc</li>
<li style="background-color: #0000ff;">dd</li>
<li style="background-color: #ff00ff;">ee</li>
</ul>
</div>
<a id="forward4" class="slide_nav2" href="#">right</a>
</div>
<br />
<br />
</body>
</html>接下来是 js 代码：
$(function() {
//初始化
function C_slider(frame, list, Lframe, Llist, forwardEle, backEle, scrollType, LscrollType, acitonType, autoInterval) {
this.frame = frame;
this.list = list;
this.Lframe = Lframe;
this.Llist = Llist;
this.forwardEle = forwardEle;
this.backEle = backEle;
this.scrollType = scrollType;
this.LscrollType = LscrollType;
this.acitonType = acitonType;
this.autoInterval = autoInterval;
this.slideLength = $("#" + this.Llist + " > li").length;//总的slider数量
this.currentSlide = 0;//当前
this.FrameHeight = $("#" + this.frame).height();
this.FrameWidth = $("#" + this.frame).width();
this.lFrameHeight = $("#" + this.Lframe).height();
this.lFrameWidth = $("#" + this.Lframe).width();
this.lListHeight = $("#" + this.Llist + " >li").eq(0).outerHeight(true);
this.lListWidth = $("#" + this.Llist + " >li").eq(0).outerWidth(true);
var self = this;
for (var i = 0; i < this.slideLength; i++) {
$("#" + this.Llist + " > li").eq(i).data("index", i);
$("#" + this.Llist + " > li").eq(i).bind(this.acitonType, function() {
self.go($(this).data("index"));
});
};
//给"上一个", "下一个"按钮添加动作
$("#" + this.forwardEle).bind('click', function() {
self.forward();
return false;
});
$("#" + this.backEle).bind('click', function() {
self.back();
return false;
});
//鼠标划过时, 自动轮换的处理
$("#" + this.frame + ",#" + this.Lframe + ",#" + this.forwardEle + ",#" + this.backEle).bind('mouseover', function() {
clearTimeout(self.autoExt);
});
$("#" + this.frame + ",#" + this.Lframe + ",#" + this.forwardEle + ",#" + this.backEle).bind('mouseout', function() {
clearTimeout(self.autoExt);
self.autoExt = setTimeout(function() {
self.extInterval();
}, self.autoInterval);
});
//开始自动轮换
this.autoExt = setTimeout(function() {
self.extInterval();
}, this.autoInterval);
}
//执行运动
C_slider.prototype.go = function(index) {
this.currentSlide = index;
if (this.scrollType == "left"){
$("#"+this.list).animate({
marginLeft: (-index*this.FrameWidth) + "px"
}, {duration: 600, queue: false});
} else if (this.scrollType == "top"){
$("#" + this.list).animate({
marginTop: (-index * this.FrameHeight) + "px"
}, {duration: 600, queue: false});
}
$("#" + this.Llist + " > li").removeClass("cur");
$("#" + this.Llist + " > li").eq(index).addClass("cur");
//对于缩略图的滚动处理
if (this.LscrollType == "left"){
if (this.slideLength * this.lListWidth > this.lFrameWidth){
var spaceWidth = (this.lFrameWidth - this.lListWidth) / 2;
var hiddenSpace = this.lListWidth * this.currentSlide - spaceWidth;
if (hiddenSpace > 0){
if (hiddenSpace + this.lFrameWidth <= this.slideLength * this.lListWidth){
$("#" + this.Llist).animate({
marginLeft: -hiddenSpace + "px"
}, {duration: 600, queue: false});
} else {
var endHidden = this.slideLength * this.lListWidth - this.lFrameWidth;
$("#" + this.Llist).animate({
marginLeft: -endHidden + "px"
}, {duration: 600, queue: false});
}
} else {
$("#" + this.Llist).animate({
marginLeft: "0px"
}, {duration: 600, queue: false});
}
}
} else if (this.LscrollType == "top"){
if (this.slideLength * this.lListHeight > this.lFrameHeight){
var spaceHeight = (this.lFrameHeight - this.lListHeight) / 2;
var hiddenSpace = this.lListHeight * this.currentSlide - spaceHeight;
if (hiddenSpace > 0){
if (hiddenSpace + this.lFrameHeight <= this.slideLength * this.lListHeight){
$("#" + this.Llist).animate({
marginTop: -hiddenSpace + "px"
}, {duration: 600, queue: false});
} else {
var endHidden = this.slideLength * this.lListHeight - this.lFrameHeight;
$("#" + this.Llist).animate({
marginTop: -endHidden + "px"
}, {duration: 600, queue: false});
}
} else {
$("#" + this.Llist).animate({
marginTop: "0px"
}, {duration: 600, queue: false});
}
}
}
}
//前进
C_slider.prototype.forward = function() {
if (this.currentSlide < this.slideLength - 1){
this.currentSlide += 1;
this.go(this.currentSlide);
} else {
this.currentSlide = 0;
this.go(0);
}
}
//后退
C_slider.prototype.back = function() {
if (this.currentSlide > 0){
this.currentSlide -= 1;
this.go(this.currentSlide);
} else {
this.currentSlide = this.slideLength - 1;
this.go(this.slideLength - 1);
}
}
//自动执行
C_slider.prototype.extInterval = function() {
if (this.currentSlide < this.slideLength - 1){
this.currentSlide += 1;
this.go(this.currentSlide);
} else {
this.currentSlide = 0;
this.go(0);
}
var self = this;
this.autoExt = setTimeout(function() {
self.extInterval();
}, this.autoInterval);
}
//实例化对象
var goSlide1 = new C_slider("big_frame", "big_list", "small_frame", "small_list", "forward", "back", "left", "left", "click", 3000);
var goSlide2 = new C_slider("big_frame2", "big_list2", "small_frame2", "small_list2", "forward2", "back2", "top", "left", "click", 5000);
var goSlide3 = new C_slider("big_frame3", "big_list3", "small_frame3", "small_list3", "forward3", "back3", "left", "top", "click", 3000);
var goSlide4 = new C_slider("big_frame4", "big_list4", "small_frame4", "small_list4", "forward4", "back4", "top", "top", "click", 2000);
})
最后是 css 代码：
br {clear: both;}
.frame {
width: 600px;
height: 240px;
background-color: #CCC;
overflow: hidden;
}
.frame .list {
list-style: none;
padding: 0;
margin: 0;
width: 10000px;
}
.frame .list li {
width: 600px;
height: 240px;
float: left;
}
.frame #big_list2 {
height: 10000px;
}
.frame #big_list2 li {
clear: both;
}
.frame #big_list4 {
height: 10000px;
}
.frame #big_list4 li {
clear: both;
}
.l_frame {
width: 260px;
height: 80px;
background-color: #CCC;
overflow: hidden;
float: left;
}
.l_frame .list {
list-style: none;
padding: 0;
margin: 0;
width: 10000px;
}
.l_frame .list li {
float: left;
width: 76px;
height: 76px;
cursor: pointer;
border: solid 2px #cc3910;
}
.l_frame .list .cur {
border: solid 2px #FFFFFF;
}
.l_frame2 {
height: 208px;
width: 80px;
background-color: #CCC;
overflow: hidden;
}
.l_frame2 .list {
list-style: none;
padding: 0;
margin: 0;
height: 10000px;
}
.l_frame2 .list li {
width: 76px;
height: 76px;
cursor: pointer;
border: solid 2px #cc3910;
}
.l_frame2 .list .cur {
border: solid 2px #FFFFFF;
}
.slide_nav {
width: 16px;
height: 80px;
display: block;
float: left;
background-color: #2A0;
text-indent: -10000px;
}
.slide_nav2 {
width: 80px;
height: 16px;
display: block;
background-color: #2A0;
text-indent: -10000px;
}因为是基于 jquery 语法写的，所以还要引用一个文件：jquery.js，网上下载即可。
那么效果图如下：
另外一种就是把切换的栏目放到右边去，如下图：
后来又在网上学习了另一种样式，如下图：
当点击向右时，会有一个动态效果，就是左边的那张图片会向左移动，直到消失在浏览器的左侧，然后右边的四张图会依次移到左边的一个位置，在浏览器的最右边会出现新的一张图到达第五个位置。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
