自己做的几个Slide简单效果

最新推荐文章于 2023-11-24 15:20:29 发布

ColorWaterer

最新推荐文章于 2023-11-24 15:20:29 发布

阅读量2.7k

点赞数 1

分类专栏：项目

本文链接：https://blog.csdn.net/ColorWaterer/article/details/41850135

版权

本文是作者在毕业设计中学习并实现前端Slide效果的分享。介绍了包括左右滑动、上下滑动以及带有动态过渡效果的Slide设计，适合后台开发者提升前端技能。

摘要由CSDN通过智能技术生成

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

刚刚要用到首页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=