最近在忙于毕业设计，因为平时我是后台开发的，这次前台也要自己搞，像我这样前台设计烂到渣的果然不会爱了。
刚刚要用到首页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，网上下载即可。
那么效果图如下：
另外一种就是把切换的栏目放到右边去，如下图：
后来又在网上学习了另一种样式，如下图：
当点击向右时，会有一个动态效果，就是左边的那张图片会向左移动，直到消失在浏览器的左侧，然后右边的四张图会依次移到左边的一个位置，在浏览器的最右边会出现新的一张图到达第五个位置。
时间： 2024-10-25 10:28:44