网页图片循环滚动播放效果
来源：互联网 发布：linux串口命令 编辑：程序博客网 时间：2024/05/22 20:29
图片：http://download.csdn.net/detail/richard_jason/9669814
效果图：
示例代码（HTML）：
<!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=gb2312" />
<title></title>
<style type="text/css">
<!--
*{margin:0px;padding:0px;}
img {border:none;}
#infiniteCarousel { border:1px solid #999; margin:40px auto 0;height:270px; width:520px; position:relative;}
#infiniteCarousel .apawn_dots{width:509px; height:8px; position:absolute; left:0px; margin-top:253px;overflow:hidden; z-index:3;}
#infiniteCarousel .apawn_dots a {float:right; margin:0 4px; display:block; width:8px; height:8px; background: url(images/browser/cir_white.gif) no-repeat;}
#infiniteCarousel .wrapper {float:left;width:520px; height:270px; position:relative; z-index:1px; overflow:hidden;}
#infiniteCarousel .wrapper .slider{width:520px; height:270px;}
#infiniteCarousel .wrapper .slider p {height:270px; width:520px;float:left; overflow:hidden; }
#infiniteCarousel .wrapper .slider p img {width:520px; height:270px;}
#infiniteCarousel .wrapper .slider p span {display:block; width:100%; height:47px; overflow:hidden;margin-top:-47px; line-height:47px; background-color:#000;filter:alpha(opacity=30); opacity:0.3;}
#infiniteCarousel .wrapper .slider p span a {font-size:14px; color:#fff;filter:alpha(opacity=100); opacity:1.0; text-decoration:none; margin-left:10px;}
#infiniteCarousel .arrows {margin-top:111px;width:20px; height:41px; text-align:center; position:absolute; z-index:2; filter:alpha(opacity=40); opacity:0.4; left:0px;display:block;}
#infiniteCarousel .arr_r {margin-left:500px;}
#infiniteCarousel .arrows .arrow {text-decoration:none;}
#infiniteCarousel a.mydots{float:right; margin:0 4px; display:block; width:8px; height:8px; background: url(images/browser/cir_red.gif) no-repeat;}
-->
</style>
<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">
function apawnDone(o,cp){if(o.id=='infiniteCarousel'){$(".apawn_dots>a").removeClass("mydots");var arrA=$(".apawn_dots>a");arrA[arrA.length-parseInt(cp)].className="mydots"}}$(document).ready(function(){var autoscrolling=true;$('#infiniteCarousel').infiniteCarousel().mouseover(function(){autoscrolling=false}).mouseout(function(){autoscrolling=true});if($("#infiniteCarousel>div.apawn_dots")!='undefined'){$(".apawn_dots>a").click(function(){$(this).blur();var iPage=$(".apawn_dots>a").length-parseInt($(this).index());$('#infiniteCarousel').trigger('goto',iPage)})};setInterval(function(){if(autoscrolling){$('#infiniteCarousel').trigger('next')}},5000)});
</script>
<script type="text/javascript" src="js/browser/carousel_min.js"></script>
</head>
<body>
<div id="infiniteCarousel"><span class="arrows"><a class="arrow back" onfocus="this.blur()" href="#"><img src="images/browser/arrow_left.gif"></a></span>
<div class="wrapper">
<div class="slider">
<p><a href="#"><img src="images/browser/img0.jpg" /></a><span><a href="#">Google公司出品 采用Webkit内核</a></span></p>
<p><a href="#"><img src="images/browser/img1.jpg" /></a><span><a href="#">Mozilla公司出品 采用Gecko内核</a></span></p>
<p><a href="#"><img src="images/browser/img2.jpg" /></a><span><a href="#">Microsoft公司出品 采用Trident内核</a></span></p>
<p><a href="#"><img src="images/browser/img3.jpg" /></a><span><a href="#">网际傲游公司出品 最新版本采用Trident和Webkit双内核</a></span></p>
<p><a href="#"><img src="images/browser/img4.jpg" /></a><span><a href="#">网景公司出品 曾经的浏览器王者</a></span></p>
<p><a href="#"><img src="images/browser/img5.jpg" /></a><span><a href="#">Opera公司出品 采用Presto内核</a></span></p>
<p><a href="#"><img src="images/browser/img6.jpg" /></a><span><a href="#">Apple公司出品 采用Webkit内核</a></span></p>
</div>
</div><span class="arrows arr_r"><a class="arrow forward" onfocus="this.blur()" href="#"><img src="images/browser/arrow_right.gif"></a></span>
<div class="apawn_dots"><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#" class="mydots"></a></div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------
JavaScript代码：
(function(){$.fn.infiniteCarousel=function(apawn_dir){function repeat(str,n){return new Array( n + 1 ).join(str);}return this.each(function(){var $wrapper=$('> div', this).css('overflow', 'hidden'),$slider = (apawn_dir=='y')?($wrapper.find('> div').height(9999)):($wrapper.find('> div').width(9999)),$items = $slider.find('> p'),$single = $items.filter(':first'),$apawn_this=this,singleWidth = (apawn_dir=='y')?($single.outerHeight(true)):($single.outerWidth(true)),visible=(apawn_dir=='y')?(Math.ceil($wrapper.innerHeight()/singleWidth)):(Math.ceil($wrapper.innerWidth()/singleWidth)),currentPage=1,pages = Math.ceil($items.length/visible);if($items.length%visible!=0){$slider.append(repeat('<p class="empty" />', visible - ($items.length % visible)));$items = $slider.find('> p');}$items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));$items = $slider.find('> p');if(apawn_dir=='y'){$wrapper.scrollTop(singleWidth * visible);}else{$wrapper.scrollLeft(singleWidth * visible);}function gotoPage(page){var dir = page < currentPage ? -1 : 1,n = Math.abs(currentPage - page),left = singleWidth * dir * visible * n;if(apawn_dir=='y'){$wrapper.filter(':not(:animated)').animate({scrollTop : '+=' + left}, 500, function(){if (page > pages){$wrapper.scrollTop(singleWidth * visible);page = 1;} else if(page == 0){page = pages;$wrapper.scrollTop(singleWidth * visible * pages);}currentPage = page;apawnDone($apawn_this,currentPage);});}else{$wrapper.filter(':not(:animated)').animate({scrollLeft : '+=' + left}, 500, function(){if (page > pages){$wrapper.scrollLeft(singleWidth * visible);page = 1;}else if (page == 0){page = pages;$wrapper.scrollLeft(singleWidth * visible * pages);}currentPage = page;apawnDone($apawn_this,currentPage);});}}$('a.back', this).click(function(){gotoPage(currentPage - 1);return false;});$('a.forward', this).click(function(){gotoPage(currentPage + 1);return false;});$(this).bind('goto', function(event, page){gotoPage(page);});$(this).bind('next', function(){gotoPage(currentPage + 1);});$(this).bind('prev',function(){gotoPage(currentPage - 1);});});};})(jQuery);
- 网页图片循环滚动播放效果
- 图片循环滚动效果
- 图片循环滚动效果
- 滚动播放文字或者图片信息效果
- CSS3实现图片滚动播放效果
- (精)N张图片在网页上循环播放,效果很是不错
- 网页图片无缝循环滚动html代码
- 向上循环滚动的图片展示效果
- jQuery 循环图片滚动切换效果代码
- 无间断的图片循环滚动效果
- 网页图片上下滚动效果代码
- 使用ViewPager实现循环滚动播放图片广告
- 【web前端】JavaScript实现图片幻灯片滚动播放动画效果
- Android使用Recyclerview实现图片水平自动循环滚动效果
- 网页中文字及图片实现滚动效果
- 循环滚动得效果
- Web_JavaScript_JS循环滚动效果；
- iOS 图片滚动播放
- 第九周-OJ-A统计字符个数
- C++学习笔记（二）
- AD仿真功能描述文档
- Android SDCard路径问题
- 进程间通信的四种方式（孙鑫VC17集）
- 网页图片循环滚动播放效果
- Linux内核移植 part1：全面介绍ARM Linux启动流程
- 如何合并两个图标库
- php 设计模式
- Network Useful Knowledge
- php中get和post的区别以及什么时候用get什么时候用post详解
- iOS中的NSOperation
- 第九周：C语言：切面条
- [编程题]对称的二叉树
