图片轮播

qq_31842135 2015-10-08 08:00:13
请大家帮看一下下<!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>
<!--声明当前页面编码集charset=gbk中文编码gb2321;charset=utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>向上图论</title>
<style type="text/css">
body{background:#e4e4e4}//*css定义区开始*//
*{margin:0px;}
#flish{width:
670px;
height:240px;
background:#93C;
margin:200px auto 0px;
position:relative;
overflow:hidden;
}
#flish .scroll{
width:670px;
height:240000%;
background:#CCC;
position:absolute;
left:0px;
top:-240px;
}
#flish .scroll img{display:block;}
#flish ul.button li{
list-style-type:none;
width:20px;
height:20px;
background:#999;
float:left;margin:0px 2px;
color:#FFF;text-align:center;
font-size:12px;
line-height:20px;
border-radius:10px;
box-shadow:0px 0px 5px #000;
}
#flish ul.button{
position:absolute;
bottom:20px;
right:10px;
}
#flish ul.button li.hover{
background:#ff0066;
}//*定义区结束*//
</style>
</head>
<body>
<div id="flish">
<div class="scroll"><!--插入图片-->
<img src="tp/4.jpg" width="670" height="240"/>
<img src="tp/1.jpg" width="670" height="240"/>
<img src="tp/2.jpg"width="670" height="240"/>
<img src="tp/3.jpg" width="670" height="240"/>
<img src="tp/bn-txf.jpg" width="670" />
<img src="tp/bn-wsgw.jpg" width="670" />
</div>
<!--按钮开始-->
<ul class="button">
<li class="hover">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul><!--按钮结束-->
</div>
<!--滚动开始-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var _index=0;
var setTime=null;
$("ul.button li").hover(fuction(){
clearInterval(setTime);//清除定时播放器
index=$(this).index();
//alert(index);
//添加class="hover"
$(this).addClass("hover").siblings("li").removerClassover("hover");
$(".scroll").animate({top:(_index*240)},1000);
}.function(){autoPlay();//鼠标移开调用自动播放
});


//自动轮播
function autoPlay(){
setTime=setInterval(function(){
_index++; //序列号加
if(_index>5){_index=0;}//当播放到第五张时，转到第一张
$("ul.button li").eq(_index).addClass("hover").siblings("li").removerClassover("hover");
$(".scroll").animate({top:=(_index*240)},1000);
},2000);

}
autoPlay();
</script>
<!--滚动结束-->
</body>
</html>
面这段代码错在哪里老是无法实现动态效果。
...全文
111 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
q81999008 2015-10-09
  • 打赏
  • 举报
 回复
