- <!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>
- <style type="text/CSS">
- body{padding:0;margin:0;}
- .box{position:relative;width:1000px;margin:100px auto;}
- .cont{height:500px;overflow:hidden;}
- .item{background:rgba(0,0,0,0.5);color:#fff;font-size:120px;position:absolute;left:0;bottom:0;width:100%;text-align:right;line-height:80px;height:80px;}
- .item a{margin-right:10px;cursor:pointer;text-shadow:0 0 3px rgba(0,0,0,0.8);}
- a.seld{color:#06C;}
- a.hide{display:none;}
- </style>
- <script src1="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- var n = 0;
- $(document).ready(function(){
- count=$(".cont a").length;//显示区域的内容长度
- $(".item a").click(function(){
- $(this).addClass("seld").siblings().removeClass("seld");
- var _index=$(this).index();//分屏的数字索引
- $(".cont>a").eq(_index).fadeIn(300).siblings().fadeOut(300);
- });
- t = setInterval("showAuto()", 2000);//执行定义好的函数
- $(".box").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});/*当鼠标划向图片时终止定时器,离开时再调用定时器*/
- })
- function showAuto()
- {
- n = n >=(count - 1)?0: ++n;
- $(".item a").eq(n).trigger('click');
- }
- </script>
- </head>
- <body>、
- <h1>图片轮播效果简单实现</h1>
- <div class="box">
- <div class="cont">
- <a><img src1="http://images.mangocity.com/upload/6998122/201172320545.jpg" /></a>
- <a class="hide"><img src1="http://www.csup.gov.cn/publish/pubimages/200711717301151.jpg" /></a>
- <a class="hide"><img src1="http://www.ego-photo.com/bbs/attachment/Mon_1107/28_8904_66a3b12f7b96272.jpg" /></a>
- <a class="hide"><img src1="http://www.worldshow.cn/article/UploadPic/2008-7/200879153333156.jpg" /></a>
- </div>
- <div class="item">
- <a class="seld">・</a>
- <a>・</a>
- <a>・</a>
- <a>・</a>
- </div>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/220820135318.html
来源: http://www.codesnippet.cn/detail/220820135318.html