jquery特效 幻灯片效果示例代码


Posted in Javascript onJuly 16, 2013

jquery特效 幻灯片效果,效果图如下:
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="images/1.jpg" /><span>标题1</span></a> 
<a href="#"><img src="images/2.jpg" /><span>标题2</span></a> 
<a href="#"><img src="images/3.jpg" /><span>标题3</span></a> 
<a href="#"><img src="images/4.jpg" /><span>标题4/span></a> 
</div> 
<ul class="num"> 
<li class="on"><img src="images/1s.jpg" /></li> 
<li><img src="images/2s.jpg" /></li> 
<li><img src="images/3s.jpg" /></li> 
<li><img src="images/4s.jpg" /></li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
js微信分享实现代码
Oct 11 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 #Javascript
js判断屏幕分辨率的代码
Jul 16 #Javascript
js 调用父窗口的具体实现代码
Jul 15 #Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 #Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 #Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 #Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 #Javascript
You might like
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python web框架学习笔记
2016/05/03 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
python文字转语音的实例代码分析
2019/11/12 Python
Python 项目转化为so文件实例
2019/12/23 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
领班岗位职责范文
2014/02/06 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
体育委员竞选稿
2015/11/21 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL