jquery实现漂亮的轮播图
程序员文章站
2022-08-08 10:22:41
今天工作中要用到一个轮播功能，在网上找了一些，觉得有些过于繁琐，于是自己动手写了一个，效果如图： 代码如下： ......
今天工作中要用到一个轮播功能，在网上找了一些，觉得有些过于繁琐，于是自己动手写了一个，效果如图：
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>轮播图</title>
</head>
<style>
.oop_inner{
margin:0 auto;
position:relative;
top:10px;
width:640px;
height:424px;
box-shadow:1px 2px 3px #666;
overflow:hidden;
}
.oop_banner{
position:absolute;
width:2600px;
/* left:-640px; */
}
.oop_banner img{
float:left;
width:640px;
}
.oop_li{
position:absolute;
left:45%;
bottom:20px;
}
.oop_li span{
display:block;
float:left;
margin-right: 10px;
width:15px;
height:7px;
background:#fff;
box-shadow: 1px 1px;
cursor:pointer;
}
.oop_li span:hover{
background:#000;
}
.oop_li .on{
background:#000;
}
.oop_inner a{
position:absolute;
display: block;
width:40px;
height:40px;
line-height:36px;
box-shadow: 0px 0px 3px 2px;
color:#fff;
top:45%;
text-align:center;
font-size:40px;
text-decoration:none;
}
.oop_inner a:hover{
box-shadow: 0px 0px 3px 2px #000;
}
.oop_inner .last{
left:15px;
}
.oop_inner .next{
right:15px;
}
</style>
<body>
<div class="oop_inner">
<div class="oop_banner">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<img src="4.jpg" alt="">
</div>
<div class="oop_li">
<span index="0" class="on"></span>
<span index="1"></span>
<span index="2"></span>
<span index="3"></span>
</div>
<a href="javascript:void(0);" class="last"><</a>
<a href="javascript:void(0);" class="next">></a>
</div>
</body>
<script src="../jquery-1.7.2.min.js"></script>
</html>
<script>
$(function(){
start();
//定时开始
var i = 0;
function start(){
banner = setinterval(function(){
i+=1;
if(i == 4){
i =0;
}
onclass();
var le = i* -640;
$('.oop_banner').animate({left:le});
},2000);
}
//定时停止
function stop(){
clearinterval(banner);
}
//选中样式
function onclass(){
$('.oop_li>span').each(function(e){
if(e == i){
$(this).addclass('on');
}else{
$(this).removeclass('on');
}
})
}
//点击按钮
$('.oop_li>span').click(function(){
$('.oop_li>span').removeclass('on');
$(this).addclass('on');
var le = $(this).attr('index') * -640;
$('.oop_banner').animate({left:le});
i = parseint($(this).attr('index'));
})
//鼠标滑入
$('.oop_inner').mouseenter(function(){
stop();
})
//鼠标滑出
$('.oop_inner').mouseleave(function(){
start();
})
//下一个
$('.next').click(function(){
i+=1;
if(i == 4){
i = 0;
}
onclass();
var le = i* -640;
$('.oop_banner').animate({left:le});
})
//上一个
$('.last').click(function(){
i-=1;
if(i == -1){
i = 3;
}
onclass();
var le = i* -640;
$('.oop_banner').animate({left:le});
})
})
</script>