简单的图片轮播jquery

转自: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>

  

时间: 2025-01-03 01:01:51

简单的图片轮播jquery的相关文章

js最简单焦点图片轮播代码

将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.js"></script> 注意:代码中图片路径修改为你自己的图片地址 var widths=725; //焦点图片宽 var w=0; var widthss=widths+w; var heights=295; //焦点图片高 var heightss=heightss+w; v

简单的图片轮播效果

用js代码来实现一个简单的图片轮播效果 鼠标移入图片后显示左右箭头按钮,点击就可以实现图片的切换. 以下分别是html代码和js代码,欢迎批评和讨论! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> *{padding:0px; margin:0px;

图片轮播(Jquery)

昨天在博客园里面看到imwtr写的图片轮播(淡入淡出)的文章,觉得是否自己可以将该功能写成Jquery插件的形式,也方便之后如果需要的时候可以直接使用. 经过调整和整合,完成了第一版本的jquery.carousel.js,接下来先简单介绍界面和功能: 1.界面 2.功能 点击切换.向前切换.向后切换.定时切换 3.功能实现 (1).测试代码 $(function () { var data = [ { src: 'Content/home/1.jpg', info: '1.jpg点击图片导航到

图片轮播jQuery

      <script type="text/javascript">         //图片轮播         var bannerIndex = 0; bannerTimer = null;         function banner() {             ++bannerIndex;             if (bannerIndex > 5) {                 bannerIndex = 0;            

一个简单的图片轮播功能(图片自动播放,点击控件可直接跳转对对应图片)

<!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-

使用jQuery实现简单的图片轮播

<!--先把样式定义好--> <style> *{ box-sizing: border-box; margin: 0px; padding: 0px; } body{ background-color: lightgray; } .MarginDiv{ border: 1px solid green; width: 1320px; height: 245px; overflow: hidden; margin: 0px auto; position: relative; } .M

纯CSS3代码实现简单的图片轮播

以4张图片为例:1.基本布局:将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,相框设置1个图片的大小并设置溢出隐藏,以保证正确显示一个照片.2.设置动画:然后使用css3动画,通过对photos进行位移,从而达到显示不同的图片,每次偏移一个图片的宽度,即可显示下一张图片.4张图片,需要切换3次.根据需要可以对各个图片添加相应的序号和图片简介. 3.代码如下: <style> #frame{position:absolute

js实现简单的图片轮播

js代码如下 1 <script type="text/javascript"> 2 var n=1; 3 var map=new Array(); 4 map[0]=new Image(); 5 map[1]=new Image(); 6 map[2]=new Image(); 7 map[3]=new Image(); 8 map[4]=new Image(); 9 map[5]=new Image(); 10 map[0].src="images/0.jpg

css3简单的图片轮播

<style> @-webkit-keyframes move{ 0%{left:0px;} 100%{left:-500px;} } #wrap{ width:500px; height:100px; border:1px solid #000000; position:relative; margin:100px auto; overflow:hidden; } /*定位的时候可以不写px*/ #list{ position:absolute; left:0; padding:0px; p