// css样式
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
img {
display: block;
}
.slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider li {
position: absolute;
display: none;
}
.slider li:first-child {
display: block;
}
/*文字部分的样式*/
.slider li p {
position: absolute;
width: 100%;
padding: 10px 0;
text-indent: 2em;
background-color: rgba(0, 0, 0, .6);
bottom: 0;
left: 0;
font-size: 18px;
/*给文字设置位移到底部去*/
transform: translate3d(0, 100%, 0);
/*添加过渡*/
transition: all .8s;
}
/*当前展示li 下的文字样式*/
.slider li.current p {
/*文字位移到0的位置，正常显示*/
transform: translate3d(0, 0, 0);
}
.slider li a {
color: #fff;
}
.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>
<body>
<div class="slider">
<ul>
<li>
<a href="#">
<img src="images/1.jpg" alt="">
<p>这是第1张图片的文字说明</p>
</a>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="">
<p>这是第2张图片的文字说明</p>
</a>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="">
<p>这是第3张图片的文字说明</p>
</a>
</li>
<li>
<a href="#">
<img src="images/4.jpg" alt="">
<p>这是第4张图片的文字说明</p>
</a>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="">
<p>这是第5张图片的文字说明</p>
</a>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt="">
<p>这是第6张图片的文字说明</p>
</a>
</li>
<li>
<a href="#">
<img src="images/7.jpg" alt="">
<p>这是第7张图片的文字说明</p>
</a>
</li>
<li>
<a href="#">
<img src="images/8.jpg" alt="">
<p>这是第8张图片的文字说明</p>
</a>
</li>
</ul>
<!--箭头-->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
<script src="../jquery-2.2.4.js"></script> // 使用的jquery插件包
<script>
// 使用到的方法
// addClass()添加类名
// sibling() 找到同类型的兄弟节点
// removeClass()删除类名
// 设置索引 ，设置第一张图片为默认
var index = 0;
// 获取ul下面的li,然后给每个li添加一个类,找到同类型的兄弟节点删除这个类
$('ul li').eq(index).addClass('current').siblings().removeClass('current');
// 给右边按钮设置点击事件
$('.arrow-right').click(function () {
index++;
// 判断 索引长度等于图片长度，那么设置索引为0
if (index == $('ul li').length) {
index = 0;
}
movement()
})
// 给左边按钮设置点击事件
$('.arrow-left').click(function () {
index--;
// 判断 索引小于0
if (index > 0) {
index = $('ul li').length - 1
}
movement() //调用
})
function movement() {
// 让图片进行淡入淡出的效果
$('ul li').eq(index).addClass('current').fadeIn().siblings().removeClass('currenrt').fadeOut();
}
// 实现自动播放，设置定时器
var times = 0;
$('.slider').mouseout(function () {
times = setInterval(function () {
$('.arrow-right').click()
// console.log($('.arrow-right'));
}, 1000)
})
// 鼠标移出继续播放
$('.slider').mouseout()
// 鼠标移入清空定时器
$('.slider').mousemove(function () {
clearInterval(times);
// console.log( $('.slider'));
})
</script>
