淡入淡出轮播图

来源：互联网发布：好心分手知乎编辑：程序博客网时间：2024/06/10 01:48

该轮播图实现了：5秒切换一次，可点击下方圆点手动切换，缓动效果为修改透明度(渐隐渐显)。

提示：该红色区域内的索引小球可以手动改变到自己想调的位置（在css文件下标注的位置）

以下是HTML5和js代码部分：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>首页</title><link rel="stylesheet" href="css/home.css" /><link rel="stylesheet" type="text/css" href="css/new_file.css"/></head><body><div class="container"><!--轮播--><div class="carousel"><div class="window"><a href="#"><img src="img/img1.png" alt=""/></a><a href="#"><img src="img/img2.jpg" alt=""/></a><a href="#"><img src="img/img3.jpg" alt=""/></a><a href="#"><img src="img/img4.jpg" alt=""/></a></div><!--索引--><div class="paging"><div><a href="javascript:" index='0'></a></div><div><a href="javascript:" index='1'></a></div><div><a href="javascript:" index='2'></a></div><div><a href="javascript:" index='3'></a></div></div></div></div></div></body><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">$('.paging a:first').addClass('active');//第一个索引显示$('.carousel .window a:gt(0)').hide();//第一个图片显示var i_num=0;//计数器var num=$('.carousel .window a').length;//图片个数//轮播开始函数rotateSwitch=function(){//定时器play，5000ms换一次play=setInterval(function(){if (i_num == num-1) {i_num=-1;}//图片轮播$('.carousel .window a').eq(i_num+1).fadeIn(500).siblings('a').fadeOut(500);//索引小球$('.paging div a').eq(i_num+1).addClass('active').parent().siblings('div').children().removeClass('active');i_num++;document.title=i_num;},5000)};rotateSwitch();//点击小球时的事件$('.paging div').click(function(){var triggerID = parseInt($(this).children().attr('index'));//获取点击小球的index属性值clearInterval(play);//清除定时器 play//图片轮播$('.carousel .window a').eq(triggerID).fadeIn(500).siblings('a').fadeOut(500);//索引小球$('.paging div a').eq(triggerID).addClass('active').parent().siblings('div').children().removeClass('active');i_num=triggerID;//把当前位置传给rotateSwitchrotateSwitch();})</script></html>

以下是css代码部分：

/*轮播*/.carousel {position: absolute;z-index: 10;width: 960px;height: 382px;border: 4px white solid;-webkit-box-shadow: 0 10px 20px gray;box-shadow: 0 10px 20px gray;left: 50%;margin-left: -480px;margin-top: -40px;}.carousel .window img {position: absolute;}/*索引球的位置*/.carousel .paging {position: absolute;bottom: -40px;left: 50%;width: 125px;margin-left: -62.5px;line-height: 24px;overflow: hidden;text-align: center;}.carousel .paging div {float: left;width: 24px;height: 24px;border: 1px #dadada solid;box-shadow: 0 0 5px #dadada inset;-webkit-box-shadow: 0 0 5px #dadada inset;-moz-border-radius: 24px;-webkit-border-radius: 24px;border-radius: 24px;background: white;margin-left: 5px;cursor: pointer;}.carousel .paging .active {display: inline-block;width: 15px;height: 15px;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;background: #ff7800;margin: 4px auto;}

0 0