您的位置：首页 > 其它

jq 轮播效果

2015-07-06 09:45 204 查看 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>轮播事件JQ</title>
</head>

<body>
<script type="text/javascript" src="jquery-1.11.1.min.js">

</script>
<style type="text/css">
ul, li {list-style: none;}
.zy_ctrl {width:150px;height:20px;line-height:20px;float:left;position:relative;top:7px;left:20px;}
.zy_prev {width:21px;height:19px;float:left;cursor:pointer;background-image:url(/eportal/fileDir/nyj/resource/cms/2013/07/2013072511525539456.gif);}
.zy_next {width:21px;height:19px;float:left;cursor:pointer;background-image:url(/eportal/fileDir/nyj/resource/cms/2013/07/next.gif);}
.zy_index { width: 108px;height: 20px;float: left;text-align: center;}
.zy_index span { display:inline-block; *display:inline;zoom:1; margin-right:8px;margin-top:6px;
width: 8px;
height: 8px;
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
background-color: #c3c3c3;
border: 1px solid #afafaf;
cursor:pointer;
}
.zy_index span.active { background-color: #f90; border: 1px solid #ff7d00;}
.zy_warp { width: 308px;height: 110px;margin:0;padding:0;overflow: hidden;position: relative;}
ul.zy_links {width:308px;height:110px;margin:0;padding:0;}
ul.zy_links li {width:308px;height:110px;float: left;}
</style>
<div style="border:1px solid #ccc;margin-top:10px;">
<div style="width:308px;height:34px;line-height:34px;font-size:14px;font-weight:bold;text-indent:12px;background-color:#eaeaea;">
<div style="float:left">这是一个轮播</div>
<div class="zy_ctrl">
<div class="zy_prev"></div>
<div class="zy_index"> </div>
<div class="zy_next"></div>
</div>
</div>

<div class="zy_warp">
<ul class="zy_links">
<li>
<img alt="" src="/eportal/fileDir/nyj/resource/cms/2013/08/2013081017234052524.jpg" style="width: 308px; height: 110px;"  />
</li>
<li><img alt="" border="0" src="/eportal/fileDir/nyj/resource/cms/2013/08/2013081017242847400.jpg" style="width: 308px; height: 110px;" />
</li>
<li><img alt="" border="0" src="/eportal/fileDir/nyj/resource/cms/2013/08/2013081017245375744.jpg" style="width: 308px; height: 110px;"  />
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var num = $('.zy_links').find('li').length;
var liWid = $('.zy_links li').width();
var slideWid = num*liWid;

var current = 0;
for (var i = 0; i < num; i++) {
$('.zy_index').append('<span></span>');
};

$('.zy_index').find('span').eq(0).addClass('active');
$('.zy_links').width(slideWid);

function zySlide () {
$('.zy_links').animate({"marginLeft":-liWid*current});
$('.zy_index').find('span').eq(current).addClass('active').siblings().removeClass('active');
}
$('.zy_next').click(function(){
current++;
if (current >= num) {
current = 0;
};
zySlide();
});

$('.zy_prev').click(function(){
current--;
if (current < 0) {
current = num-1;
};
zySlide();
});
$('.zy_index').find('span').click(function(){
current = $(this).index();
zySlide();
});

setInterval(autoSlide,6000);
function autoSlide(){
current++;
if (current >= num) {
current = 0;
};
zySlide();
}
});
</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航