appcan Slider 图片轮播组件如何使用
1个回答
展开全部
参考下代码吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body{ margin:0; padding:0; font-size:12px; background:#fff}
ul, li{ list-style-type:none; margin:0; padding:0; font-weight:normal; font-style:normal}
.btn{ height:16px; float:left; padding:20px}
.btn a{ width:16px; height:16px; text-align:center; line-height:16px; font-size:11px; float:left; margin-left:5px; cursor:pointer; background:#00F; color:#fff}
.btn a:hover, .btn .cur{ background:#F60; text-decoration:none}
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
PicEve()
})
var i,sum,text;
function PicEve(){
var $pic_li = $("#pic li");
var $btn = $("#btn");
sum = $pic_li.length;
text="";
for( b=0; b<sum; b++){
text += "<a></a>"
}
$btn.html(text)
$btn.find("a").each(function(b,n){
$(n).attr("index",b)
$(n).html(b+1)
})
$btn.find("a").eq(0).addClass("cur")
$btn.find("a").click(function(e){
i=parseInt($(this).attr("index"));
c=parseInt($("#btn a[class='cur']").attr("index"));
if( i!=c ){
$btn.find("a").removeClass("cur");
$(this).addClass("cur");
}
//clearInterval(Play);
});
//$(document).mouseout(function(e){
// setInterval(PlayEve, 2000);
// });
}
//自动播放
var Play = setInterval(PlayEve, 2000);
function PlayEve(){
var $pic_li = $("#pic li");
var $btn = $("#btn");
i=parseInt($("#btn a[class='cur']").attr("index"))
sum = $pic_li.length;
if( i < sum - 1){
$btn.find("a").eq(i).removeClass("cur");
$btn.find("a").eq(i+1).addClass("cur");
i++
}else if(i==sum-1){
$btn.find("a").eq(sum-1).removeClass("cur");
$btn.find("a").eq(0).addClass("cur");
i=0
}
}
</script>
</head>
<body>
<ul id="pic" class="pic">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="btn" class="btn"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body{ margin:0; padding:0; font-size:12px; background:#fff}
ul, li{ list-style-type:none; margin:0; padding:0; font-weight:normal; font-style:normal}
.btn{ height:16px; float:left; padding:20px}
.btn a{ width:16px; height:16px; text-align:center; line-height:16px; font-size:11px; float:left; margin-left:5px; cursor:pointer; background:#00F; color:#fff}
.btn a:hover, .btn .cur{ background:#F60; text-decoration:none}
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
PicEve()
})
var i,sum,text;
function PicEve(){
var $pic_li = $("#pic li");
var $btn = $("#btn");
sum = $pic_li.length;
text="";
for( b=0; b<sum; b++){
text += "<a></a>"
}
$btn.html(text)
$btn.find("a").each(function(b,n){
$(n).attr("index",b)
$(n).html(b+1)
})
$btn.find("a").eq(0).addClass("cur")
$btn.find("a").click(function(e){
i=parseInt($(this).attr("index"));
c=parseInt($("#btn a[class='cur']").attr("index"));
if( i!=c ){
$btn.find("a").removeClass("cur");
$(this).addClass("cur");
}
//clearInterval(Play);
});
//$(document).mouseout(function(e){
// setInterval(PlayEve, 2000);
// });
}
//自动播放
var Play = setInterval(PlayEve, 2000);
function PlayEve(){
var $pic_li = $("#pic li");
var $btn = $("#btn");
i=parseInt($("#btn a[class='cur']").attr("index"))
sum = $pic_li.length;
if( i < sum - 1){
$btn.find("a").eq(i).removeClass("cur");
$btn.find("a").eq(i+1).addClass("cur");
i++
}else if(i==sum-1){
$btn.find("a").eq(sum-1).removeClass("cur");
$btn.find("a").eq(0).addClass("cur");
i=0
}
}
</script>
</head>
<body>
<ul id="pic" class="pic">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="btn" class="btn"></div>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
七鑫易维信息技术
2024-09-02 广告
Play Video 七鑫易维是致力于机器视觉和人工智能领域的高新科技企业，迄今已专注眼球追踪技术的研发、创新与应用超过14年，拥有完全自主知识产权，全球专利总量655余项。 作为眼球追踪技术领域的全球知名品牌，七鑫易维的产品体系覆盖眼动分...
点击进入详情页
本回答由七鑫易维信息技术提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
