my slides —— 图片轮播组件

index.html

<div class="slides">
    <ul>
        <li class="current"><img src="http://placehold.it/490x170" alt="" /></li>
        <li><img src="http://placehold.it/490x170/7cd6fa" alt="" /></li>
        <li><img src="http://placehold.it/490x170/7cd" alt="" /></li>
        <li><img src="http://placehold.it/490x170/ede" alt="" /></li>
        <li><img src="http://placehold.it/490x170/67a" alt="" /></li>
    </ul>
    <div class="ctls">
        <span class="selected">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</div>

my-slides.markdown

my slides

---

轮播组件

A Pen by FrankFan on CodePen.

License.

slides.css

* {margin:0; padding:0; font-size:14px;}

.slides{ position: relative; list-style-type: none; height: 170px; width: 490px;}
.slides ul li { positino: absolute; left: 0; top: 0; display: none;}
.slides .current { display: block;}
.slides .ctls { position: absolute; left: 374px; bottom: 11px; width: 83px; background: #27c; padding-left: 10px;}
.slides .ctls span { height: 20px; width: 15px; display: block; line-height: 20px; text-align: center; margin: 5px 0; float: left; cursor: pointer;}
.slides .ctls .selected { background: #cec;}

slides.js

// 所需的变量
var toDisplayPicNumber = 0;
var totalPics = 5;
var currentIndex;

// 模拟点击一下
$('.ctls span').click(slide);

function slide() {
  currentIndex = $(this).index();

  // jquery 链式编程, 先给当前数字设置class, 再把兄弟元素的class去掉
  $(this).addClass('selected').siblings().removeClass('selected');

  console.log('currentIndex == ' + (currentIndex + 1));

  // 隐藏掉所有图片
  var allPics = $(this).parent().parent().children("ul");
  $(allPics).children().hide();
  // 显示当前那张图片
  $(allPics).children("li").eq(currentIndex).show();
}

function clickNum() {
  $('.ctls span').eq(toDisplayPicNumber).trigger('click');
  toDisplayPicNumber = (toDisplayPicNumber + 1) % totalPics;

  // 用 setTimeout 做一个无限循环
  setTimeout('clickNum()', 3000);
}

// 3s 模拟点击一下数字
setTimeout('clickNum()', 3000);