您的位置：首页 > Web前端 > JQuery

jquery 实现淡入淡出图片轮播效果

2016-07-13 15:23 856 查看

1.HTML 框架搭建（css代码里宽高的大小与图片的大小一致）

<style>
* {
padding: 0;
margin:0;
}
ul {
list-style: none;
}
.out {
width: 640px;
height: 270px;
margin:50px auto;
position: relative;
}
.out .img li {
position: absolute;
left:0;
top:0;
display: none;
}
.out .num {
position: absolute;
bottom: 20px;
left: 0;
font-size:0px;
text-align:center;
width: 100%;
}
.out .num li {
width: 20px;
height: 20px;
line-height:20px;
border-radius:50%;
background:#666;
color: #fff;
text-align:center;
display: inline-block;
font-size:16px;
margin:0 3px;
cursor: pointer;
}
.out .num li.active {
background:#a00;
}
.out .btn {
position:absolute;
top: 50%;
margin-top:-30px;
width: 30px;
height: 60px;
line-height:60px;
background:rgba(0, 0, 0, 0.5);
font-size:40px;
color: #fff;
text-align:center;
display: none;
}
.out .left {
left: 0;
}
.out .right {
right: 0;
}
.out:hover .btn {
display: block;
cursor: pointer;
}
</style>
<body>
<div class="out ">
<ul class="img ">
<li>
<a href="# ">
<img src="image/1.jpg " alt=" ">
</a>
</li>
<li>
<a href="# ">
<img src="image/2.jpg " alt=" ">
</a>
</li>
<li>
<a href="# ">
<img src="image/3.jpg " alt=" ">
</a>
</li>
<li>
<a href="# ">
<img src="image/4.jpg " alt=" ">
</a>
</li>
<li>
<a href="# ">
<img src="image/5.jpg " alt=" ">
</a>
</li>
</ul>
<ul class="num ">
</ul>
<div class="left btn ">
<</div>
<div class="right btn ">></div>
</div>
</body>

juery代码实现图片的自动轮播和手动轮播效果

<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript">
$(function() {

//代码初始化
var size=$(".img li").size();
for (var i = 1; i <= size; i++) {
var li="<li>"+i+"</li>";
$(".num").append(li);
};

//手动控制轮播效果
$(".img li").eq(0).show();
$(".num li").eq(0).addClass("active");
$(".num li").mouseover(function() {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
i=index;
$(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);
})

//自动
var i = 0;
var t = setInterval(move, 1500);
//核心向左的函数
function moveLeft() {
i--;
if (i == -1) {
i = size-1;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

}
//核心向右的函数
function move() {
i++;
if (i == size) {
i = 0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

}
//定时器的开始与结束
$(".out").hover(function() {
clearInterval(t);
}, function() {
t = setInterval(move, 1500)
})
//左边按钮的点击事件
$(".out .left").click(function() {
moveLeft();
})
//右边按钮的点击事件
$(".out .right").click(function() {
move();
})
})
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航