轮播的代码实现教程
程序员文章站
2022-08-11 10:16:10
轮播的代码实现教程
&l...
轮播的代码实现教程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
img{
width:533px;
height:300px;
}
.container{
width:533px;
height:300px;
position: relative;
margin:10px auto;
}
.con p{
display: none;
position: absolute;
}
.container .current{
display: block;
}
.dian{
position: absolute;
bottom:10px;
left:200px;
width:200px;
height:30px;
}
.dian li{
height:10px;
width:10px;
border-radius:50%;
margin:auto 10px;
background: #fff;
float: left;
list-style: none;
}
.dian .current{
background: #f38;
}
.container:hover .prev{
display: block;
}
.container:hover .next{
display: block;
}
.next{
height:70px;
width:30px;
line-height:70px;
font-size: 30px;
font-weight:700;
color:#fff;
position: absolute;
top:115px;
background: rgba(0,0,0,.4);
right:0;
display: none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor: pointer;
}
.prev{
height:70px;
width:30px;
line-height:70px;
font-size: 30px;
font-weight:700;
color:#fff;
position: absolute;
top:115px;
background: rgba(0,0,0,.4);
left:0;
display: none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor: pointer;
}
</style>
</head>
<body style="text-align: center;">
<p class="container">
<p class="con">
<p class="current"><img src="images/u=463629470,3575711901&fm=27&gp=0.jpg" alt=""></p>
<p><img src="images/u=1756874692,3026443319&fm=27&gp=0.jpg" alt=""></p>
<p><img src="images/u=2851990104,2745395319&fm=27&gp=0.jpg" alt=""></p>
<p><img src="images/u=3987449404,3914005315&fm=27&gp=0.jpg" alt=""></p>
</p>
<ul class="dian">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
<a class="next">></a>
<a class="prev"><</a>
</p>
</body>
<script src="jquery/jquery.js"></script>
<script>
$(function () {
clearInterval(timer);
$('.next').on('click',function(){
next($('.con p'),$('.dian li'));
});
$('.prev').on('click',function(){
prev($('.con p'),$('.dian li'));
});
var timer=setInterval(function () {
next($('.con p'),$('.dian li'));
},3000);
$('.container').hover(function () {
clearInterval(timer);
},function () {
clearInterval(timer);
timer=setInterval(function () {
next($('.con p'),$('.dian li'));
},3000);
}
);
$('.dian li').on('click',function () {
var index=$(this).index();
$('.con p').eq(index).stop().fadeIn().siblings().stop().fadeOut();
$(this).addClass('current').siblings().removeClass('current');
n=index;
})
});
var n=0;
var leg=$('.container p').length;
//obj=$('.con p');
//obj1=$('.dian li');
function next(obj,obj1) {//封装一个点击向左的函数
n++;
if(n>leg-2){
n=0
}
obj.eq(n).stop().fadeIn().siblings().stop().fadeOut();
obj1.eq(n).addClass('current').siblings().removeClass('current');
}
function prev(obj,obj1) {//封装一个点击向左的函数
n--;
if(n<0){
n=leg-2;
}
obj.eq(n).stop().fadeIn().siblings().stop().fadeOut();
obj1.eq(n).addClass('current').siblings().removeClass('current');
}
</script>
</html> 上一篇： [PHP]常用正则表达式收集
下一篇： 正则表达式详述第一部