banzhiyan1828 2015-09-06 07:47 采纳率: 20%
浏览 5679

JQurey轮播图最后一张图片与第一张图片如何做到无缝轮播？并且轮播顺序能和前几张图片轮播顺序一样？

 <!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-Type" content="text/html; charset=utf-8" />
<title>opp手机官网3</title>
<style>
*{margin:0; padding:0;}
li{list-style:none;}
img{border:none;}
a{color:#FFF; text-decoration:none;}
.pic{width:1920px; height:630px; position:relative; overflow:hidden;}
.pic ul{/*width:5760px;*/ position:absolute; left:0; border:1px solid #000;}
.pic ul li{float:left;}
.pic li img{ position:relative;}
.pic .Tab{width:100%; text-align:center;position:absolute; bottom:5px;}
.pic .Tab a.active{color:#F30;}
</style>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
    ​ var timer=null;
    ​ var oUl=$(".pic ul");
    ​ var aLi=$(".pic ul li");
    ​ var aImg=$(".pic ul li img");
    ​ var imgWidth=1920;
    ​ oUl.css("width",imgWidth * aImg.length + 'px');
    ​ var i=0;
    ​ timer=setInterval(function(){
    ​    ​  i++;
    ​    ​  if(i==aImg.length){
    ​    ​    ​   i=0;
    ​     ​ }
    ​    ​  oUl.animate({"left":"-"+imgWidth*i + 'px'},500);
    ​ },2000);
});
</script>
</head>
<body>
<div class="pic" id="pic">
        <ul>
            <li>
                    <img src="images/bg1.jpg">
            </li>
            <li>
                    <img src="images/bg2.jpg">
            </li>
            <li>
                    <img src="images/bg3.jpg">
            </li>
        </ul>
</div>

</body>
</html>
  • 写回答

2条回答 默认 最新

  • JPF1024 2015-09-06 07:57
    关注

    你的图片坏了，推荐给你一个插件网站。

    http://www.jq22.com/jquery-info1906

    评论

报告相同问题？

悬赏问题

  • ¥15 MapReduce实现倒排索引失败
  • ¥15 luckysheet
  • ¥15 ZABBIX6.0L连接数据库报错，如何解决？(操作系统-centos)
  • ¥15 找一位技术过硬的游戏pj程序员
  • ¥15 matlab生成电测深三层曲线模型代码
  • ¥50 随机森林与房贷信用风险模型
  • ¥50 buildozer打包kivy app失败
  • ¥30 在vs2022里运行python代码
  • ¥15 不同尺寸货物如何寻找合适的包装箱型谱
  • ¥15 求解 yolo算法问题