jquery 图片左右切换，一长条的显示，点击左右移动。

来源：互联网发布：unity3d on click 编辑：程序博客网时间：2024/05/01 02:12

菜鸟啊，想了一天才写出来，唉。

ps: 生活无乐趣，代码更加无乐趣！

.hdjs{display:inline-block; width:100%; margin-top:4px; position: relative; height:101px; background: url("../images/2_05.png") repeat-x;}.hdjs_div{ width: 912px; height:101px; position: relative; margin:0 auto; overflow: hidden;}.hdjs_div .ful{ width: 100%; position: absolute; left: 0; top: 0; height:101px;}.hdjs_div .ful li{ width: 222px; height: 101px; float:left; background: url("../images/2_03.png") no-repeat; margin:0 3px;}.hdjs_div .ful li a{ width: 222px; height: 101px; display: block;}.hdjs_div .ful .spag{ float: left; margin-left:10px; margin-top:25px;}.hdjs_div .ful .divgr{ float: left; width: 130px; text-align: left; margin-left:10px;margin-top:25px;}.hdjs_div .ful .divgr p{ width: 100%; float: left;}.hdjs_div .ful .divgr .pa{font-family:"Arial";color:#f0275e; font-size: 10px; font-weight: bold;}.hdjs_div .ful .divgr .pb{color:#f0275e; font-size: 12px;}.hdjs_div .ful .divgr .pc{color:#9f9f9f; font-size: 12px;}.hdjs .next{ position: absolute; right: -10px; top: 27px; width: 43px; height: 49px;  background: url("../images/pic.png") -40px -316px no-repeat;}.hdjs .nexta{position: absolute; right: -10px; top: 27px; width: 43px; height: 49px;  background: url("../images/pic.png") -123px -316px no-repeat;}.hdjs .prev{ position: absolute; left: -10px; top: 27px; width: 43px; height: 49px;  background: url("../images/pic.png") -0px -316px no-repeat;}.hdjs .preva{ position: absolute; left: -10px; top: 27px; width: 43px; height: 49px;  background: url("../images/pic.png") -83px -316px no-repeat;}

  // Author：sikey  var hdlengt=$(".ful li").length;//获取个数  var hdwidth=$(".ful li").width()+6;//获取宽度  var hd=hdlengt*hdwidth;//宽度乘以个数  var wwidth=(hdlengt-4)*hdwidth;//个数减去显示的4个在乘以宽度  $(".ful").width(hd)//获取的宽度赋值给要显示的宽度  var hdjs=$(".hdjs_div ul");//变量  if(hdjs.scrollLeft()==0){ //如果边距为0      $(".next").remove();//本身删除      $(".hdjs_div").parent().append("<a href='javascript:;' class='nexta'></a>")//添加一个标签  }  function tpgd(id){//函数名，左边移动动画，（其中id为值，从外面传进来，这里用来接收）    hdjs.animate({      'left':-228*id //需要移动多少像素在乘以id的值    })  }  $(".next").live("click",function(){ //点击事件    id-- //每次点击id减值    if(id==0){ // id如果等于0      $(this).remove(); // 本身删除      $(".hdjs_div").parent().append("<a href='javascript:;' class='nexta'></a>")//添加一个标签    }    $(".preva").addClass("prev");//添加一个为prev的样式    $(".prev").removeClass("preva");//删除样式    ii-- //每次点击ii减值    tpgd(id) //执行这个函数,(把id的值传给函数)      })  var id //命名一个变量  var ii=$(".ful li").index(); //ii变量  var ii=1  //ii为1  $(".prev").live("click",function(){ //点击事件    id=ii++  //id每次点击加一    if(hdwidth*id==wwidth){ //判断语句，如果宽度乘以点击的个数的值等于wwidth      $(this).remove(); //删除本身      $(".hdjs_div").parent().append("<a href='javascript:;' class='preva'></a>") //添加标签      //return false    }    $(".nexta").addClass("next"); //添加样式    $(".next").removeClass("nexta"); //删除样式    tpgd(id)  //执行这个函数,(把id的值传给函数)  })

<div class="hdjs">    <div class="hdjs_div">      <ul class="ful">        <li>          <a href="#">          <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span>          <div class="divgr">            <p class="pa">2009-08-24</p>            <p class="pb">CROWN全场3～7折</p>            <p class="pc">活动内容：crown全场38～498元</p>          </div>          </a>        </li>        <li>          <a href="#">          <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span>          <div class="divgr">            <p class="pa">2009-08-24</p>            <p class="pb">CROWN全场3～7折</p>            <p class="pc">活动内容：crown全场38～498元</p>          </div>          </a>        </li>        <li>          <a href="#">          <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span>          <div class="divgr">            <p class="pa">2009-08-24</p>            <p class="pb">CROWN全场3～7折</p>            <p class="pc">活动内容：crown全场38～498元</p>          </div>          </a>        </li>        <li>          <a href="#">          <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span>          <div class="divgr">            <p class="pa">2009-08-24</p>            <p class="pb">CROWN全场3～7折</p>            <p class="pc">活动内容：crown全场38～498元</p>          </div>          </a>        </li>        <li>          <a href="#">          <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span>          <div class="divgr">            <p class="pa">2009-08-24</p>            <p class="pb">CROWN全场3～7折</p>            <p class="pc">活动内容：crown全场38～498元</p>          </div>          </a>        </li>        <li>          <a href="#">          <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span>          <div class="divgr">            <p class="pa">2009-08-24</p>            <p class="pb">CROWN全场3～7折</p>            <p class="pc">活动内容：crown全场38～498元</p>          </div>          </a>        </li>                <li>          <a href="#">          <span class="spag"><img src="images/index1_15.png" width="65" height="48" /></span>          <div class="divgr">            <p class="pa">2009-08-24</p>            <p class="pb">CROWN全场3～7折</p>            <p class="pc">活动内容：crown全场38～498元</p>          </div>          </a>        </li>      </ul>    </div>    <a href="javascript:;" class="next"></a>    <a href="javascript:;" class="prev"></a>  </div>

0 0