京东商城-广告轮播图
2016-11-17 本文已影响73人
Fancy_WX
广告轮播图对于有开发经验的程序员来说非常的简单,本次贴出代码是为了让初学者能够尽快掌握实现方法,同时,如何使用更少的代码实现这一功能也是考察我们编码水平的重要因素.欢迎各位童鞋们参考交流.
css样式
<style type="text/css">
*{
margin: 0;padding: 0;
}
#flash{
position: relative;
width: 670px;
height: 220px;
margin: 150px auto;
overflow: hidden;
}
#flash .scroll{
position: absolute;
width: 670px;
height: 1000%;
}
#flash .scroll img{
width: 670px;
height: 220px;
}
#flash .scroll ul li{
list-style-type: none;
}
.control{
cursor: pointer;
width: 180px;
height: 20px;
position: absolute;
top: 330px;
left: 720px;
z-index: 1;
}
.control li{
font-size: 14px;
margin-left: 10px;
text-align: center;
line-height: 26px;
float: left;
list-style-type: none;
background-color: #cccccc;
width: 26px;
height: 26px;
border-radius:13px;
} #hover{
background-color: red;
}
</style>
html+js部分
<body>
<div class="control">
<ul>
<li id="hover">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="flash">
<div class="scroll">
<ul>
<li><img src="image/img_01.jpg"></li>
<li><img src="image/img_02.jpg"></li>
<li><img src="image/img_03.jpg"></li>
<li><img src="image/img_04.jpg"></li>
</ul>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var index = 0;
var timer = null;
$('.control ul li').hover(function () {
if (timer != null){
window.clearInterval(timer);
}
index = $(this).index();
$(this).attr('id','hover').siblings('li').removeAttr('id');
$('.scroll').animate({top:index*(-220)},300);
},function () {
autoPlay();
});
function autoPlay() {
timer = window.setInterval(fn,1000);
}
function fn() {
index ++;
if (index == 4){ index = 0;}
$('.control ul li').eq(index).attr('id','hover').siblings('li').removeAttr('id');
$('.scroll').animate({top:index*(-220)},300);
}
autoPlay();
</script></body>
说明
-
本方法主要使用了JQuery的siblings(), animate(), eq(), 等dom操作的方法.JQuery是一个封装很完善的库,使用这些方法可以帮助我们省去很多JS遍历的操作.对帮助我们提升开发效率有很大作用.下面我来简单介绍一下上述几个方法:
-
siblings()方法:
-
语法: $(obj) .siblings(selector) 获得指定元素所在集合中所有兄弟元素的集合,selector元素是可选的,如果传入,那么匹配selector元素的集合.
-
用法:通俗的说就是让一组元素中某一个元素保持某种状态,而这个集合中其他的元素统统保持另外一种状态,本质是遍历操作.
-
animate() 方法:
-
语法1: $(obj).animate(style,speed,easing,callback);
-
语法2: $(obj).animate(styles,options);
参数的说明请自行了解,这里不做过多说明. -
用法: 让指定的元素执行传入的css样式,以及执行动画的时间,快慢,和回调方法,执行动画的规则按照css标准执行,比如改变元素位置top,left等需要将元素的position设置为absolate.
-
-
eq() 方法:
- 语法:$(obj).eq(index) 在一个元素集中找到下标为index的元素.返回这个元素对应的JQuery对象.
- 用法:快速通过下标找到元素,在点击事件中非常好用.
