3种不同方式的焦点图轮播特效分享


Posted in Javascript onOctober 30, 2013

1.自动轮播+经过圆点滚动+鼠标停留在圆点上 时候暂停+离开圆点自动轮播:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>焦点图</title> 
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 
<style type="text/css">*{margin:0; padding:0; list-style:none;} 
.clear-fix{*zoom:1;} 
.clear-fix:after{ content:"\0020"; clear:both; height:0; display:block;} 
h1{ text-align:center;} 
.slider{width:980px; height:365px; margin:0 auto; position:relative;} 
.slider .img_box{width:980px; height:365px; overflow:hidden;} 
.slider ul{width:100000px;} 
.slider li{ width:980px; height:365px; float:left; background:#ccc; text-align:center; font-size:larger; line-height:365px;} 
.slider .num_box{ position:absolute; bottom:10px; right:10px;} 
.slider .num_box a{ width:10px; height:10px; background:#fff; border-radius:5px; display:inline-block;} 
.slider .num_box a.c{ background:#C00;}</style> 
</head> <body> 
<h1>鼠标经过圆点切换</h1> 
<div class="slider"> 
<div class="img_box"> 
<ul class="clear-fix"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 
</div> 
<div class="num_box"> 
<a href="javascript:void(0)" class="c"></a> 
<a href="javascript:void(0)"></a> 
<a href="javascript:void(0)"></a> 
<a href="javascript:void(0)"></a> 
<a href="javascript:void(0)"></a> 
</div> 
</div> 
<script type="text/javascript">//鼠标经过圆点的滚动: 
var n=0; 
function slider(n){ 
$("ul").animate({marginLeft:-n*980},1000); 
$(".num_box a").removeClass("c").eq(n).addClass("c"); 
} 
t=setInterval(function(){ 
n++; 
n=n>=$(".num_box a").length?0:n; 
slider(n); 
},3000) 
slider(n); 
$(".num_box a").hover(function(){ 
clearInterval(t); 
slider($(this).index()); 
},function(){ 
t=setInterval(function(){ 
n=$(".num_box a.c").index()+1; 
n=n>=$(".num_box a").length?0:n; 
slider(n); 
},3000) 
})</script> 
</body> 
</html>

2.自动轮播+鼠标点击圆点滚动+离开圆点自动轮播:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>焦点图1</title> 
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 
<style type="text/css">*{margin:0; padding:0; list-style:none;} 
.clear-fix{*zoom:1;} 
.clear-fix:after{ content:"\0020"; clear:both; height:0; display:block;} 
h1{ text-align:center;} 
.slider{width:980px; height:365px; margin:0 auto; position:relative;} 
.slider .img_box{width:980px; height:365px; overflow:hidden;} 
.slider ul{width:100000px;} 
.slider li{ width:980px; height:365px; float:left; background:#ccc; text-align:center; font-size:larger; line-height:365px;} 
.slider .num_box{ position:absolute; bottom:10px; right:10px;} 
.slider .num_box a{ width:10px; height:10px; background:#fff; border-radius:5px; display:inline-block;} 
.slider .num_box a.c{ background:#C00;}</style> 
</head> <body> 
<h1>鼠标点击圆点切换</h1> 
<div class="slider"> 
<div class="img_box"> 
<ul class="clear-fix"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 
</div> 
<div class="num_box"> 
<a href="javascript:void(0)" class="c"></a> 
<a href="javascript:void(0)"></a> 
<a href="javascript:void(0)"></a> 
<a href="javascript:void(0)"></a> 
<a href="javascript:void(0)"></a> 
</div> 
</div> 
<script type="text/javascript">var n=0; 
function slider(n){ 
$("ul").animate({marginLeft:-n*980},500); 
$(".num_box a").removeClass("c").eq(n).addClass("c"); 
} 
t=setInterval(function(){ 
n++; 
n=n>=$(".num_box a").length?0:n; 
slider(n); 
},3000) 
slider(n); 
$(".num_box a").click(function(){ 
clearInterval(t); 
slider($(this).index()); 
$(".num_box a").mouseout(function(){ 
clearInterval(t); 
t=setInterval(function(){ 
n=$(".num_box a.c").index()+1; 
n=n>=$(".num_box a").length?0:n; 
slider(n) 
},3000); 
}) 
})</script> 
</body> 
</html>

3.自动轮播+点击上一个,下一个,圆点滚动+离开上一个,下一个,圆点自动轮播:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>焦点图2</title> 
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 
<style type="text/css">*{margin:0; padding:0; list-style:none;} 
.clear-fix{*zoom:1;} 
.clear-fix:after{ content:"\0020"; clear:both; height:0; display:block;} 
h1{ text-align:center;} 
.top{ width:980px; margin:0 auto; position:relative;} 
.top input{ width:100px; position:absolute; top:10px;} 
.top .prev{ left:0;} 
.top .next{ position:absolute; right:0;} 
.slider{width:980px; height:365px; margin:0 auto; position:relative;} 
.slider .img_box{width:980px; height:365px; overflow:hidden;} 
.slider ul{width:100000px;} 
.slider li{ width:980px; height:365px; float:left; background:#ccc; text-align:center; font-size:larger; line-height:365px;} 
.slider .num_box{ position:absolute; bottom:10px; right:10px;} 
.slider .num_box a{ width:10px; height:10px; background:#fff; border-radius:5px; display:inline-block;} 
.slider .num_box a.c{ background:#C00;}</style> 
</head> <body> 
<div class="top"> 
<input type="button" value="上一张" class="prev" /> 
<h1>鼠标点击按钮切换</h1> 
<input type="button" value="下一张" class="next" /> 
</div> 
<div class="slider"> 
<div class="img_box"> 
<ul class="clear-fix"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 
</div> 
<div class="num_box"> 
<a href="javascript:void(0)" class="c"></a> 
<a href="javascript:void(0)"></a> 
<a href="javascript:void(0)"></a> 
<a href="javascript:void(0)"></a> 
<a href="javascript:void(0)"></a> 
</div> 
</div> 
<script type="text/javascript">var n=0; 
function slider(index){ 
$("ul").stop().animate({marginLeft:-index*980},1000); 
$(".num_box a").removeClass("c").eq(index).addClass("c"); 
} 
//自动播放: 
t=setInterval(function(){ 
n++; 
n=n>=$(".num_box a").length?0:n; 
slider(n); 
},3000); 

//上一张: 
$(".prev").click(function(){ 
clearInterval(t); 
var index=$(".num_box a.c").index()-1; 
index=index<0?$(".num_box a").length-1:index; 
slider(index); 
}) 
//下一张: 
$(".next").click(function(){ 
clearInterval(t); 
var index=$(".num_box a.c").index()+1; 
index=index>=$(".num_box a").length?0:index; 
slider(index); 
}) 
//点击圆点向右滚动: 
$(".num_box a").click(function(){ 
clearInterval(t); 
var index=$(this).index(); 
slider(index); 
}) 
//鼠标移出按钮和圆点: 
$(".num_box a,.next,.prev").mouseout(function(){ 
clearInterval(t); 
t=setInterval(function(){ 
m=$(".num_box a.c").index()+1; 
m=m>=$(".num_box a").length?0:m; 
slider(m); 
},3000); 
})</script> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
jstree的简单实例
Dec 01 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 Javascript
js同比例缩放图片的小例子
Oct 30 #Javascript
javascript实现颜色渐变的方法
Oct 30 #Javascript
window.onload和$(function(){})的区别介绍
Oct 30 #Javascript
js history对象简单实现返回和前进
Oct 30 #Javascript
js 3种归并操作的实例代码
Oct 30 #Javascript
javascript获取选中的文本的方法代码
Oct 30 #Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 #Javascript
You might like
php图片验证码代码
2008/03/27 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python获取文件ssdeep值的方法
2014/10/05 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Python图片的横坐标汉字实例
2019/12/04 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
公司贷款承诺书
2014/05/30 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
门店店长岗位职责
2015/04/14 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
Python基础之tkinter图形化界面学习
2021/04/29 Python
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle