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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
索趣科技的答案
2007/02/07 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
Javascript复制实例详解
2016/01/28 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
layui表格实现代码
2017/05/20 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
Python3基础之函数用法
2014/08/13 Python
简述Python中的进程、线程、协程
2016/03/18 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
Django forms组件的使用教程
2018/10/08 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
python中doctest库实例用法
2020/12/31 Python
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
护士2014年终工作总结
2014/11/11 职场文书
学生党员检讨书范文
2014/12/27 职场文书
创业计划书之熟食店
2019/10/16 职场文书
分享7个 Python 实战项目练习
2022/03/03 Python
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python