jqs实现图片轮播--通过点击按钮来实现

 

 

 

布局的部分

<div class="slider">

<ul>

<li><a href="#"><img src="images/1.jpg" alt=""></a></li>

<li><a href="#"><img src="images/2.jpg" alt=""></a></li>

<li><a href="#"><img src="images/3.jpg" alt=""></a></li>

<li><a href="#"><img src="images/4.jpg" alt=""></a></li>

<li><a href="#"><img src="images/5.jpg" alt=""></a></li>

<li><a href="#"><img src="images/6.jpg" alt=""></a></li>

<li><a href="#"><img src="images/7.jpg" alt=""></a></li>

<li><a href="#"><img src="images/8.jpg" alt=""></a></li>

</ul>

 

<!--箭头-->

<div class="arrow">

<span class="arrow-left">&lt;</span>

<span class="arrow-right">&gt;</span>

</div>

</div>

 

 

JS部分

var count = 0;

$(".arrow-right").click(function () {

count++;

if(count == $(".slider li").length){

count = 0;

}

console.log(count);

//让count渐渐的显示，其他兄弟渐渐的隐藏

$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();

});

 

$(".arrow-left").click(function () {

count--;

if(count == -1){

count = $(".slider li").length - 1;

}

console.log(count);

//让count渐渐的显示，其他兄弟渐渐的隐藏

$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();

});

});

</script>

<!-- 图片轮播的思路是：

点击右边的按钮，图片向前移动一张：分析==》

（1）给右边的按钮注册事件----(2)点击一下,索引加1----（3）判断是否是最后一张---（4）若果是，索引值为0.---(5)对应图片的索引值显示出来，其他的兄弟元素消失。

 

点击左边边的按钮，图片向后移动一张：分析==》

（1）给右边的按钮注册点击事件--（2）点击一下，索引减1---（3）判断是否是负1，----（4）若是，索引值为图片的长度减1---(5)对应图片的索引值显示出来，其他的兄弟元素消失。

注意点：索引值最初为0，但是它表示第一张图片哦; 当它为leng-1时，表示的是最后一张图片; 所以索引值为length时，重新将索引值赋值为0;

因此当点击左边的按钮时，索引为0时，表示第一张图片哦 所以索引值为-1时，重新将索引值赋值为length-1.

-->