做图片轮播功能（要一直从右往左播，不断的循环），js怎么写？看一下我的代码给我讲几句重要的代码？

Posted 2023-05-04

布局这样：
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
css这样：
ulwidth:xxxpx;
lifloat:left
部分jq这样：
$('ul').animate('margin-left':-200,500)
可是这样就等于到了最后一张再也没办法从右往左动画循环了，如果要还费得改变li的位置，就是把第一个li弄到最后去，这样一来就能不断往左播了，不断的把li改位置，这个代码怎么写？完了还要把ul复位是吧？怎么写呢？给个思路，做着做着没思维了！

你把整个ul想成是一张图片，你要做的就是把ul左右移动，然后在ul外面可以套一个div，样式为overflow:hidden，关于复位，你可以用％运算，当移动到最后一个li的时候，跳到第一个li去。 参考技术A 你在网上查找js无缝轮播追问

查了，暂没看懂代码，所以上来问！

追答

那个就应该是最简单和最实用的代码了，你可以先改下，然后哪里不明白再问哪里

追问

有扣？我扣 五 五 三 五 四 五 一 七

本回答被提问者采纳

echart曲线图从右往左显示，每屏显示固定的十条数据，其他的数据滚动显示

1. 测试地址
2. 测试代码

let base = +new Date(2016, 9, 3);
let oneDay = 24 * 3600 * 1000;
let valueBase = Math.random() * 300;
let data = [];
for (var i = 1; i < 100; i++) {
  var now = new Date((base += oneDay));
  var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
  valueBase = Math.round((Math.random() - 0.9) * 20 + valueBase);
  valueBase <= 0 && (valueBase = Math.random() * 500);
  data.push([dayStr, valueBase]);
}

//每页显示10条，其他
function computedPosition(length,xArraylength) {
    if(xArraylength>=10){
        return length <= 10 ? this.end = 35 : this.end = (100 -   Math.floor(35 / length * 100));
    }else{
        return 100;//小于十条数据显示全部
    }
}

option = {
  title: {
    left: 'center',
    text: 'Tootip and dataZoom on Mobile Device'
  },
  legend: {
    top: 'bottom',
    data: ['Intention']
  },
  xAxis: {
    type: 'time',
    inverse:true,//反向显示
    axisPointer: {
      value: '2016-10-7',
      snap: true,
      lineStyle: {
        color: '#7581BD',
        width: 2
      },
      label: {
        show: true,
        formatter: function (params) {
          return echarts.format.formatTime('yyyy-MM-dd', params.value);
        },
        backgroundColor: '#7581BD'
      },
      handle: {
        show: true,
        color: '#7581BD'
      }
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    axisTick: {
      inside: true
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      inside: true,
      formatter: '{value}\\n'
    },
    z: 10
  },
  grid: {
    top: 110,
    left: 15,
    right: 15,
    height: 160
  },
  dataZoom: [
    {
      type: 'inside',
      throttle: 50,
      start:0 ,
        end: computedPosition(1,100)
    }
  ],
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      sampling: 'average',
      itemStyle: {
        color: '#0770FF'
      },
      stack: 'a',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(58,77,233,0.8)'
          },
          {
            offset: 1,
            color: 'rgba(58,77,233,0.3)'
          }
        ])
      },
      data: data
    }
  ]
};

终极版本：

let base = +new Date(2016, 9, 3);
let oneDay = 24 * 3600 * 1000;
let valueBase = 0;
let data = [];
for (var i = 1; i < 100; i++) {
  var now = new Date((base += oneDay));
  var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
  valueBase = i
  data.push([dayStr, valueBase]);
}

//alert(dayStr);
//每页显示10条，其他
function computedPosition(length,xArraylength) {
    if(xArraylength>=10){
        return length <= 10 ? this.end = 10 : this.end = (100 -   Math.floor(10 / length * 100));
    }else{
        return 100;//小于十条数据显示全部
    }
}

option = {
  title: {
  },
  tooltip: {//显示提示文字
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  
  grid: {
    top: 110,
    left: 15,
    right: 15,
    height: 160
  },
  legend: {
    top: 'bottom',
    data: ['Intention']
  },
  xAxis: {
    type: 'time',
    show: false,//不显示刻度
    inverse:true,//反向显示
    axisPointer: {
      value: '2016-10-7',
      snap: false,
      lineStyle: {
        color: '#7581BD',
        width: 1
      },
      label: {
        show: false,
        formatter: function (params) {
          return echarts.format.formatTime('yyyy-MM-dd', params.value);
        },
        backgroundColor: '#7581BD'
      },
    }
  },
  yAxis: {
    type: 'value',
    show: false,//不显示刻度
  },
  dataZoom: [
    {
      type: 'inside',
      throttle: 50,
      start:0 ,
      end: computedPosition(1,100)
    }
  ],
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      smooth: true,
      label: {//显示数值
        show: true,
        position: 'top'
      },
     
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(58,77,233,0.8)'
          },
          {
            offset: 1,
            color: 'rgba(58,77,233,0.3)'
          }
        ])
      },
      data: data
    }
  ]
};