jquery实现轮播图特效
ps:很基本的特效,供大家学习，本人菜鸟，不足之处请指教，也给自己做个笔记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script src="../../js/jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.out{border: 1px solid red;
width: 640px;
height: 1138px;
/*相对于正常位置进行定位*/
position: relative;
margin: 30px auto;
overflow: hidden;
}
.out ul{
/*相对于正常位置进行定位，正常位置就是div的左上角*/
position: relative;
z-index: 1;
}
.out ul li{
/*相对于static以外的第一个父元素进行定位，即相当于ul进行定位*/
position: absolute;
left: 0;
top: 0;
}
.out ol{
z-index: 2;
/*相对于static以外的第一个父元素进行定位 相对于div进行定位*/
position: absolute;
right: 240px;
bottom: 20px;
}
.out ol li{
width: 20px;
height: 30px;
line-height: 30px;
background-color: black;
color: #fff;
text-align: center;
float: left;
margin-left: 10px;
cursor: pointer;
border-radius: 60%;
}
.out ol li.active{
background-color: red;
}
.out .btn{
position:absolute;
top:50%;
width: 20px;
height: 40px;
margin-top: -30px;
background-color: aliceblue;
color:black;
text-align: center;
line-height: 40px;
font-size: 20px;
z-index: 2;
}
.out .left{
left: 0;
}
.out .right{
right: 0;
}
.out:hover .btn{
display: block;
color:white;
font-weight: 900;
background-color: black;
opacity: 0.8;
cursor: pointer;
}
</style>
</head>
<body>
<div class="out">
<ul>
<li><img src="../../images/1.jpg"></li>
<li><img src="../../images/2.jpg"></li>
<li><img src="../../images/3.jpg"></li>
<li><img src="../../images/4.jpg"></li>
<li><img src="../../images/5.jpg"></li>
</ul>
<ol>
<!-- <li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li> -->
</ol>
<button class="left btn"><</button>
<button class="right btn">></button>
</div>
</body>
<script>
$(function(){
var num = 6;
// 取得图片的数量
var size = $("ul li").size();
for(var i = 1; i <= size; i++){
var li = "<li>"+i+"</li>";
$("ol").append(li);
}
// 处理数字列表的样式
// 给数字列表的第一的标签添加属性
$("ol li").eq(0).addClass("active");
// 当鼠标移动到某个元素时，添加事件
$("ol li").mouseover(function(){
$(this).addClass("active").siblings().removeClass("active");
// 获取到此元素的索引值
var index = $(this).index();
// 将其索引值赋给一个全局变量
i = index;
$("ul li").eq(index).css('left','640px');
num++;
$("ul li").eq(index).css('z-index',num);
$("ul li").eq(index).animate({left:'0'},500);
});
i = -1;
// 向右移动的函数
function moveRight(){
i++;
if(i == size){
i = 0;
}
$("ol li").eq(i).addClass("active").siblings().removeClass("active");
$("ul li").eq(i).css('left','640px');
num++;
$("ul li").eq(i).css('z-index',num);
$("ul li").eq(i).animate({left:'0'},500);
}
function moveLeft(){
i--;
if(i == -1){
i = size-1;
}
$("ol li").eq(i).addClass("active").siblings().removeClass("active");
$("ul li").eq(i).css('left','-640px');
num++;
$("ul li").eq(i).css('z-index',num);
$("ul li").eq(i).animate({left:'0'},500);
}
var t = setInterval(moveRight,1500);
// 悬浮至div上时，停止切换图片
$(".out").hover(function(){
clearInterval(t);
},function(){
t = setInterval(moveRight,1500);
});
// 左按钮添加事件
$(".out .right").click(function(){
moveRight();
});
// 右按钮添加事件
$(".out .left").click(function(){
moveLeft();
});
})
</script>
</html>网页的静态页面如下：
使用jquery实现的动态效果为：
网页图片进行轮播，当鼠标移到图片上时，轮播暂停，轮播进行切换图片采用从右到左进行切换，点击左右按钮也可以进行图片的切换，鼠标悬浮在数字上进行 图片的切换。