?1.代码
<html>
<head>
<script type="text/javascript" src="jquery-1.8.js"></script>
<script type="text/javascript" src="pictrue-con.js"></script>
<style>
#pic1 {
background-image:url(slide-cr.jpg);
}
#pic2 {
background-image:url(slide-jubula.jpg);
}
#pic3 {
background-image:url(slide-orion.jpg);
}
#pic3,#pic2,#pic1{
display:block;
width:631;
height:195;
position:absolute;
}
#main{
display:block;
width:631;
position:relative;
left:50%;
margin:0 -315px;
}
#select>div {
display:block;
width:18px;
height:25px;
margin-right:2px;
cursor:pointer;
float:left;
overflow:hidden;
background-image:url(hp-feature-sprite.png);
background-attachment:scroll;
background-repeat:no-repeat;
}
#c1 {
background-position:0 -100px;
}
#c2 {
background-position:0 -125px;
}
#c3 {
background-position:0 -150px;
}
#select{
position:absolute;
top:5;
left:500;
z-index:2;
}
</style>
</head>
<body >
<div id="main">
<div id="pictrue">
<a id="pic1" href="#" tabindex="1"></a>
<a id="pic2" href="#" tabindex="2"></a>
<a id="pic3" href="#" tabindex="3"></a>
</div>
<div id="select">
<div id="c1" tabindex="1"></div>
<div id="c2" tabindex="2"></div>
<div id="c3" tabindex="3"></div>
</div>
</div>
</body>
</html>
2.代码
$(document).ready(function() {
var upPic = $("#pictrue>a").first(); // 上次显示的图片
var nowPic; // 当前显示的图片
var nowi = 1;
var yy; //用来计算图片编号的位置
var upPicNo = $("#select>div").first(); //上次显示的图片编号
var nowPicNo; // 当前显示的图片编号
var size;
// 得到所要显示图片的数量
size = $("#select>div").size();
// 将除第一张图片以外的图片淡出,并初始化为第一张图片选中
$("#pictrue>a:gt(0)").fadeOut("slow");
// 第一张图片选中的同时图片编号以为选中
upPicNo.css({
"background-position": "0 -350"
});http://www.huiyi8.com/ppt/?
ppt素材
// 当点击图号时,对应的图片就显示
$("#select>div").click(function() {
nowPicNo = $(this);
nowi = nowPicNo.attr("tabindex");
nowPic = $("#pictrue>a:eq("+(nowi-1)+")");
if (!nowPic.is(‘:visible‘)) {
pictrueChange(nowPic, nowPicNo);
}
});
/**
**
*/
function pictrueChange(nowPic, nowPicNo) {
//*************************************
// 将上次选中的编号样式改回到未点击样式
var upNo = upPic.attr("tabindex");
yy = ( - 100 - (upNo - 1) * 25) + "px";
upPicNo.css({
"background-position": "0 " + yy
});
// 当前被点击图号的样式
yy = ( - 350 - (nowi - 1) * 25) + "px";
nowPicNo.css({
"background-position": "0 " + yy
});
upPicNo = nowPicNo;
upPic.fadeOut("slow");
nowPic.fadeIn("slow");
upPic = nowPic;
};
function autoPic() {
nowi = nowi + 1;
if (nowi <= size) {
nowPic = $("#pictrue>a:eq("+(nowi-1)+")");
nowPicNo = $("#select>div:eq("+(nowi-1)+")");
pictrueChange(nowPic, nowPicNo);
} else {
nowi = 0;
}
}
setInterval(autoPic, 3000);
// 图片编号的数字样式
$("#select>div").hover(function() {
// 判断如果当前图号被选中时,就不更改当前图号的鼠标移入样式
hoverFunction($(this), 225);
},
function() {
// 判断如果当前图号被选中时,就不更改当前图号的鼠标移出样式
hoverFunction($(this), 100);
});
/**
**
*/
function hoverFunction(picNumber, numLoc) {
var oldCss = picNumber.css("background-position");
oldCss = oldCss.substring(5, oldCss.length - 2);
if (oldCss < 350) {
yy = ( - numLoc - (picNumber.attr("tabindex") - 1) * 25) + "px";
picNumber.css({
"background-position": "0 " + yy
});
}
}
//$.extend({
// show:function(){
// alert("ready");
//}
//});
//setInterval("show()",3000);
});
?
JavaScript 图片广告自动与手动的切换,布布扣,bubuko.com