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
Mar 09 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
用js实现in_array的方法
Nov 05 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
Vue.use源码分析
Apr 22 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php笔记之:AOP的应用
2013/04/24 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
Jquery Ajax请求代码(2)
2011/01/07 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python 判断奇数偶数的方法
2018/12/20 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
详解python itertools功能
2020/02/07 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
cf收人广告词大全
2014/03/14 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库