Jquery实现图片切换

点击左右两边按钮，中间图片和下边的文字会同时变化，是你会如何实现呢？

---

小菜鸟来提供一个 能满足需求的效果，如果需要特殊的图片切换效果当然还需要补充。其实是没必要弄个什么效果就去网上找什么插件的。其实显示隐藏也是能达到一种切换的效果的。

<!--html 区域-->
<div id="showImg">
    <img src="1.png" id="img1" flag="first"></img>
    <img src="2.png" id="img2"></img>
    <img src="3.png" id="img3"></img>
    <img src="4.png" id="img4" flag="last"></img>
</div>
<div>
    <button onclick="showImg(1)">第一个</button>
    <button onclick="showImg(4)">最后一个</button>
</div>
//js  区域
//小菜鸟的js功底很弱这里就用jQuery吧
function showImg(index){
    jQuery("#showImg img").hide();
    jQuery("#img"+index).show();
}

---

你可以看看 bootstrap 插件

---

div浮动排列在一个overflow div里面。

---

参看轮播图效果

---

<container>
    <wrap>
        (<item>
            <img>
            <p>
          </item>  
         ) * n
    </wrap>
    <arrow></arrow>
</container>

这丑陋的伪代码 --

css：
container overflow:hidden
item float:left
arrow position:absolute

js:
通过点击arrow改变wrap的transform translateX

---

position定位，transition实现动画效果，setInterval轮播，简单的就是这样实现的
触摸屏的话需要透彻事件控制，
我现在用的是swipper