- <!DOCTYPE html>
- <html>
- <head>
- <title>jq幻灯片</title>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
- <!--样式自己控制-->
- <style type="text/CSS">
- <!--
- img { border:none; }
- .title { }
- .info { }
- -->
- </style>
- <script type="text/javascript" src1="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- //第一步,获取或设置要幻灯的区域(图片)的大小
- var divs=$("#imgs").find(".change");
- var imgs=$("#imgs").find("img"); //获取要幻灯的所有的图片
- //以第一个图片的大小为准,当然,也可以手动设置长度和宽度。
- //var width=imgs.eq(0).width();
- //var height=imgs.eq(0).height();
- //下面是手动设置幻灯的大小
- var width=600;
- var height=150;
- //设置幻灯的图片大小,过大则隐藏。
- imgs.css({height:height+"px",width:width+"px",overflow:"hidden"});
- var start=1; //从第几张图片开始幻灯。注意,从1开始,而不是0。
- divs.hide(); //将所有的图片所在的层都隐藏
- divs.eq(start-1).show(); //显示第一个图片所在的DIV
- //获取图片层的绝对位置
- var top=$(".info")[0].offsetTop;
- var left=$(".info")[0].offsetLeft;
- //根据图片层的绝对位置,算出标题层的绝对位置。
- var title_top=top*0.9; //标题层上面位置相对于图片的位置
- var title_left=left*1.5; //标题层左边的相对于图片的位置
- var total=divs.length;
- $(".title").css({left:title_left+"px",top:title_top+"px",zIndex:999,position:'absolute'}); //设置标题层的样式,将其放在图片层上面
- //第二步,运用定时函数,设置幻灯的速度和效果
- var tick=4000; //3秒钟换一个图片
- //下面是图片切换的函数
- window.setInterval(function(){
- if(start<total){ //不是最后一个图片
- start++;
- }else if(start==total){ //是最后一张图片,那么从1开始
- start=1;
- }
- divs.hide(); //隐藏所有的图片层
- divs.eq(start-1).fadeIn("slow"); //显示指定的图片。效果除了fadein,还可以使用其它的动画效果。
- }, tick);
- //如果需要加上1,2,3这样的标号,可以在设置标题层的时候,照样添加就行了。
- //如果需要停止按钮,记得clearInterval掉就行了。
- //JS到这里就全部写完了
- //适合初学者看看,高手路过无视请自便。
- });
- </script>
- </head>
- <body>
- <div id="imgs">
- <div class="change">
- <a href="#" target="_blank" title="" class="title">标题1</a>
- <a href="#" target="_blank" title="" class="info">
- <img src1="http://img01.taobaocdn.com/imgextra/i1/263157633/T2m3KpXalcXXXXXXXX_!!263157633.jpg" alt="图片1" />
- </a>
- </div>
- <div class="change">
- <a href="#" target="_blank" title="" class="title">标题2</a>
- <a href="#" target="_blank" title="" class="info">
- <img src1="http://support1.lenovo.com.cn/lenovo/wsi/v/images/index_notebook_small.png" alt="图片1" />
- </a>
- </div>
- <div class="change">
- <a href="#" target="_blank" title="" class="title">标题3</a>
- <a href="#" target="_blank" title="" class="info">
- <img src1="http://img02.taobaocdn.com/tps/i2/T13wfvXmprXXbkZoL5-305-260.jpg" alt="图片1" />
- </a>
- </div>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/240720134792.html
来源: http://www.codesnippet.cn/detail/240720134792.html