轮播图实现-优快云博客

本文介绍两种轮播图的实现方式：一种是通过淡入淡出效果切换图片；另一种是通过水平滚动来展示不同的图片。每种方式都包含了完整的HTML、CSS和JavaScript代码，并解释了关键的实现步骤。

《---fadeIn轮播----》

<!DOCTYPE html>

<head>

*{margin:0px;padding: 0px;list-style: none;}

div{width:400px;height:300px;margin:100px auto;position: relative;}

#images{width: 400px;height: 300px;position: relative;}

#images li{width: 400px;height: 300px;position: absolute;left:0px;top:0px;display: none;}

#images li:first-child{display: block;}

#numbers{position: absolute;bottom:10px;right:5px;z-index:20;}

#numbers li{width: 20px;height: 20px;background: #ccc;border:10px solid #666;margin-left: 5px;color: #000;float:left;line-height: center;text-align: center;cursor: pointer;}

#numbers .a{background: #E97305;color:#fff;}

</style>

</head>

<body>

<div>

</ul>

</ul>

</div>

var index=0;//当前正在显示的图片的索引

var inte=null;

//给数字下标绑定鼠标移入和移出事件

$('#numbers li').hover(function(){

//清楚定时器

clearInterval(inte);

//获取当前数字下标元素的索引

index=$(this).index();

//显示图片

show(index);

},function(){

autorun();

})

//显示指定索引的图片

function show(i){

//隐藏同辈的图片

$('#images li').eq(i).siblings().hide();

$('#images li').eq(i).fadeIn();

//移出其他的数字下标为a

$('#numbers li').eq(i).siblings().removeClass('a');

//是当前这个元素添加a类

$('#numbers li').eq(i).addClass('a');

}

//自动运行

function autorun(){

inte=setInterval(function(){

//索引自增

index++;

//检测索引是否越界

if(index==5){

index=0;

}

show(index);

},2000);

}

autorun();

</script>

</body>

</html>

《---向左滚动轮播---》

<!DOCTYPE html>

<head>

*{margin:0px;padding:0px;list-style:none;}

div{width:400px;height:300px;border:solid 1px #ddd;margin:100px auto;position:relative;overflow:hidden;}

#images{width:2000px;height:300px;position:absolute;}

#images li{width:400px;height:300px;float:left;}

#images li:first-child{display:block;}

#numbers{position:absolute;bottom:0px;right:0px;z-index:20;}

#numbers li{width:20px;height:20px;float:left;margin-right:10px;border:solid 1px #ddd;text-align:center;font-size:14px;line-height:20px;cursor:pointer;}

#numbers .active{background:black;color:white;}

</style>

</head>

<body>

<div>

</ul>

</ul>

</div>

var index = 0;//当前正在显示的图片的索引

var inte = null;

//给数字下标绑定鼠标移入和移出事件

$('#numbers li').hover(function(){

//清空定时器

clearInterval(inte);

//获取当前数字下标元素的索引

// var i = $(this).html()-1;

index = $(this).index();

//显示图片

show(index);

}, function(){

autoRun();

});

//显示指定索引的图片

function show(i){

//计算left的值0 0 1 -400 2 -800 3 -1200 n n*(-400)

var newLeft = i*(-400);

//使用动画函数

$('#images').animate({

left: newLeft+'px'

},500)

//移出其他的数字下标的active

$('#numbers li').eq(i).siblings().removeClass('active');

//使当前这个元素添加active类

$('#numbers li').eq(i).addClass('active');

}

//自动运行

function autoRun(){

inte = setInterval(function(){

//索引自增

index++;

//检测索引是否越界

if(index == 5){

index = 0;

}

show(index);

},2000);

}

//鼠标放到图片上后停止定时器

$('#images').hover(function(){

clearInterval(inte);

},function(){

autoRun();

})

autoRun();

</script>

</body>

</html>

转载于:https://www.cnblogs.com/lixiaoni/p/6898941.html

jQuery轮播图