基于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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php浏览历史记录的方法
2015/03/10 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
学习ExtJS form布局
2009/10/08 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
js实现简单的倒计时
2021/01/28 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
django实现用户注册实例讲解
2019/10/30 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
团员个人的自我评价
2013/12/02 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
美术学专业求职信
2014/07/23 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
作弊检讨书
2015/01/27 职场文书
小学语文教师研修日志
2015/11/13 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
Golang 字符串的常见操作
2022/04/19 Golang