代码如下：
<!DOCTYPE html>
<html>
<head>
  <title>左右移动焦点图片</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="code.jquery/jquery-1.7.1.min.js"></script>
  <style type="text/css">
/*-----------左右控制焦点图-------------*/
#focus_picture_control{
position:relative;
top:120px;
border:1px #EAEAEA solid;
height:135px;
width:490px;
}
/*左右两边的控制按钮*/
#focus_picture_control > span{
position:absolute;
background:url("files/pc_servers.png") no-repeat scroll 0px 0px transparent;
height:135px;
width:25px;
cursor:pointer;
}
span#left_control{
background-position:-235px 59px;
left:0px;
display:block;
}
span#right_control{
background-position:-210px 59px;
right:0px;
display:block;
}
span#left_control:hover{
background-position:-235px -34px;
}
span#right_control:hover{
background-position:-210px -34px;
}
/*中间的焦点图*/
#focus_pictures_control{
position:relative;
width:440px;
height:135px;
overflow:hidden;
}
#focus_pictures_control ul{
position:relative;
list-style:none;
width:440px;
height:135px;
top:-16px;
}
#focus_pictures_control ul li{
position:relative;
float:left;
width:440px;
left:-40px;
height:135px;
}
#focus_pictures_control ul li img{
border:0px;
}
#focus_pictures_control ul li span{
float:left;
}
  </style>
  <script type="text/javascript">
      $(function(){
        var fwidth=$("#focus_pictures_control ul li").width();      //获取单个图片的宽度
        var lens=$("#focus_pictures_control ul li").length;        //获取图片的个数
        var indexes=0;
        var picTimers;
        //为左右按钮添加鼠标按下事件，以显示相应的内容
        $("span#left_control").mousedown(function(){
            indexes++;                        //每次往左移则indexes值加1
            if(indexes==lens)                    //若当前为最后一张图，则将其切换到第一张图，否则往左移
            {showFirPic();
              indexes=0;}
            else
            showpics(indexes);
        });
        $("span#right_control").mousedown(function(){
            indexes--;
            if(indexes==-1)                            //若当前为第一张图，则将其切换到最后一张图，否则往右移
            {showLasPic();
              indexes=lens-1;}
            else
              showpics(indexes);
        });
        //为了实现左右滚动，需要将所有的LI元素放在同一排，所以要计算出ul的宽度
        $("#focus_pictures_control ul").css("width",fwidth*(lens+1));  //因为要实现循环的效果，
所以要将ul的宽度再多一列
        //鼠标滑上焦点元素时停止自动播放，滑出时开始自动播放
        $("#focus_picture_control").hover(function(){
            clearInterval(picTimers);              //清除动画   
        },function(){                          //平常为往左自动播放
            picTimers=setInterval(function(){
                indexes++;
                if(indexes==lens){
                  showFirPic();
                  indexes=0;
                }else{showpics(indexes);}
           
            },3000);
        });
            $("#focus_picture_control").trigger("mouseleave");          //默认触发鼠标离开事件，即自动播放
        //显示图片函数
        function showpics(i){
            var nowleft=-i*fwidth;                //若为后退，则在引用前索引值就已经被减去1了
            $("#focus_pictures_control ul").stop(true,true).animate({"left":nowleft},500);
jquery在线图片
           
        }
        //最后一张图切换到第一张
        function showFirPic(){
            $("#focus_pictures_control ul").append($("#focus_pictures_control ul li:first").clone());    //将第一张图添加到最后去
            var nowLeft=-lens*fwidth;              //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
    $("#focus_pictures_control ul").stop(true,true).animate({"left":nowLeft},500,function(){
                $("#focus_pictures_control ul").css("left","0px");
                $("#focus_pictures_control ul li:last").remove();
                });                                            //往左移后再将整个元素恢复到最初样式
        }
   
        //第一张图切换到最后一张
        function showLasPic(){
            //先将整体往左移一列
            showpics(1);        //*重点
            $("#focus_pictures_control ul").prepend($("#focus_pictures_control ul li:last").clone());
            //因为整体先往左移了，所以在最前添加一列时，往左移动的列又会回到原处。。
            var nowRight=-(lens-1)*fwidth;
            $("#focus_pictures_control ul").stop(true,true).animate({"left":"0px"},500,function(){
                $("#focus_pictures_control ul").css("left",nowRight);
                $("#focus_pictures_control ul li:first").remove();
                });
        }
    });
  </script>
</head>
<body>
    <center>
        <strong>jQuery左右移动图片特效</strong><pre>              -----'zhe</pre>
           
        <div id="focus_picture_control" >
            <span id="left_control" target="_self"  ></span>
          <span id="right_control" target="_self" ></span>
            <div id="focus_pictures_control">
              <ul>
                <li>
            <span><a target="_blank" href="www.baidu/">
            <img src="files/fengbao.png" alt="全场包邮 品牌风暴">
            </a></span>
            </li>
            <li>
            <span><a target="_blank" href="www.163/"><img src="files/focus-110-135_1_1.png" alt="反季大促"></a></span>
            <span><a target="_blank" href="www.qq/"><img src="files/focus-110-135_1_2.png" alt="天猫安卓"></a></span>
            <span><a target="_blank" href="www.taobao/"><img src="files/focus-110-135_1_3.png" alt="一元秒杀"></a></span>
            <span><a target="_blank" href="le/"><img src="files/focus-110-135_1_4.png" alt="百搭潮童"></a></span>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。