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="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"><</span>
<span class="arrow-right">></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.
-->
![](https://img2018.cnblogs.com/blog/1425695/201902/1425695-20190225204632599-1019206153.jpg)
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179)
支付宝
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。