您的位置：首页 > 运维架构 > 网站架构

名企动态网站开发--广告轮播效果

2016-04-09 09:41 399 查看

以上效果受博客图片大小限制，未能完全展示效果，想看到效果的请在本地执行以下程序

若需要图片素材，请联系博主

html部分相对简单，这同时体现出了css和js技术对网页开发强大的辅助功能

html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/jquery-2.2.1.min.js" ></script>
<script src="js/index.js" ></script>

</head>
<body>
<div id="area">
<!--此div盒子用于存放六张供轮播的广告图片 -->
<div class="scroll">
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
<img src="img/6.jpg"/>
</div>
<!--ul-li无序列表标签用于存放按钮数字 -->
<ul class="button">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

</div>
</body>
</html>

css程序中，标签一定要注明完整路径，防止多个模块间的同名标签产生冲突

css文件

*{
margin: 0;
}
#area{
width: 670px;
height: 240px;
margin: 200px auto 0px;
position: relative;
overflow: hidden;
background: whitesmoke;
}
#area .scroll{
width: 670px;
height: 1000%;
position: absolute;
top: -240px;
}
#area .scroll img{
display: block;
}
#area ul li{
list-style-type: none;
width: 20px;
height: 20px;
background: gray;
border: 1px solid white;
float: left;
margin: 0 2px;
text-align: center;
color: white;
border-radius: 10px;
box-shadow: 3px 0 5px black;
}
#area ul{
width: 160px;
height: 20px;
position: absolute;
bottom: 12px;
right: 12px;
}
#area ul li.hover{
background: #cc3300;
}

jQuery让网页动起来，同时其精简程度也大大优于js，在内存占用上与flash时代也不可同日而语

js文件（jQuery）

$(document).ready(function(){
//定义_index变量，代表广告图片的序号
var _index=0;
//setInterval()函数的返回值
var setTime=null;
/*
* hover函数对鼠标滑进滑出事件进行操作，当鼠标光标滑进元素区域时触发第一个function()函数，
* 当光标离开时触发第二个function()函数
* 第一个function(){
* 	1.清除定时器自动轮播效果
*  2.获得鼠标选定的序列号数值并赋给_index
*  3.给当前选定的序号添加背景色，未选定的清除背景色，背景色设置在css文件中的.hover中
*  4.animate()方法进行固定间隔的图片切换，以便产生动画效果
* }
* 第二个function(){
* 	光标移开按钮区域时，继续调用自动轮播函数--autoPlay()
* }
*/
$('ul li').hover(function(){
clearInterval(setTime);
_index=$(this).index();
$(this).addClass("hover").siblings('li').removeClass("hover");
$('.scroll').animate({
top:-(_index*240)
},300)

},function(){
autoPlay();
})
/*
* 定义自动轮播函数autoPlay()
* setInterval()函数第一个参数为要重复执行的函数，第二个参数为每次执行间隔
*/
function autoPlay(){
setTime=setInterval(function(){
if(_index==6)_index=0;

$('ul li').eq(_index).addClass("hover").siblings('li').removeClass("hover");
$('.scroll').animate({top:-(_index*240) },2000)
_index++;
},2000);

}
autoPlay();

})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery 广告轮播 JavaScript js html

相关文章推荐

新的分享

章节导航