jquery实现京东淘宝首页的轮番效果图
主要是绑定事件以及实现自动滚轮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer{
height:650px;
width: 500px;
border: dashed cadetblue 5px;
margin: 0 auto;
position: relative;
}
/*.num{*/
/*position: absolute;*/
/*left:0;*/
/*top:0;*/
/*}*/
.num li{
height:24px;
width: 24px;
background-color: grey;
border-radius:80%;
/*使每个数字在圈圈之内显示*/
text-align: center;
display: inline-block;
font-size: 20px;
margin: 5px;
cursor: pointer;
}
ul li{
list-style: none;
}
.outer .img li{
position: absolute;
left:0;
top:0;
}
.num{
position: absolute;
left:0;
/*top:0;*/
bottom: 10px;
font-size: 0;
/*情况num下面文本内容*/
text-align: center;
width: 100%;
/*告诉按照宽度的100%来居中*/
}
.button{
height: 60px;
width: 40px;
background-color: darkgoldenrod;
position: absolute;
/*left:0;*/
top:50%;
margin-top: -30px;
/*移动正中间*/
opacity: 0.6;
font-size: 40px;
text-align: center;
line-height:60px;
display: none;
/*默认隐藏起来这个框框*/
}
.btn_right{
right:0;
/*把另外一个标签移动到右边*/
}
.outer:hover .button{
display: block;
}
.outer .num li.current{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><img src="11.jpg"></li>
<li><img src="22.jpg"></li>
<li><img src="33.jpg"></li>
<li><img src="44.jpg"></li>
<li><img src="55.jpg"></li>
<!--会先显示最后一张，因为在加载中，后面的内容可以理解为离我们更近，就先显示出来了-->
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="btn_left button" ><</div>
<div class="btn_right button">></div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
$(function () {
$('.num li').first().addClass('current');
$('.num li').mouseover(function () {
$(this).addClass('current').siblings().removeClass('current');
// 当鼠标悬浮上去就触发该事件
var index = $(this).index();
i=index;
//根据索引值取到对应图片的索引值，fadein后面的参数表示过1秒显示出来，fadeout表示隐藏
$('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000)
});
// 自动播放图片
i = 0;
var time = setInterval(move, 1500);
function move() {
i++;
if (i == 5) {
i = 0;
}
$('.num li').eq(i).addClass('current').siblings().removeClass('current');
$('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000);
//每1.5秒执行一次，改变数字框框的颜色以及控制图片的显示以及隐藏
}
$('.outer').hover(function () {
clearInterval(time)
}, function () {
time = setInterval(move, 1500);
});
$('.btn_right').click(function(){
move()
});
//点击有边框直接往右边走
$('.btn_left').click(function(){
if(i==0){
i=3
}else {i=i-2;}
move();
});
});
//触碰div则接触自动更换图片，鼠标离开则继续自动滚动图片
</script>
</body>
</html>
效果如图
