如何实现图片循环切换？以下代码可切换，但无法循环。 10
<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var image = new Array();
image[0]= "./h.jpg";
image[1]= "./A.jpg";
image[2]= "./B.jpg";
image[3]= "./C.jpg";
image[4]= "./D.jpg";
image[5]= "./E.jpg";
image[6]= "./F.jpg";
function showPic() {
var pic = document.getElementById("picture");
var source = pic.getAttribute("src");
for(var i=0;i<image.length;i++){
if(source == image[i]){
source=image[i+1];
pic.setAttribute("src",source);
break;
}
}
}
</script>
</head>
<body>
<img onclick="showPic(this);" src="./h.jpg" alt="tupian" id="picture" />
</body>
</html> 展开
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var image = new Array();
image[0]= "./h.jpg";
image[1]= "./A.jpg";
image[2]= "./B.jpg";
image[3]= "./C.jpg";
image[4]= "./D.jpg";
image[5]= "./E.jpg";
image[6]= "./F.jpg";
function showPic() {
var pic = document.getElementById("picture");
var source = pic.getAttribute("src");
for(var i=0;i<image.length;i++){
if(source == image[i]){
source=image[i+1];
pic.setAttribute("src",source);
break;
}
}
}
</script>
</head>
<body>
<img onclick="showPic(this);" src="./h.jpg" alt="tupian" id="picture" />
</body>
</html> 展开
1个回答
展开全部
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://source1.qq.com/mqqweb/code/css/common/mqq_reset.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://3gqq.qq.com/html/css/3gqq_index.css" />
<title>图片轮播</title>
<script type="text/javascript" src="http://3gqq.qq.com/html/js/jquery-1.8.2.min.js"></script>
</head>
<body class="loading">
<div class="main">
<div class="pro-switch">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="img"><img src="http://3gimg.qq.com/images/3gqq/ad_home.jpg" height="450" width"960" alt="" /></div>
</li>
<li>
<div class="img"><img src="http://3gimg.qq.com/images/3gqq/ad_tuiguang.jpg" height="450" width"960" alt="" /></div>
</li>
<li>
<div class="img"><img src="http://3gimg.qq.com/images/3gqq/ad_yuetu.jpg" height="450" width"960" alt="" /></div>
</li>
<li>
<div class="img"><img src="http://3gimg.qq.com/images/3gqq/ad_nba.jpg" height="450" width"960" alt="" /></div>
</li>
<li>
<div class="img"><img src="http://3gimg.qq.com/images/3gqq/ad_stock.jpg" height="450" width"960" alt="" /></div>
</li>
<li>
<div class="img"><img src="http://3gimg.qq.com/images/3gqq/ad_auto.jpg" height="450" width"960" alt="" /></div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script defer src="http://3gqq.qq.com/html/js/slider.js"></script>
<script type="text/javascript">
$(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</body>
</html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://source1.qq.com/mqqweb/code/css/common/mqq_reset.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://3gqq.qq.com/html/css/3gqq_index.css" />
<title>图片轮播</title>
<script type="text/javascript" src="http://3gqq.qq.com/html/js/jquery-1.8.2.min.js"></script>
</head>
<body class="loading">
<div class="main">
<div class="pro-switch">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="img"><img src="http://3gimg.qq.com/images/3gqq/ad_home.jpg" height="450" width"960" alt="" /></div>
</li>
<li>
<div class="img"><img src="http://3gimg.qq.com/images/3gqq/ad_tuiguang.jpg" height="450" width"960" alt="" /></div>
</li>
<li>
<div class="img"><img src="http://3gimg.qq.com/images/3gqq/ad_yuetu.jpg" height="450" width"960" alt="" /></div>
</li>
<li>
<div class="img"><img src="http://3gimg.qq.com/images/3gqq/ad_nba.jpg" height="450" width"960" alt="" /></div>
</li>
<li>
<div class="img"><img src="http://3gimg.qq.com/images/3gqq/ad_stock.jpg" height="450" width"960" alt="" /></div>
</li>
<li>
<div class="img"><img src="http://3gimg.qq.com/images/3gqq/ad_auto.jpg" height="450" width"960" alt="" /></div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script defer src="http://3gqq.qq.com/html/js/slider.js"></script>
<script type="text/javascript">
$(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
