Question

我正在使用具有某些功能的模拟网站。我正在使用html css和js。我正在使用循环插件来循环我已经编写的一些选项卡。发布我的代码然后解释我想要做的事情：

我的HTML：

 <div id="content">
  <div id="image_selector" class="image_selector">
    <div class ="image">
      <ul>
        <li><a id="Mpowered" href="">Mpowered</a></li>
        <li><a id="Technology" href="">Technology</a></li>
        <li><a id="Consulting" href="">Consulting</a></li>
        <li><a id="Outsourcing" href="">Outsourcing</a></li>
      </ul>
    </div>
  </div>
  <div class="cell">
   <div class="description">
      <img id="demoimg" src="/home/***/HTML/launch_pad/images/productivity.png" alt="demo pic"/>
      <h2>Who are we?</h2>
      <p> a consulting company... ect</p>
    </div>


    <div class="description">
      <img id="demoimg" src="/home/***/HTML/launch_pad/images/tech1.jpg" alt="tech"/>
      <h2>We have the tech!</h2>
      <p> lots of tech!!.... ect</p>

    </div>

...还有两个描述部分，每个“a”标签一个，我现在作为标签。

css看起来像这样：

.image_selector {
  border: 1px dotted green;
  height: 130px;

}

.image li {
  float: left;
  border: 1px solid white;
  height: 100px;
  width: 103px;
  margin-left: 86px;
  overflow: hidden;
  text-align: center;

}

.image li a {
  padding: 74px 0px 0px 0px;
  color: white;
  text-shadow: 0 0 0.6em #0197E8;
  font-size: 17px;
  letter-spacing: 1px;
  text-decoration: none;
  display: block;
  height: 80px;
  background-repeat: no-repeat;
}

.image li a:hover {
  text-shadow: 0 0 0.6em #0197E8, 0 0 0.4em #0197E8, 0 0 0.6em #0197E8;

}


.image li #Mpowered {
  background-image: url('/home/ruberto/HTML/launch_pad/images/mpower.png');
  background-position: center top; 
}

.image li #Technology {
  background-image: url('/home/ruberto/HTML/launch_pad/images/tech.png'); 
  background-position: center top; 

}

.image li #Consulting {
  background-image: url('/home/ruberto/HTML/launch_pad/images/consulting.png'); 
  background-position: center top; 

}

.image li #Outsourcing {
   background-image: url('/home/ruberto/HTML/launch_pad/images/outsourcing.png'); 
   background-position: center top; 

}

.cell {
  border: 1px dashed green;
  height: 318px;
  width: 715px;
  float: left;

}

#demoimg {
  float: left;
  position: static;
  margin: 16px 8px 0px 0px;
  height: 200px;
  width: 200px;

}

和javascript iam使用：

$('.cell') 
.before('<div class="image">') 
.cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '.image' 
});

所以我已经在线阅读，现在明白寻呼机选项现在将在div上方创建自己的导航部分，该部分具有我想要旋转的内容。我想知道有没有办法可以引用我已经设置的“图像”标签作为单元格导航功能的“标签”？

如果没有人能推荐一些可以在其位置起作用的东西吗？

Answer 1

假设您想引用甚至将这些li映射到其他功能，甚至构建另一个可引用的寻呼机，这听起来像您可能需要做的那样，您可能需要.index为这些对提供参考连接。

要启动一个重复的寻呼机，在其他地方克隆这些元素，然后可能只是使用css不显示原始，但是将它留在原位，以便循环可以使用它进行分页 //创建二级菜单 $（'＃pager'）。find（'li'）。clone（）。appendTo（'＃navpage ul'）;

然后，如果您想要将两个寻呼机配对，请从此功能开始 http://jsfiddle.net/moneylotion/KhL3W/

jQuery循环插件，自定义寻呼机标签

1 个答案: