java 图片轮播_[Java教程]jQuery实现图片轮播

[Java教程]jQuery实现图片轮播

0

2013-09-10 20:00:11

之前有碰到过jQuery实现列表自动滚动，这次的图片轮播在原理上与之相同，只有一些细微的差别，就是需要在图片的右下角显示当前图片的序号，效果如下：

先看一看html代码，以及对应的css代码：

• 
• 
• 
• 
• 

• 1
• 2
• 3
• 4
• 5

#scrollPics{ height: 150px; width: 100%; margin-bottom: 10px; overflow: hidden; position:relative;}.num{ position:absolute; right:5px; bottom:5px;}#scrollPics .num li{ float: left; color: #FF7300; text-align: center; line-height: 16px; width: 16px; height: 16px; cursor: pointer; overflow: hidden; margin: 3px 1px; border: 1px solid #FF7300; background-color: #fff;}#scrollPics .num li.on{ color: #fff; line-height: 21px; width: 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: #FF7300; font-weight: bold;}

用绝对定位设置列表 num 的位置，对 li 设置相关样式，on 表示显示图片对应的数字列表中 li 的样式类别。

接下来是 js 代码：//滚动广告 var len = $(".num > li").length; var index = 0; //图片序号 var adTimer; $(".num li").mouseover(function() { index = $(".num li").index(this); //获取鼠标悬浮 li 的index showImg(index); }).eq(0).mouseover(); //滑入停止动画，滑出开始动画. $('#scrollPics').hover(function() { clearInterval(adTimer); }, function() { adTimer = setInterval(function() { showImg(index) index++; if (index == len) { //最后一张图片之后，转到第一张 index = 0; } }, 3000); }).trigger("mouseleave"); function showImg(index) { var adHeight = $("#scrollPics>ul>li:first").height(); $(".slider").stop(true, false).animate({ "marginTop": -adHeight * index + "px" //改变 marginTop 属性的值达到轮播的效果 }, 1000); $(".num li").removeClass("on") .eq(index).addClass("on"); }

其实需要注意的就是定位的问题，《浅谈css中的position属性》已经描述过，就不写了。

本文网址：http://www.shaoqun.com/a/70346.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

jquery

0