网页制作怎么实现图片左右定时自动滚动，用JS jquery代码怎么实现？
2个回答
展开全部
jquery如何实现图片自动切换？ 浏览次数：1229次悬赏分：0 | 解决时间：2011-2-21 13:30 | 提问者：匿名
最佳答案 今天做一个网站，里面要用到4张图片自动切换的效果，本来是用flash实现的。ie8.0中flash的宽度是980px没错。但是奇怪的就是我页面宽度也是980px。可是偏偏在ie8.0下QQ截图一量无故多出了个40px，这样的感觉就是flash两边变短了。更郁闷的是，在其他人的电脑和浏览器都没问题。偏偏在我和客户的电脑就出现这种问题。找不到方法解决的情况下，只用jquery去实现我想要的效果了。先贴出代码：
<!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=gb2312" />
<title>JQUERY实现图片自动切换</title>
<style>
body{margin:0px; padding:0px; font-family:Arial}
ul{list-style:none;margin:0px;padding:0px}
.click_out{margin-left:5px; float:left; text-align:center; height:16px; line-height:16px; width:16px; background:#333; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer;_display:inline-block; }
.click_over{margin-left:5px; float:left;text-align:center; height:16px; line-height:16px; width:16px; background:#820000; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer; _display:inline-block; }
</style>
<script language="javascript" src="../Script/jquery-1.4.4.min.js"></script>
</head>
<body>
<div style="height:230px; width:980px; background:#EBEBEB; position:relative" id="flash_outer">
<div style=" position:absolute; left:0px; top:0px; width:980px; height:230px; overflow:hidden" id="flash_pic">
<div style="width:980px; height:250px; background:url(flash_pic/1.jpg)"></div>
<div style="width:980px; height:250px; background:url(flash_pic/2.jpg)"></div>
<div style="width:980px; height:250px; background:url(flash_pic/3.jpg)"></div>
<div style="width:980px; height:250px; background:url(flash_pic/4.jpg)"></div>
</div>
<ul style="position:absolute; right:0px; bottom:0px; height:16px" id="flash_num">
<li class="click_over">1</li>
<li class="click_out">2</li>
<li class="click_out">3</li>
<li class="click_out">4</li>
</ul>
</div>
<script language="javascript">
$(document).ready(function()
{
var len=$("#flash_num>li").length;
var index=1;
var int;
function showSys(num) //图片切换函数
{
$("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over");
$("#flash_pic>div").fadeOut().eq(num).fadeIn();
}
function ziDong() //自动切换
{
if(index==len)
{
index=0;
}
showSys(index);
index=index+1;
}
int=setInterval(ziDong,3000);
$("#flash_num>li").click(function(） //点击切换
{
var index_num=$("#flash_num>li").index(this);
showSys(index_num);
index=index_num+1; //改变全局变量的值，以便鼠标移开的时候能够衔接上
//$(".click_out").removeClass("click_over").eq(index).addClass("click_over");
//$(".click_out").eq(index).removeClass().addClass("click_over");
//alert(index);
});
$("#flash_outer").mouseover(function() //移动到上面时停止自动切换
{
clearInterval(int);
});
$("#flash_outer").mouseout(function() //移开时继续自动切换
{
int=setInterval(ziDong,3000);
});
});
</script>
</body>
</html>
3
最佳答案 今天做一个网站，里面要用到4张图片自动切换的效果，本来是用flash实现的。ie8.0中flash的宽度是980px没错。但是奇怪的就是我页面宽度也是980px。可是偏偏在ie8.0下QQ截图一量无故多出了个40px，这样的感觉就是flash两边变短了。更郁闷的是，在其他人的电脑和浏览器都没问题。偏偏在我和客户的电脑就出现这种问题。找不到方法解决的情况下，只用jquery去实现我想要的效果了。先贴出代码：
<!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=gb2312" />
<title>JQUERY实现图片自动切换</title>
<style>
body{margin:0px; padding:0px; font-family:Arial}
ul{list-style:none;margin:0px;padding:0px}
.click_out{margin-left:5px; float:left; text-align:center; height:16px; line-height:16px; width:16px; background:#333; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer;_display:inline-block; }
.click_over{margin-left:5px; float:left;text-align:center; height:16px; line-height:16px; width:16px; background:#820000; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer; _display:inline-block; }
</style>
<script language="javascript" src="../Script/jquery-1.4.4.min.js"></script>
</head>
<body>
<div style="height:230px; width:980px; background:#EBEBEB; position:relative" id="flash_outer">
<div style=" position:absolute; left:0px; top:0px; width:980px; height:230px; overflow:hidden" id="flash_pic">
<div style="width:980px; height:250px; background:url(flash_pic/1.jpg)"></div>
<div style="width:980px; height:250px; background:url(flash_pic/2.jpg)"></div>
<div style="width:980px; height:250px; background:url(flash_pic/3.jpg)"></div>
<div style="width:980px; height:250px; background:url(flash_pic/4.jpg)"></div>
</div>
<ul style="position:absolute; right:0px; bottom:0px; height:16px" id="flash_num">
<li class="click_over">1</li>
<li class="click_out">2</li>
<li class="click_out">3</li>
<li class="click_out">4</li>
</ul>
</div>
<script language="javascript">
$(document).ready(function()
{
var len=$("#flash_num>li").length;
var index=1;
var int;
function showSys(num) //图片切换函数
{
$("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over");
$("#flash_pic>div").fadeOut().eq(num).fadeIn();
}
function ziDong() //自动切换
{
if(index==len)
{
index=0;
}
showSys(index);
index=index+1;
}
int=setInterval(ziDong,3000);
$("#flash_num>li").click(function(） //点击切换
{
var index_num=$("#flash_num>li").index(this);
showSys(index_num);
index=index_num+1; //改变全局变量的值，以便鼠标移开的时候能够衔接上
//$(".click_out").removeClass("click_over").eq(index).addClass("click_over");
//$(".click_out").eq(index).removeClass().addClass("click_over");
//alert(index);
});
$("#flash_outer").mouseover(function() //移动到上面时停止自动切换
{
clearInterval(int);
});
$("#flash_outer").mouseout(function() //移开时继续自动切换
{
int=setInterval(ziDong,3000);
});
});
</script>
</body>
</html>
3
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
