Javascript 在js对象和li元素中存储幻灯片的横幅滑块

我正在开发一个简单的横幅滑块。我有三个选项可以选择如何存储幻灯片元素：

a） 我可以将横幅幻灯片存储在javascript对象中，然后使用jquery创建幻灯片元素

bannerSlides = {
  "1":{
    "bannerId":"1",
    "title":"Some title 1",
    "content":"<p><h2>Some title 1<\/h2><img src=\"http:\/\/www.domain.com\/media\/wysiwyg\/Sea.jpg\" alt=\"\" \/><\/p>",
    "anotherparameter":"paramvalue",
    "anotherparameter2":"paramvalue"
  },
  "2":{
    "bannerId":"2",
    "title":"Some title 2",
    "content":"<p><h2>Some title 2<\/h2><img src=\"http:\/\/www.domain.com\/media\/wysiwyg\/Sun.jpg\" alt=\"\" \/><\/p>",
    "anotherparameter":"paramvalue",
    "anotherparameter2":"paramvalue"
  },
  "3":{
    "bannerId":"3",
    "title":"Some title 3",
    "content":"<p><h2>Some title 3<\/h2><img src=\"http:\/\/www.domain.com\/media\/wysiwyg\/Summer.jpg\" alt=\"\" \/><\/p>",
    "anotherparameter":"paramvalue",
    "anotherparameter2":"paramvalue"
  }  
};

横幅幻灯片={
"1":{
“bannerId”：“1”，
“标题”：“某些标题1”，
“内容”：“一些标题1”，
“另一个参数”：“paramvalue”，
“其他参数2”：“paramvalue”
},
"2":{
“bannerId”：“2”，
“标题”：“一些标题2”，
“内容”：“一些标题2”，
“另一个参数”：“paramvalue”，
“其他参数2”：“paramvalue”
},
"3":{
“bannerId”：“3”，
“标题”：“一些标题3”，
“内容”：“一些标题3”，
“另一个参数”：“paramvalue”，
“其他参数2”：“paramvalue”
}  
};

b） 我可以将横幅幻灯片直接显示为ul内部的列表元素，如下所示：

<div style="overflow:hidden;">
  <ul style="width: 300%; position: relative; left: -100%; height: 350px;">
    <li style="width: 33.3333%;">Slide 1</li>
    <li style="width: 33.3333%;">Slide 2</li>
    <li style="width: 33.3333%;">Slide 3</li>
  </ul>
</div>

宽度：300%；位置：相对；左侧：-100%；高度：350px；“>
幻灯片1
幻灯片2
幻灯片3

c） 仅将第一张幻灯片直接显示为li元素以立即显示，其余li元素注入javascript

---

我查看了亚马逊网站，我看到他们使用c）选项。我不知道为什么a）不好。从SEO和其他角度来看，哪一个选项是最好的？

选项C是速度和灵活性之间的权衡。第一张幻灯片可以在不等待任何脚本加载的情况下显示，但不会像选项B那样一次加载所有图像。从SEO的角度看，选项a会对未在脚本文件中搜索的搜索引擎隐藏所有数据。如果SEO是一个主要关注点，那么选择B或C。如果初始页面加载时间是最重要的，那么选择a或C