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 相关文章推荐
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
老生常谈js中的MVC
Jul 25 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
javascript前端实现多视频上传
2020/12/13 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
python读取excel表格生成erlang数据
2017/08/26 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
详解python做UI界面的方法
2019/02/27 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
美国羊皮公司:Overland
2018/01/15 全球购物
美国最大点评网站:Yelp
2018/02/14 全球购物
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
物流管理应届生求职信
2013/11/07 职场文书
毕业生就业协议书
2014/04/11 职场文书
英语专业自荐书
2014/06/13 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