基于jquery实现图片广告轮换效果代码


Posted in Javascript onJuly 07, 2011

效果图:
基于jquery实现图片广告轮换效果代码
实现代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>hotmarquee</title> 
<style type="text/css"> 
* 
{ 
margin: 0; 
padding: 0; 
} 
body 
{ 
font: 12px; 
padding-top: 50px; 
padding-right: 200px; 
padding-bottom: 100px; 
padding-left: 200px; 
} 
ul 
{ 
list-style: none; 
} 
img 
{ 
padding: 2px; 
border: 1px solid #eee; 
} 
a 
{ 
outline: none; 
} 
#imgs 
{ 
width: 410px; 
margin-right: auto; 
margin-left: auto; 
} 
.top, .btm 
{ 
background: url(../images/sprite.gif) no-repeat; 
overflow: hidden; 
} 
.top 
{ 
background-position: 0 0; 
height: 5px; 
} 
.btm 
{ 
height: 7px; 
} 
.mid 
{ 
width: 400px; 
padding: 5px 7px 0; 
border: 1px solid #999; 
} 
.mid ul 
{ 
width: 400px; 
height: 600px; 
background: #fff; 
position: relative; 
overflow: hidden; 
} 
.mid ul li 
{ 
width: 400px; 
height: 600px; 
position: absolute; 
left: 490px; 
top: 0; 
} 
.mid ul li.first 
{ 
left: 0; 
} 
#img_list 
{ 
width: 486px; 
height: 20px; 
padding-top: 5px; 
overflow: hidden; 
height: 1%; 
} 
#img_list a 
{ 
display: block; 
width: 14px; 
height: 14px; 
text-indent: -9999px; 
float: left; 
margin-right: 5px; 
background: url(../images/sprite.gif) no-repeat 0 -13px; 
} 
#img_list a:hover, #img_list a.active 
{ 
background-position: -14px -13px; 
} 
</style> 
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var curr = 0, next = 0, count = 0; 
$(document).ready(function () { 
// 记录图片的数量 
count = $('#img_list a').size(); 
t = setInterval('imgPlay()', 3000); 
// 鼠标移动到图片或导航上停止播放,移开后恢复播放 
$('#imgs li, #img_list a').hover(function () { 
clearInterval(t); 
}, function () { 
t = setInterval('imgPlay()', 3000); 
}); 
//点击导航播放到相应的图片 
$('#img_list a').click(function () { 
// index()函数返回当前导航的下标 
var index = $('#img_list a').index(this); 
if (curr != index) { 
play(index); 
curr = index; 
}; 
return false; 
}); 
}); 
// 播放图片的函数 
var imgPlay = function () { 
next = curr + 1; 
// 若当前图片播放到最后一张,这设置下一张要播放的图片为第一张图片的下标 
if (curr == count - 1) next = 0; 
play(next); 
curr++; 
// 在当前图片的下标加1后,若值大于最后一张图片的下标,则设置下一轮其实播放的图片下标为第一张图片的下标,而next永远比curr大1 
if (curr > count - 1) { curr = 0; next = curr + 1; } 
}; 
// 控制播放效果的函数 
var play = function (next) { 
// 当前的图片滑到左边-500px,完成后返回到右边490px 
// 下一张图片滑到0px处,完成后导航的焦点切换到下一个点上 
$('#imgs li').eq(curr).css({ 'opacity': '0.5' }).animate({ 'left': '-500px', 'opacity': '1' }, 'slow', function () { 
$(this).css({ 'left': '490px' }); 
}).end() 
.eq(next).animate({ 'left': '0px', 'opacity': '1' }, 'slow', function () { 
$('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active'); 
}); 
}; 
</script> 
</head> 
<body> 
<div id="imgs"> 
<div class="mid"> 
<ul> 
<li class="first"><a href="http://meinv.vs2010.com/topic/7/201107/show-id2231.html" 
target="_blank"> 
<img src="http://meinv.vs2010.com/DownLoad/2011-7-6/e9c17b8d52e14757b03729fe57dac21f.jpg" 
alt="1" /></a></li> 
<li><a href="http://meinv.vs2010.com/topic/7/201106/show-id2130.html" target="_blank"> 
<img src="http://meinv.vs2010.com/DownLoad/2011-7-2/2aaaba4b512c4af9ad335d962ea1b00e.jpg" 
alt="2" /></a></li> 
<li><a href="http://meinv.vs2010.com/topic/7/201106/show-id2184.html" target="_blank"> 
<img src="http://meinv.vs2010.com/DownLoad/2011-7-1/622f65f85622417f8c19a47545265c41.jpg" 
alt="3" /></a></li> 
<li><a href="http://meinv.vs2010.com/topic/7/201106/show-id2163.html" target="_blank"> 
<img src="http://meinv.vs2010.com/DownLoad/2011-6-25/81575b5f42ff417e85c13f9a77054f8c.jpg" 
alt="4" /></a></li> 
</ul> 
<div id="img_list"> 
<a href="#1" class="active">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4"> 
4</a> 
</div> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
javascript操作excel生成报表示例
May 08 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
基于node实现websocket协议
Apr 25 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 #Javascript
基于json的jquery地区联动效果代码
Jul 06 #Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 #Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 #Javascript
jquery中获取元素的几种方式小结
Jul 05 #Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 #Javascript
Javascript计算时间差的函数分享
Jul 04 #Javascript
You might like
优化PHP程序的方法小结
2012/02/23 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
Python冲顶大会 快来答题!
2018/01/17 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
python3实现高效的端口扫描
2019/08/31 Python
python关闭占用端口方式
2019/12/17 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
Python with语句用法原理详解
2020/07/03 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
工作证明英文模板
2014/10/21 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
刑事撤诉申请书
2015/05/18 职场文书
幽默导游词开场白
2015/05/29 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
python多次执行绘制条形图
2022/04/20 Python