网页图片循环滚动播放效果
图片：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" οnfοcus="this.blur()" href="#"><img src="data:images/browser/arrow_left.gif"></a></span>
<div class="wrapper">
<div class="slider">
<p><a href="#"><img src="data:images/browser/img0.jpg" /></a><span><a href="#">Google公司出品 采用Webkit内核</a></span></p>
<p><a href="#"><img src="data:images/browser/img1.jpg" /></a><span><a href="#">Mozilla公司出品 采用Gecko内核</a></span></p>
<p><a href="#"><img src="data:images/browser/img2.jpg" /></a><span><a href="#">Microsoft公司出品 采用Trident内核</a></span></p>
<p><a href="#"><img src="data:images/browser/img3.jpg" /></a><span><a href="#">网际傲游公司出品 最新版本采用Trident和Webkit双内核</a></span></p>
<p><a href="#"><img src="data:images/browser/img4.jpg" /></a><span><a href="#">网景公司出品 曾经的浏览器王者</a></span></p>
<p><a href="#"><img src="data:images/browser/img5.jpg" /></a><span><a href="#">Opera公司出品 采用Presto内核</a></span></p>
<p><a href="#"><img src="data:images/browser/img6.jpg" /></a><span><a href="#">Apple公司出品 采用Webkit内核</a></span></p>
</div>
</div><span class="arrows arr_r"><a class="arrow forward" οnfοcus="this.blur()" href="#"><img src="data: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);
网页图片循环滚动播放效果相关推荐
- html网页图片自动滚动代码,实现网页图片循环滚动的代码 上/下/左/右(html or asp)...
向上: href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/" ...
- 3.8 JS 制作无间断图片循环滚动效果
制作无间断图片循环滚动效果 要求图片高度,高度自行设定,要求显示n张图片(n=你的学号末位+6),例如:你的学号末位是3,那么你需要显示3+6共9张图片,9张图片循环滚动 index.html < ...
- 【web前端】JavaScript实现图片幻灯片滚动播放动画效果
JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.co ...
- html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.se ...
- Qt图片定时滚动播放器+透明过渡动画
目录 参考 结构 PicturePlay.pro main.cpp myqlabel.h 自定义QLabel myqlabel.cpp自定义QLabel pictureplay.h picturepl ...
- html滑动直播,HTML5 canvas实现的静态循环滚动播放弹幕
本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕,分享给大家,具体如下: 使用方法和API 语法如下: canvasBarrage(canvas, data); 其中: canvas ...
- JS实现图片循环滚动
之前在前端的时候有遇到这样一个问题,实现 JS 图片的循环滚动,然后鼠标移入的时候停止滚动,鼠标移开继续滚动,这里无非就是设置了一个定时器,鼠标移上时清除定时器达到滚动停止的目的,鼠标移开时重设定时器 ...
- cocos2d（背景图片循环滚动）
背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...
- html图片自动循环,css实现图片循环的动画效果（代码）
本篇文章给大家带来的内容是关于css实现图片循环的动画效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. *{margin: 0;padding: 0;} .robot{ w ...
最新文章
- 链式比较、奇怪的字母、有趣的import...Python冷知识（六）
- 23Command(命令)模式
- DotNetTextBox V3.0 所见即所得编辑器控件 For Asp.Net2.0(ver 3.0.9Beta)
- ubuntu 14.04
- 罗马音平假名片假名转换器_关于五十音你所要知道的一切！文末附日网高清字帖...
- gvim安装及其配置
- c语言uint8的数组怎么转换为uint32_剖析JS和Redis的数据结构设计：数组
- Linq to sql 结合Entity Framework 的连接查询总结
- Oracle/PLSQL Case Statement
- 老罗的锤子手机是怎么做到一年被“死”N 次的？| 畅言
- 流媒体地址文件制作方法
- VS属性页的目录类型
- 走心！15年程序员老兵的40条编程技巧，先收藏了！
- 兰州中川机场停车费一天多少钱，中川机场附近停车便宜
- scanf的用法大全
- font在html语言中是什么意思,font标签什么意思
- 网页设计如何做？全流程其实只有这五步！
- origin作图所用数据点太多,做图时需要跳过数个数据给一个标记的方法
- m.444lu.co show.php,vml圆角矩形最简布局_javascript技巧
- HTML标签基础知识