首页 > 代码库 > 自己做的几个Slide简单效果

自己做的几个Slide简单效果

2024-08-07 07:31:42   217人阅读

最近在忙于毕业设计，因为平时我是后台开发的，这次前台也要自己搞，像我这样前台设计烂到渣的果然不会爱了。

刚刚要用到首页Slide效果，自己去网上学了一下，下面分享一下我的代码。

首先是最简单的两种效果：左右滑动和上下滑动。

html 代码：

<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src=http://www.mamicode.com/"jquery.js"></script>>
接下来是 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，网上下载即可。

那么效果图如下：

另外一种就是把切换的栏目放到右边去，如下图：

后来又在网上学习了另一种样式，如下图：


当点击向右时，会有一个动态效果，就是左边的那张图片会向左移动，直到消失在浏览器的左侧，然后右边的四张图会依次移到左边的一个位置，在浏览器的最右边会出现新的一张图到达第五个位置。

自己做的几个Slide简单效果


联系
我们