jquery网页开发实例精解--焦点图（图片自动滚动以及鼠标经过滚动、图片自动淡入淡出已经鼠标经过淡入淡出）

来源：互联网发布：资本控制舆论知乎编辑：程序博客网时间：2024/05/24 02:30

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body{margin:0;padding:0;}
#shider{
width:500px;
height:375px;
margin:0 auto;
position:relative;
}
ul{
list-style:none;
margin:0;padding:0;
}
img{width:500px;height:375px;margin:0;padding:0;}
#box{
width:500px;
height:375px;
overflow:hidden;
}
#show{
width:500px;
height:1500x;
overflow:hidden;
}
#number{position:absolute;bottom:20px;right:10px;}
#number li{
float:left;
width:20px;
height:20px;
text-align:center;
line-height:20px;
background-color:#fff;
border:solid 1px red;
margin-left:5px;
}
#number li.on{ //这里设置数字列表鼠标经过时候的样式
color:#fff;
line-height;20px;
width:20px;
height:20px;
font-size:14px;
border:none;
background:#2b5000;
font-weight:bold;
cursor:pointer;
text-align: center;
border:1px red solid;
}

</style>
<script src="jquery-2.0.3.min.js"></script> //必须导入jq插件
<script type="text/javascript">

$(document).ready(function(){
var x = 0;
var len = $("#number li").length; //项目列表的个数，和图片的个数一样
$("#number li").mouseover(function(){
var x=$(this).index(); //获得鼠标经过时候的索引
$(this).addClass('on');
showImg(x); //把对应的索引传递给showImg函数
})
function adTimer(){
x+=1; //这里传递的是索引，而不是图片的宽度，必须注意
showImg(x);
if(x>=len){x=0};
}

var timer = setInterval(adTimer,3000) //定时器
})

function showImg(x){ //图片滚动执行函数
$("#show").animate({"margin-top":-375*x},300);
$("#number li").removeClass("on").eq(x).addClass('on');
}
// 整个过程以传递索引为一条主线

</script>
</head>
<body>
<div id="shider">
<div id="box">
<div id="show">
<img src="images/00033.jpg"><img src="images/00035.jpg"><img src="images/00035.jpg"><img src="images/00036.jpg">
</div>
</div>
<ul id="number">
<li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
</div>
</body>

</html>

********************分割线*******************************图片自动切换淡入淡出以及鼠标经过li的时候动态淡入淡出********************************

<!DOCTYPE html ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
#imgbox img{display:none;}
#imgshow{width:500px;height:375px;margin:0 auto;position:relative;border:1px #333333 solid;overflow:hidden;}//这里必须设置好固定height和width已经overflow否则就会撑开
#num{width:155px;height:30px;position:absolute;right:20px;bottom:0px; z-index: 1}
ul{list-style:none;}
li{width:20px;height:20px;display:block;border:1px #999900 dashed;margin:1px;text-align:center;float:left;color:#999999;}
.on{background-color:#99FFFF;font-weight:bold;}
</style>
<script src="jquery-2.0.3.min.js"></script>
<script>
$(document).ready(function(){
var index=0;
var len=$("#imgbox img").size();
doshow(0)//第一次执行,这里必须要在其他函数执行的时候调用第一张图片，否则在网页加载的时候就会在本来图片改显示的地方出现空白
$("li").mouseover(function(){ //鼠标经过li的时候执行
index=$(this).index();//获取鼠标经过时候的index；
doshow(index);//把获取鼠标经过时候的index传递个可以执行焦点图效果的函数
});
var timer=setInterval(adTimer,3000);//定时器，每次3000毫秒都调用一次函数adTimer

1 0