引用 4 楼 DaveLeeCN 的回复:
[quote=引用 2 楼 q81999008 的回复:] <!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> <!--声明当前页面编码集charset=gbk中文编码gb2321;charset=utf-8国际编码--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>向上图论</title> <style type="text/css"> body{background:#e4e4e4}//*css定义区开始*// *{margin:0px;} #flish{width: 670px; height:240px; background:#93C; margin:200px auto 0px; position:relative; overflow:hidden; } #flish .scroll{ width:670px; height:240000%; background:#CCC; position:absolute; left:0px; top:-240px; } #flish .scroll img{display:block;} #flish ul.button li{ list-style-type:none; width:20px; height:20px; background:#999; float:left;margin:0px 2px; color:#FFF;text-align:center; font-size:12px; line-height:20px; border-radius:10px; box-shadow:0px 0px 5px #000; } #flish ul.button{ position:absolute; bottom:20px; right:10px; } #flish ul.button li.hover{ background:#ff0066; }//*定义区结束*// </style> </head> <body> <div id="flish"> <div class="scroll"><!--插入图片--> <img src="tp/4.jpg" width="670" height="240"/> <img src="tp/1.jpg" width="670" height="240"/> <img src="tp/2.jpg"width="670" height="240"/> <img src="tp/3.jpg" width="670" height="240"/> <img src="tp/bn-txf.jpg" width="670" /> <img src="tp/bn-wsgw.jpg" width="670" /> </div> <!--按钮开始--> <ul class="button"> <li class="hover">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul><!--按钮结束--> </div> <!--滚动开始--> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var _index=0; var setTime=null; $("ul.button li").hover(fuction(){ clearInterval(setTime);//清除定时播放器 index=$(this).index(); //alert(index); //添加class="hover" $(this).addClass("hover").siblings("li").removerClassover("hover"); $(".scroll").animate({top:(_index*240)},1000); }.function(){autoPlay();//鼠标移开调用自动播放 }); //自动轮播 function autoPlay(){ setTime=setInterval(function(){ _index++; //序列号加 if(_index>5){_index=0;}//当播放到第五张时，转到第一张 $("ul.button li").eq(_index).addClass("hover").siblings("li").removerClassover("hover"); $(".scroll").animate({top:=(_index*240)},1000); },2000); } autoPlay(); </script> <!--滚动结束--> </body> </html> 错的给你标红了
1、jquery中animate的语法错误；2、top的设置中需要带px；3、hover中的第二个function连缀是什么东东？[/quote] 1 .function()拼错了 你原文是少个n的。 2..houver的语法错误，两个function间应该用','分开而原文中用的是'.' 。 3.animate的语法错误top:=(_index*240) 这里不用加=
DaveLeeCN 2015-10-09
  • 打赏
  • 举报
 回复
引用 2 楼 q81999008 的回复:
<!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> <!--声明当前页面编码集charset=gbk中文编码gb2321;charset=utf-8国际编码--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>向上图论</title> <style type="text/css"> body{background:#e4e4e4}//*css定义区开始*// *{margin:0px;} #flish{width: 670px; height:240px; background:#93C; margin:200px auto 0px; position:relative; overflow:hidden; } #flish .scroll{ width:670px; height:240000%; background:#CCC; position:absolute; left:0px; top:-240px; } #flish .scroll img{display:block;} #flish ul.button li{ list-style-type:none; width:20px; height:20px; background:#999; float:left;margin:0px 2px; color:#FFF;text-align:center; font-size:12px; line-height:20px; border-radius:10px; box-shadow:0px 0px 5px #000; } #flish ul.button{ position:absolute; bottom:20px; right:10px; } #flish ul.button li.hover{ background:#ff0066; }//*定义区结束*// </style> </head> <body> <div id="flish"> <div class="scroll"><!--插入图片--> <img src="tp/4.jpg" width="670" height="240"/> <img src="tp/1.jpg" width="670" height="240"/> <img src="tp/2.jpg"width="670" height="240"/> <img src="tp/3.jpg" width="670" height="240"/> <img src="tp/bn-txf.jpg" width="670" /> <img src="tp/bn-wsgw.jpg" width="670" /> </div> <!--按钮开始--> <ul class="button"> <li class="hover">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul><!--按钮结束--> </div> <!--滚动开始--> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var _index=0; var setTime=null; $("ul.button li").hover(fuction(){ clearInterval(setTime);//清除定时播放器 index=$(this).index(); //alert(index); //添加class="hover" $(this).addClass("hover").siblings("li").removerClassover("hover"); $(".scroll").animate({top:(_index*240)},1000); }.function(){autoPlay();//鼠标移开调用自动播放 }); //自动轮播 function autoPlay(){ setTime=setInterval(function(){ _index++; //序列号加 if(_index>5){_index=0;}//当播放到第五张时，转到第一张 $("ul.button li").eq(_index).addClass("hover").siblings("li").removerClassover("hover"); $(".scroll").animate({top:=(_index*240)},1000); },2000); } autoPlay(); </script> <!--滚动结束--> </body> </html> 错的给你标红了
1、jquery中animate的语法错误；2、top的设置中需要带px；3、hover中的第二个function连缀是什么东东？
qq_31842135 2015-10-08
  • 打赏
  • 举报
 回复
还是不行不知道是哪里出问题
q81999008 2015-10-08
  • 打赏
  • 举报
 回复
<!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> <!--声明当前页面编码集charset=gbk中文编码gb2321;charset=utf-8国际编码--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>向上图论</title> <style type="text/css"> body{background:#e4e4e4}//*css定义区开始*// *{margin:0px;} #flish{width: 670px; height:240px; background:#93C; margin:200px auto 0px; position:relative; overflow:hidden; } #flish .scroll{ width:670px; height:240000%; background:#CCC; position:absolute; left:0px; top:-240px; } #flish .scroll img{display:block;} #flish ul.button li{ list-style-type:none; width:20px; height:20px; background:#999; float:left;margin:0px 2px; color:#FFF;text-align:center; font-size:12px; line-height:20px; border-radius:10px; box-shadow:0px 0px 5px #000; } #flish ul.button{ position:absolute; bottom:20px; right:10px; } #flish ul.button li.hover{ background:#ff0066; }//*定义区结束*// </style> </head> <body> <div id="flish"> <div class="scroll"><!--插入图片--> <img src="tp/4.jpg" width="670" height="240"/> <img src="tp/1.jpg" width="670" height="240"/> <img src="tp/2.jpg"width="670" height="240"/> <img src="tp/3.jpg" width="670" height="240"/> <img src="tp/bn-txf.jpg" width="670" /> <img src="tp/bn-wsgw.jpg" width="670" /> </div> <!--按钮开始--> <ul class="button"> <li class="hover">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul><!--按钮结束--> </div> <!--滚动开始--> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var _index=0; var setTime=null; $("ul.button li").hover(fuction(){ clearInterval(setTime);//清除定时播放器 index=$(this).index(); //alert(index); //添加class="hover" $(this).addClass("hover").siblings("li").removerClassover("hover"); $(".scroll").animate({top:(_index*240)},1000); }.function(){autoPlay();//鼠标移开调用自动播放 }); //自动轮播 function autoPlay(){ setTime=setInterval(function(){ _index++; //序列号加 if(_index>5){_index=0;}//当播放到第五张时，转到第一张 $("ul.button li").eq(_index).addClass("hover").siblings("li").removerClassover("hover"); $(".scroll").animate({top:=(_index*240)},1000); },2000); } autoPlay(); </script> <!--滚动结束--> </body> </html> 错的给你标红了
q81999008 2015-10-08
  • 打赏
  • 举报
 回复
<!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> <!--声明当前页面编码集charset=gbk中文编码gb2321;charset=utf-8国际编码--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>向上图论</title> <style type="text/css"> body{background:#e4e4e4}//*css定义区开始*// *{margin:0px;} #flish{width: 670px; height:240px; background:#93C; margin:200px auto 0px; position:relative; overflow:hidden; } #flish .scroll{ width:670px; height:240000%; background:#CCC; position:absolute; left:0px; top:-240px; } #flish .scroll img{display:block;} #flish ul.button li{ list-style-type:none; width:20px; height:20px; background:#999; float:left;margin:0px 2px; color:#FFF;text-align:center; font-size:12px; line-height:20px; border-radius:10px; box-shadow:0px 0px 5px #000; } #flish ul.button{ position:absolute; bottom:20px; right:10px; } #flish ul.button li.hover{ background:#ff0066; }//*定义区结束*// </style> </head> <body> <div id="flish"> <div class="scroll"><!--插入图片--> <img src="tp/4.jpg" width="670" height="240"/> <img src="tp/1.jpg" width="670" height="240"/> <img src="tp/2.jpg"width="670" height="240"/> <img src="tp/3.jpg" width="670" height="240"/> <img src="tp/bn-txf.jpg" width="670" /> <img src="tp/bn-wsgw.jpg" width="670" /> </div> <!--按钮开始--> <ul class="button"> <li class="hover">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul><!--按钮结束--> </div> <!--滚动开始--> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var _index=0; var setTime=null; $("ul.button li").hover(fuction(){ clearInterval(setTime);//清除定时播放器 index=$(this).index(); //alert(index); //添加class="hover" $(this).addClass("hover").siblings("li").removerClassover("hover"); $(".scroll").animate({top:(_index*240)},1000); }[color=#FFFF00].function(){autoPlay();//鼠标移开调用自动播放[/color] }); //自动轮播 function autoPlay(){ setTime=setInterval(function(){ _index++; //序列号加 if(_index>5){_index=0;}//当播放到第五张时，转到第一张 $("ul.button li").eq(_index).addClass("hover").siblings("li").removerClassover("hover"); $(".scroll").animate({top:[color=#FFFF00]=(_index*240)[/color]},1000); },2000); } autoPlay(); </script> <!--滚动结束--> </body> </html> 你拿什么工具写代码的？连基本的语法错误都没提示？
jquery幻灯片插件大小图片切换，兼容性好支持图片轮播切换
jquery幻灯片插件大小图片切换，兼容性好支持图片轮播切换
纯div+css轮播图片切换图片
纯DIV+CSS做的三种图片滚动，轮播图片 1.2.3.4图片切换 电子相册
Unity图片切换轮播功能
一个可以在Unity进行图片轮播的demo，只需要给一个texture 2d的图片数组就可以直接用，有多种切换特效
最好看的jquery 图片轮播图片切换特效
最好看的jquery 图片轮播图片切换特效，不管你信不信，反正我是信了。
JQUERY幻灯片图片轮播带进度条幻灯片图片切换
JQUERY幻灯片图片轮播带进度条幻灯片图片切换
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章