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

<!--

布局思路：一个大的div,中有一个ul.和一个箭头的div

css样似描述：

整个盒子距离顶部100px，又水平居中 盒子的宽高为图片的实际宽高

由于每次都是看见了一张图片：有两种方式：

第一种：要么li用了浮动，然后结合overflow:hidden。让超出的部分消失

第二种：li绝对定位==》则父级元素ul,或者li的爷级元素 相对定位 （子绝父相）

默认显示第一张图片，所以其他的li应该隐藏起来。

按钮默认是隐藏起来的，光标放上去，按钮显示出来，用了hover属性

按钮的样式修饰：

有宽高，分别靠在最左边和最右边，垂直方向居中;==>因此有绝对定位，left:0;right:0;top:50%;

-->

 

<style>

* {

margin: 0;

padding: 0;

list-style: none;

}

 

.slider {

height: 340px;

width: 790px;

margin: 100px auto;

position: relative;

}

 

.slider li {

position: absolute;

/* display: none; */

}

.slider li:first-child {

display: block;

}

 

 

.arrow {

display: none;

}

 

.slider:hover .arrow {

display: block;

}

 

.arrow-left,

.arrow-right {

font-family: "SimSun", "宋体";

width: 30px;

height: 60px;

background-color: rgba(0, 0, 0, 0.1);

position: absolute;

top: 50%;

/* margin-top: -30px;*/

cursor: pointer;

text-align: center;

line-height: 60px;

color: #fff;

font-weight: 700;

font-size: 30px;

}

 

.arrow-left:hover,

.arrow-right:hover {

background-color: rgba(0, 0, 0, .5);

}

 

.arrow-left {

left: 0;

}

 

.arrow-right {

right: 0;

}

 

</style>

 

布局的部分

<div class="slider">

<ul>

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

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

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

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

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

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

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

<li><a href="#"><img src="data: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.

-->