首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
Javascript中的方法链（Method Chaining）介绍
Mar 15 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
微信小程序（应用号）开发新闻客户端实例
Oct 24 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 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
el-table(1) 脚手架(2) 子查询(1) Mybatis-Plus(3) create(1) TableField(1) nginx(76) frozenset(1) mounted(1) Next.js(1)
You might like
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
Angular数据绑定机制原理
2018/04/17 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
layui中select，radio设置不生效的解决方法
2019/09/05 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
使用Python生成XML的方法实例
2017/03/21 Python
python实现感知器
2017/12/19 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
澳大利亚男士西服品牌：M.J.Bale
2018/02/06 全球购物
历史学专业推荐信
2013/11/06 职场文书
青春演讲稿范文
2014/05/08 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
学校安全生产承诺书
2014/05/23 职场文书
公司任命书范本
2014/06/04 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
小学教研工作总结2015
2015/05/13 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书