jquery特效 幻灯片效果，效果图如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<title>jquery特效</title>

<style>

/* CSS Document */

body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}

ul,ol,li{list-style:none;}

input,button{margin:0;font-size:12px;vertical-align:middle;}

body{font-size:12px;font-family:Arial, Helvetica, sans-serif;  text-align:center; margin:0 auto; }

table{border-collapse:collapse;border-spacing:0;}

a{ color:#333; text-decoration:none;}

.box{ width:420px; margin:20px auto; position:relative; overflow:hidden; text-align:left;}

.box img{border:0px; width:420px;}

.big{ width:100%; float:left; height:196px; overflow:hidden; margin-bottom:2px;}

.big a{ display:none;}

.big span{ position:absolute; left:0; top:167px; font-size:13px; color:#fff; z-index:11; height:30px; line-height:30px; text-indent:1em; width:100%; )}

.num{ width:424px; margin-right:-24px; float:left; height:53px; padding-top:2px;}

.num li{ width:99px; padding-top:5px; padding-left:1px; cursor:pointer; float:left; margin-right:6px;height:48px;}

.num img{ width:98px;}

.num li.on{ background:url(../images/bg01.gif) no-repeat 0 0;}

.txtbg{ position:absolute; left:0; top:167px; width:100%; height:30px; background:#000; opacity:0.5;filter:alpha(opacity=50); z-index:10;}

</style>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

var timer;

var i=-1;

var offset=3000;

function roll(){

	i++;

	if(i>3){

		i=0;

	}

	slide(i);

	timer=setTimeout(roll,offset)

}

function slide(i){

	$('.big a').eq(i).fadeIn().siblings().hide();

	$('.num li').eq(i).siblings().removeClass('on');

	$('.num li').eq(i).addClass('on');

}

function stopBig(){

	$('.big').hover(function(){

		clearTimeout(timer);

	},function(){

		timer=setTimeout(roll,offset);

	});

}

function stoproll(){

	$('.num li').hover(function(){

		clearTimeout(timer);

		i=$(this).index();

		slide(i);

	},function(){

		timer=setTimeout(roll,offset);

	})

}

$(function(){

	roll();

	stoproll();

	stopBig()

})

</script>

</head>

<body>

<div class="box">

	<div class="txtbg"> </div>

	<div class="big">

		<a href="#" style="display:block"><img src="data:images/1.jpg" /><span>标题1</span></a>

		<a href="#"><img src="data:images/2.jpg" /><span>标题2</span></a>

		<a href="#"><img src="data:images/3.jpg" /><span>标题3</span></a>

		<a href="#"><img src="data:images/4.jpg" /><span>标题4/span></a>

	</div>

	<ul class="num">

		<li class="on"><img src="data:images/1s.jpg" /></li>

		<li><img src="data:images/2s.jpg" /></li>

		<li><img src="data:images/3s.jpg" /></li>

		<li><img src="data:images/4s.jpg" /></li>

	</ul>

</div>

</body>

</html>

jquery特效 幻灯片效果的更多相关文章

  1. 【jquery】幻灯片效果

    闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...

  2. jQuery 特效：盒子破碎和移动动画效果

    今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...

  3. 一个很好的幻灯片效果的jquery插件--kinMaxShow

    在做一些网站时,或多或少的要给网站做幻灯片效果,以前每次做这个效果,都是现成带网上找,找到的很多很杂,而且用完后就不会再理会更加不会去总结代码. 无意中找到了kinMaxShow这个插件,机会满足了我 ...

  4. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  5. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  6. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  7. Web设计师值得收藏的10个jQuery特效

    jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的J ...

  8. 一款经典的jQuery slidizle 幻灯片

    jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换 在线实例 默认效果 水平/左右切换 垂直/上下切换 循环 自动播放 缩略图 进度条 回调函数 使用方法 < ...

  9. Codrops 教程：实现内容倾斜的 3D 幻灯片效果

    今天给大家分享的优秀教程来自 Codrops 网站,实现一个内容倾斜的 3D 幻灯片效果.我们平常见到的都是那种水平或者垂直滚动的效果,这个倾斜的内容滑动效果相信会让你眼前一亮.因为使用了 CSS 3 ...

随机推荐

  1. Java NIO--初步认识

    : 一．java NIO 和阻塞I/O的区别      1. 阻塞I/O通信模型      2. java NIO原理及通信模型 二．java NIO服务端和客户端代码实现 一．java NIO 和阻 ...

  2. windows下安装ruby和 rails的痛苦经历

    准备安装ruby on rails,在网上搜了下,步骤都类似,但实际安装过程中却碰到很多问题.下面详细说下: 说明下,文章是按照我尝试的过程描述的.但最终是靠 运行 railsinstaller一键式 ...

  3. Struts2 学习笔记16 struts标签 part2

    接下来说一下if标签.下面是结果图. <li><s:if test="#parameters.age[0]<0">error!</s:if> ...

  4. Linux高性能server编程——Linux网络基础API及应用

     Linux网络编程基础API 具体介绍了socket地址意义极其API,在介绍数据读写API部分引入一个有关带外数据发送和接收的程序,最后还介绍了其它一些辅助API. socket地址API 主 ...

  5. BZOJ 3163: [Heoi2013]Eden的新背包问题( 背包dp )

    从左到右, 从右到左分别dp一次, 然后就可以回答询问了. ---------------------------------------------------------- #include< ...

  6. Qt 无边框窗体改变大小 完美实现

    近期,做项目用到无边框窗体,令人蛋疼的是无边框窗体大小的改变要像右边框那样,上下左右四周,而且要流畅. 网上也找了些代码,发现居然还要连接到windows事件,这显然不合常理,后来自己新建了demo, ...

  7. Android学习笔记：Activity生命周期详解

    进行android的开发,必须深入了解Activity的生命周期.而对这个讲述最权威.最好的莫过于google的开发文档了. 本文的讲述主要是对 http://developer.android.co ...

  8. python binary lib on win/各种python库的二进制包

    虽然很不愿意在windows上折腾python,但有时linux不在身边的时候还得在windows上写代码.很久之前找到这个地址,后来忘了,今天搜了半天才把它找到,所以记录一下. http://www ...

  9. CQOI2015 选数

    题目 从\([L, H]\)(\(H-L\leq 10^5\))选出\(n\)个整数,使得这些数的最大公约数为\(k\)的方案数. 算法 首先有一个很简单的转化,原问题可以简化为: 从\([\lcei ...

  10. 一步一步重写 CodeIgniter 框架 (4) —— load_class 管理多个对象实例的思路

    我们使用CodeIgniter 框架最主要是想利用其 MVC 特性,将模型.视图分开,并通过控制器进行统一控制.在尝试实现 MVC 模式之前,我们将实现其中一个对程序结构非常有用的技巧,就是 load ...