本文介绍了一种使用HTML、CSS和JavaScript实现轮播效果的方法，包括样式设计、交互逻辑和代码实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播demo</title>
<style type="text/css">
*{margin: 0; padding: 0;}
.imageSlider{ width: 430px; height:195px; position: relative;overflow: hidden;margin: 10px auto;zoom:1;}
.slider{ overflow: hidden; zoom:1; position: absolute;left: 0; top: 0; }
.slider li{ width: 430px; height:195px;}
.num{position: absolute; left: 50%; bottom: 10px; overflow: hidden; cursor: default;}
.num li{ display: inline-block;vertical-align: middle; }
.num li a{ padding-top:12px;border-radius: 50%; background: #b7b7b7;display: block;width: 12px;}
.num li.on a{ background: #df3;}
.slider li{float: left; overflow: hidden; zoom:1;}
.slider li a img{ display: block;
border:0;z-index:0;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
executeIS();
sliderInit();
var len = $(".num > li").length;
var index = 0;
var isTimer ;
$(".num li").mouseover(function(){
index=$(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
$(".imageSlider").hover(function(){
clearInterval(isTimer);
},function(){
isTimer = setInterval(function(){
showImg(index);
index++;
if(index==len){index=0;}
},3000);
}).trigger("mouseleave");
}
function showImg(index){
var isWidth = $(".imageSlider").width();
$(".slider").stop(true,false).animate({'left':-(isWidth * index)},1000);
$(".num li").removeClass("on").eq(index).addClass("on");
}
function sliderInit(){
var $liLength = $(".slider>li").length;
var $liWidth = $(".slider>li").width();
$(".slider").width($liLength * $liWidth);
var $numMargin = -$(".num").width()/2;
$(".num").css({"margin-left":$numMargin})
}
</script>
</head>
<body>
<div class="imageSlider">
<ul class="slider">
<li><a href="javascript:void(0)"><img src="1f052cdb23774b6ea1da5e613513190f.jpg" alt="a" width="430px" height="195px"></img></a></li>
<li><a href="javascript:void(0)"><img src="4cc02705faaa3a507e4e0300.jpg" alt="b" width="430px" height="195px"></img></a></li>
<li><a href="javascript:void(0)"><img src="83db090c657640019aba4578839f83cb.jpg" alt="c" width="430px" height="195px"></img></a></li>
<li><a href="javascript:void(0)"><img src="051911ffbd6d4d2bb20d9d9c941498a0.jpg" alt="d" width="430px" height="195px"></img></a></li>
<li><a href="javascript:void(0)"><img src="ca689b77f6b8480490299ecde00b1745.jpg" alt="e" width="430px" height="195px"></img></a></li>
</ul>
<ul class="num">
<li><a href="javascript:void(0)" ></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
</ul>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播demo</title>
<style type="text/css">
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
.imageSlider{ width: 430px; height:195px; position: relative;overflow: hidden;margin: 10px auto;zoom:1;}
.slider{ overflow: hidden; zoom:1; position: absolute;left: 0; top: 0; }
.slider li{ width: 430px; height:195px;}
.num{position: absolute; left: 50%; bottom: 10px; overflow: hidden; cursor: default;}
.num li{ display: inline-block;vertical-align: middle; }
.num li a{ padding-top:12px;border-radius: 50%; background: #b7b7b7;display: block;width: 12px;}
.num li.on a{ background: #df3;}
.slider li{float: left; overflow: hidden; zoom:1;}
.slider li a img{ display: block;
border:0;z-index:0;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
executeIS();
});
/*执行轮播*/
function executeIS(){sliderInit();
var len = $(".num > li").length;
var index = 0;
var isTimer ;
$(".num li").mouseover(function(){
index=$(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
$(".imageSlider").hover(function(){
clearInterval(isTimer);
},function(){
isTimer = setInterval(function(){
showImg(index);
index++;
if(index==len){index=0;}
},3000);
}).trigger("mouseleave");
}
function showImg(index){
var isWidth = $(".imageSlider").width();
$(".slider").stop(true,false).animate({'left':-(isWidth * index)},1000);
$(".num li").removeClass("on").eq(index).addClass("on");
}
function sliderInit(){
var $liLength = $(".slider>li").length;
var $liWidth = $(".slider>li").width();
$(".slider").width($liLength * $liWidth);
var $numMargin = -$(".num").width()/2;
$(".num").css({"margin-left":$numMargin})
}
</script>
</head>
<body>
<div class="imageSlider">
<ul class="slider">
<li><a href="javascript:void(0)"><img src="1f052cdb23774b6ea1da5e613513190f.jpg" alt="a" width="430px" height="195px"></img></a></li>
<li><a href="javascript:void(0)"><img src="4cc02705faaa3a507e4e0300.jpg" alt="b" width="430px" height="195px"></img></a></li>
<li><a href="javascript:void(0)"><img src="83db090c657640019aba4578839f83cb.jpg" alt="c" width="430px" height="195px"></img></a></li>
<li><a href="javascript:void(0)"><img src="051911ffbd6d4d2bb20d9d9c941498a0.jpg" alt="d" width="430px" height="195px"></img></a></li>
<li><a href="javascript:void(0)"><img src="ca689b77f6b8480490299ecde00b1745.jpg" alt="e" width="430px" height="195px"></img></a></li>
</ul>
<ul class="num">
<li><a href="javascript:void(0)" ></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
</ul>
</div>
</body>
</html>
扫一扫
99
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
