网页轮播图的实现
实现原点切换图片，图片无缝衔接播放，左右按钮切换图片等功能，较为完善。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="css/egg.css" type="text/css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/egg.js"></script>
</head>
<body>
<!--轮播图整体div-->
<div class="banner">
<!--无序列表承载轮播的图片-->
<ul class="img">
<li><a href="#"><img src="img/768446b9b2fb4449bd12d0cc5bec6bf0.png" alt="第1张图片"></a></li>
<li><a href="#"><img src="img/aa18e129aefa4e93bbc86c6092f1b31d.jpg" alt="第2张图片"></a></li>
<li><a href="#"><img src="img/e555f947d2d84a809aabfd8ea55948c7.jpg" alt="第3张图片"></a></li>
</ul>
<!--用来放置圆点具体实施在js代码中呈现-->
<ul class="num"></ul>
<!--左右点击按钮-->
<div class="btn">
<span class="prev"><</span>
<span class="next">></span>
</div>
</div>
</body>
</html>
css：
/*整体去除内外边距*/
* {
margin: 0;
padding:0;
}
/*取消列表的图标内容*/
ul{
list-style: none;
overflow: hidden;
}
/*对整体部分的控制，浏览图片的窗口*/
.banner{
width: 100%;
height: 400px;
/* border: 2px solid #ff557f; */
/* margin: 100px auto; */
position: relative;
overflow: hidden;
}
/*图片的初步设置后面的动态内容会在js中实现*/
.img{
width:2100px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
/*让没长图片向左浮动*/
.img li{
float: left;
}
/*圆点承载部分的设计*/
.num{
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
font-size: 0;
}
/*圆点设计*/
.num li{
width: 10px;
height: 10px;
background:rgba(0,0,0,0.5);
border-radius: 100%;
display: inline-block;
margin: 0 5px;
cursor: pointer;
}
/*按钮部分初始不可见*/
.btn{
display: none;
}
/*按钮形状设计*/
.btn span{
display: block;
width: 50px;
height: 100px;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 40px;
line-height: 100px;
text-align: center;
cursor:pointer;
}
/*上一个设计*/
.btn .prev{
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
}
/*下一个设计*/
.btn .next{
position: absolute;
right: 0;
top: 50%;
margin-top: -50px;
}
/*对按妞动态呈现的变换进行类选择器的设计为js代码部分进行铺垫*/
.num .active{
background-color: #fff;
}
.hide{
display: none;
}
js：
//界面加载完毕执行以下程序
$(function(){
//定义i变量为动态控制图片轮播做准备，i的值与每张图片进行一一的对应
var i=0;
//时间变量，为自动轮播以及对光标的影响做出相应的反应
var timer=null;
//根据图片的张数动态添加圆点个数
for (var j = 0; j < $('.img li').length; j++) {
$('.num').append('<li></li>');
}
//默认情况下的第一个圆点进行背景设计
$('.num li').first().addClass('active');
//根据光标的影响控制按钮的显示和隐藏
$('.banner').hover(function(){
$('.btn').show();
},function(){
$('.btn').hide();
});
//将第一张图片复制并添加到img部分下与前五张图片相接
var firstimg=$('.img li').first().clone(); //复制第一张图片
$('.img').append(firstimg).width($('.img li').length*($('.img img').width()));
//定时器自动轮播
timer=setInterval(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0});//保证无缝轮播，设置left值
}
//进行下一张图片
$('.img').stop().animate({left:-i*2100},500);
//圆点跟着变化
if (i==$('.img li').length-1) {
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
}
},1000);
//鼠标移入，暂停自动播放，移出，开始自动播放
$('.banner').hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0});
};
//进行下一张图片
$('.img').stop().animate({left:-i*2100},500);
//圆点跟着变化
if (i==$('.img li').length-1) {
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
}
},1000)
});
//上一个按钮
$('.prev').click(function(){
i--;
if (i==-1) {
i=$('.img li').length-2;
$('.img').css({left:-($('.img li').length-1)*2100});
}
$('.img').stop().animate({left:-i*2100},500);
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
});
// 下一个按钮
$('.next').click(function(){
i++;
if (i==$('.img li').length) {
i=1; //这里不是i=0
$('.img').css({left:0});
};
$('.img').stop().animate({left:-i*2100},500);
if (i==$('.img li').length-1) { //设置小圆点指示
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
};
});
//鼠标划入圆点
$('.num li').mouseover(function(){
var _index=$(this).index();
//维持i变量控制的对应关系不变
i = _index;
$('.img').stop().animate({left:-_index*2100},300);
$('.num li').eq(_index).addClass('active').siblings().removeClass('active');
});
})
实际网页中，可能布局在图片上还有东西，遮挡住圆点，导致触碰圆点无法切换，在圆点的ul class num的css中直接写z-index: 100;，让它置于最顶层，即可使用原点的切换~
z-index只有定位了才能用
还有一个轮播图的但是效果不如第一种好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
font-size: 12px;
/* overflow: hidden; */
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
.box{
width:100% ;
height: 400px;
/* border: #ff5500 1px solid; */
position: relative;
overflow: hidden;
}
.ul1{
width: 100%;
height: 100%;
}
.ul1>li{
position: absolute;
/* float: left; */
}
.ul1>li:nth-child(1){
z-index: 100;
}
.left_botton{
width: 35px;
height: 70px;
background-color: #00000050;
color: #fff;
text-align: center;
line-height: 70px;
position: absolute;
top: 180px;
font-size: 25px;
font-weight: bold;
}
.right_botton{
width: 35px;
height: 70px;
background-color: #00000050;
color: #fff;
text-align: center;
line-height: 70px;
position: absolute;
top: 180px;
right: 0px;
font-size: 25px;
font-weight: bold;
}
.ul2{
position: absolute;
bottom: 20px;
right: 100px;
}
.ul2>li{
width: 20px;
height: 20px;
background-color: #fff;
text-align: center;
line-height: 20px;
float: left;
border-radius: 10px;
margin-right:10px ;
}
.ul2>li:hover{
background-color: red;
color: #FFFFFF;
}
.ul2>li:first-child{
background-color: red;
color: #FFFFFF;
}
.index{
z-index: 1000;
}
</style>
</head>
<body>
<div class="box">
<ul class="ul1" id="ul1">
<li><img src="img/768446b9b2fb4449bd12d0cc5bec6bf0.png"></li>
<li><img src="img/aa18e129aefa4e93bbc86c6092f1b31d.jpg"></li>
<li><img src="img/e555f947d2d84a809aabfd8ea55948c7.jpg"></li>
</ul>
<div class="left_botton index" id="left_botton"><</div>
<div class="right_botton index" id="right_botton">></div>
<ul class="ul2 index" id="ul2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script type="text/javascript">
var imgs = document.getElementById("ul1").children;
var leftbotton=document.getElementById("left_botton");
var rightbotton=document.getElementById("right_botton");
var num = document.getElementById("ul2").children;
// console.log(imgs);
var index = 0;
var dingshiqi;
chongqi();
function chongqi(){
dingshiqi = setInterval(function(){
index++;
if(index==imgs.length){
index=0;
}
for(var i =0 ;i<imgs.length;i++){
imgs[i].style.cssText="z-index: 0;";
num[i].style.cssText="background-color: #fff;color: #000;";
}
imgs[index].style.cssText="z-index: 100;";
num[index].style.cssText="background-color:red;color: #fff;";
},2000);
}
leftbotton.onclick=function(){
clearInterval(dingshiqi);
index--;
if(index<0){
index=imgs.length-1;
}
for(var i =0 ;i<imgs.length;i++){
imgs[i].style.cssText="z-index: 0;";
num[i].style.cssText="background-color: #fff;color: #000;";
}
imgs[index].style.cssText="z-index: 100;";
num[index].style.cssText="background-color:red;color: #fff;";
chongqi();
}
rightbotton.onclick=function(){
clearInterval(dingshiqi);
index++;
if(index>imgs.length-1){
index=0;
}
for(var i =0 ;i<imgs.length;i++){
imgs[i].style.cssText="z-index: 0;";
num[i].style.cssText="background-color: #fff;color: #000;";
}
imgs[index].style.cssText="z-index: 100;";
num[index].style.cssText="background-color: red;color: #fff;";
chongqi();
}
num[0].onclick=function(){
clearInterval(dingshiqi);
index=0;
for(var i =0 ;i<imgs.length;i++){
imgs[i].style.cssText="z-index: 0;";
num[i].style.cssText="background-color: #fff;color: #000;";
}
imgs[index].style.cssText="z-index: 100;";
num[0].style.cssText="background-color: red;color: #FFFFFF;";
chongqi();
}
num[1].onclick=function(){
clearInterval(dingshiqi);
index=1;
for(var i =0 ;i<imgs.length;i++){
imgs[i].style.cssText="z-index: 0;";
num[i].style.cssText="background-color: #fff;color: #000;";
}
imgs[index].style.cssText="z-index: 100;";
num[1].style.cssText="background-color: red;color: #FFFFFF;";
chongqi();
}
num[2].onclick=function(){
clearInterval(dingshiqi);
index=2;
for(var i =0 ;i<imgs.length;i++){
imgs[i].style.cssText="z-index: 0;";
num[i].style.cssText="background-color: #fff;color: #000;";
}
imgs[index].style.cssText="z-index: 100;";
num[2].style.cssText="background-color: red;color: #FFFFFF;";
chongqi();
}
</script>
</html>
| 
转播
