码迷,mamicode.com
首页 > Web开发 > 详细

简单的图片轮播jquery

时间:2016-02-16 16:34:12      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:

转自:http://www.oschina.net/code/snippet_590876_14396

html代码

 <!--getmy轮播-->
    <div class=‘contentone‘>
        <div class=‘checkone‘>
            <a><img src=‘http://images.mangocity.com/upload/6998122/201172320545.jpg‘/></a>
            <a class=‘sitehide‘><img src=‘http://www.worldshow.cn/article/UploadPic/2008-7/200879153333156.jpg‘/></a>
            <a class=‘sitehide‘><img src=‘http://www.ego-photo.com/bbs/attachment/Mon_1107/28_8904_66a3b12f7b96272.jpg‘/></a>          
        </div> 
        <div class="items">
            <a class="selds"></a>
            <a></a>
            <a></a>
            <a></a>
        </div>       
    </div>
  <!--end-->

 css样式 

<style type="text/css">
    /*getmylunb*/
    .contentone{
    position:relative;
      width:1200px;
      height:69px;    
      margin:100px auto;   
    }
    .checkone a img{
    height:75px;width:1200px;
    }
    .sitehide{
     display:none;
    }    
    /*end*/
</style>

jquery代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<SCRIPT> var s = 0; $(document).ready(function(){ //显示区域的内容长度 counts = $(‘.checkone a‘).length; $(‘.items a‘).click(function(){ var _index=$(this).index();//分屏的数字索引 $(".checkone >a").eq(_index).fadeIn(0).siblings().fadeOut(0); }); //执行定义好的时间 t = setInterval(‘showPic()‘,2000); }); function showPic(){ s = s>=(counts-1)?0:++s; $(".items a").eq(s).trigger(‘click‘); } </SCRIPT>

  技术分享

简单的图片轮播jquery

标签:

原文地址:http://www.cnblogs.com/lccjob/p/Jquery.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!