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捕获超链接事件进行局部刷新代码
May 10 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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
smarty模板判断数组为空的方法
2015/06/10 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
python xml解析实例详解
2016/11/14 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python实现可变变量名方法详解
2019/07/01 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
八年级美术教学反思
2014/02/02 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
硕士学位论文评语
2014/12/31 职场文书
个人专业技术总结
2015/03/05 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python