jQuery实现的简易幻灯片轮播

下载上图,把后缀改为7z解压就可以看到文件.

<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>jQuery Easy Slider</title>
<style>
* {
	margin: 0;
	padding: 0;
}
img {
	border: none;
}
#slider {
	overflow: hidden;
	width: 220px;
	height: 160px;
	border: 3px solid #EEE;
	padding: 1px;
	margin: 60px auto 0;
}
#slider li {
	position: relative;
	left: 0;
	top: 0;
	list-style: none;
}
</style>
<script src="jquery.js"></script>
<script>
function slider(id) {
	fir = $(id + ‘ li:first‘);
	fir.addClass("active");
	$(id + ‘ li‘).not(‘:first‘).hide();
	setInterval(function () {
		act = $(id + ‘ li.active‘);
		if(act.next().val() != undefined) {
			act.hide(0, function() {
				act.next().show();
				act.removeClass("active");
				act.next().addClass("active");
			});
		} else {
			act.hide(0, function() {
				fir.show();
				act.removeClass("active");
				fir.addClass("active");
			});
		}
	}, 2000);
}
$(document).ready(function() {
	slider(‘#slider‘);
});
</script>
</head>
<body>
<ul id="slider">
<li><a href="./1"><img src="1.png" /></a></li>
<li><a href="./2"><img src="2.png" /></a></li>
<li><a href="./3"><img src="3.png" /></a></li>
<li><a href="./4"><img src="4.png" /></a></li>
</ul>
</body>
</html>

时间: 2024-11-07 18:25:59

jQuery实现的简易幻灯片轮播的相关文章

CSS3: animation实现简易幻灯片(轮播)

前言 CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染; 但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作) 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3幻灯片</title> <styl

15款jQuery带缩略图的图片轮播切换特效代码

JQuery宽屏电影大图幻灯片轮播切换代码 jquery带文字缩略图的图片轮播切换代码 jQuery OwlCarousel图片滚动插件世界杯图片轮播滚动代码 jQuery仿中国建设银行带缩略图控制滚动图片轮播切换 jquery图片滑动切换效果左右按钮控制图片滑动轮播切换效果 jQuery幻灯片插件可自动轮播和暂停的图片幻灯片代码 jQuery带缩略图的焦点图代码_带标题的焦点图代码 jquery图片轮播插件带小缩略图片的焦点图切换效果代码 原生js图片插件缩略图片控制大图淡出淡进切换支持图片轮

基于jQuery可悬停控制图片轮播代码

基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id="banner_tabs" class="flexslider"> <ul class="slides"> <li> <a title="" target="_blank"

jquery特效(4)—轮播图②(定时自动轮播)

今天逛了一天街,把田子坊.人民广场.静安寺公园遛了一遍,吃了很多好吃的东西~~~然后就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示的是手动点击轮播效果以及定时自动轮播效果的程序,建议想连贯学习的小伙伴把我昨天写的笔记看完后再看这篇文章~~~~ 下面来看看我做的最终定时自动轮播效果以及手动点击轮播效果: 对于上面的展示动画速度比较快的原因是因为我的截图软件是绿色

天猫首页迷思之-jquery实现左侧广告牌图片轮播

本次要实现的是天猫首页每个楼层左侧的图片轮播效果.见图: 功能点有:点击右箭头向右滑动:点击左箭头向左滑动:什么都不点自动滑动. 1.实现样式.简单分析一下大概的html结构.一个大的div里面包含两个箭头以及轮播的容器.图片是由三个p标签组成,每个p标签中包含3个图片.css见github 1 <div class="floor-show-middle"> 2 <a class="floor-show-middle-arrow arrow-left&quo

jquery特效(3)—轮播图①(手动点击轮播)

今天上班做设计做的头疼,就写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等~~~~~~虽然今天我生日,但是代码还是得写的,不能找借口放松自己,原地踏步也算后退~~~~ 下面来看看最终做的手动点击轮播效果: 哈哈哈,有没有看出来我的四张图片都是美男子哦~~~~找个赏心悦目的图片真不容易,这样才能激起我写轮播图的代码欲望,写出来就可以点击按钮翻他们牌子了~~~~ 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包

jquery实现滑动动画及轮播

在做这个之前我已经模仿了一遍大神的轮播动画做了一次其切换模式就是一张图片隐藏另一张图片显示过渡效果是渐入(fadein),但是目前的动画切换大多数都是用图片的左右切换动作的于是在网上看了一些关于这类型的文章然后再结合自己的理解写了一下. 先上html代码 <div id="wrapper"> <div id="show-area"> <ul> <li id="first"><a href=&q

基于jQuery游戏网站焦点图轮播特效

基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center> <br> <div id="chinaz"> <div class="banner-btn"> <a href="javascript:;" class="prevBtn" r

利用jQuery的淡入淡出实现轮播器

基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡出时却无效果,最后只能使用fadeOut实现,求大神指教 HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm