标签：
1.轮播图（jq）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.out{
width: 730px;
height: 454px;
margin: 50px auto;
position: relative;
}
.out .img li{
position: absolute;
left: 0;
top: 0;
}
.out .num{
position: absolute;
left:0;
bottom: 20px;
text-align: center;
font-size: 0;
width: 100%;
}
.out .btn{
position: absolute;
top:50%;
margin-top: -30px;
width: 30px;
height: 60px;
background-color: aliceblue;
color: black;
text-align: center;
line-height: 60px;
font-size: 40px;
display: none;
}
.out .num li{
width: 20px;
height: 20px;
padding: 5px;
background-color: black;
color: #fff;
text-align: center;
line-height: 20px;
border-radius: 60%;
display: inline;
font-size: 18px;
margin: 0 10px;
cursor: pointer;
}
.out .num li.active{
background-color: red;
}
.out .prev{
left: 0;
}
.out .next{
right: 0;
}
.out:hover .btn{
display: block;
color: white;
font-weight: 900;
background-color: black;
opacity: 0.8;
cursor: pointer;
}
.out img {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="out">
<ul class="img">
<li><a href="#"><img src="images/1.jpg" ></a></li>
<li><a href="#"><img src="images/2.jpg" ></a></li>
<li><a href="#"><img src="images/3.jpg" ></a></li>
<li><a href="#"><img src="images/4.jpg" ></a></li>
<li><a href="#"><img src="images/5.jpg" ></a></li>
</ul>
<ul class="num">
<!--<li class="active">1</li>-->
<!--<li>2</li>-->
<!--<li>3</li>-->
<!--<li>4</li>-->
<!--<li>5</li>-->
</ul>
<div class="prev btn"><</div>
<div class="next btn">></div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
var size=$(".img li").size(); //取到li的个数
for (var i= 1;i<=size;i++){
var li="<li>"+i+"</li>";
$(".num").append(li); //在num的后面插入li
}
$(".num li").eq(0).addClass("active"); //当前动态添加的li类名为"active";
$(".num li").mouseover(function(){
$(this).addClass("active").siblings().removeClass("active");
var index=$(this).index();
i=index;
$(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); //当前点击这个淡入，遍历的其他淡出
});
i=0;
var t=setInterval(move,1500); //每间隔1.5s执行一次move函数
function move(){
i++;
if(i==size){
i=0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
function moveL(){
i--;
if(i==-1){
i=size-1;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
$(".out").hover(function(){
clearInterval(t); // setInterval终止这个这个方法
},function(){
t=setInterval(move,1500);
});
$(".out .next").click(function(){
move() //调用函数
});
$(".out .prev").click(function(){
moveL() //调用函数
})
});
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/zhangwei91/p/5725761.html
