jQuery实现图片切换

最新推荐文章于 2024-02-20 00:03:41 发布

Sean_SJTU

最新推荐文章于 2024-02-20 00:03:41 发布

阅读量1.7k

点赞数

分类专栏： Web 文章标签： jquery

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

index.html:

<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>

slider.js:

$(function(){
$('#number li').mouseover(function(){
  $("#"+this.id).addClass("selected").siblings().removeClass("selected");
  $('.slider1 li img').fadeIn(4000).attr("src","images/"+(this.id)+".jpg");
  });
});
/*首页广告效果*/
$(function(){
     var len = $(".num > li").length;
var index = 0;
var adTimer;
$(".num li").mouseover(function(){
  index =   $(".num li").index(this);
  showImg(index);
}).eq(0).mouseover();
//滑入停止动画，滑出开始动画.
$('.ad').hover(function(){
    clearInterval(adTimer);
   },function(){
    adTimer = setInterval(function(){
       showImg(index)
    index++;
    if(index==len){index=0;}
     } , 2000);
}).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片
function showImg(index){
        var adHeight = $(".content_right .ad").height();
  $(".slider").stop(true,false).animate({bottom : -adHeight*index},1000);

     $(".num li").removeClass("on")
   .eq(index).addClass("on");
}

common.css:

/** css Reset star like yahoo **/
body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, th, td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
ul,li{list-style:none;}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
/** css Reset end **/

index.css:

#wrapper {
border:1px #ccc solid;
position:relative;
overflow:hidden;
width:573px;
height:257px;
font-size:14px;
font-family:Tahoma, Geneva, sans-serif;
}
#number {
width:88px;
position:absolute;
left:10px;
bottom:10px;
}
#number li {
padding-left:6px;
float:left;
text-indent:-9999px;
width:16px;
height:16px;
overflow:hidden;
background-image:url(../images/number1.png);
background-repeat:no-repeat;
}
#buttom_0 {
background-position:0 0;
}
#buttom_1 {
background-position:-22px 0;
}
#buttom_2 {
background-position:-44px 0;
}
#buttom_3 {
background-position:-66px 0;
}
#buttom_0.selected {
background-position:0 -16px;
}
#buttom_1.selected {
background-position:-22px -16px;
}
#buttom_2.selected {
background-position:-44px -16px;
}
#buttom_3.selected {
background-position:-66px -16px;
}
/* */
.content_right{float:left;}
.content_right .ad {
margin-bottom:10px;
width:573px;
height:257px;
overflow:hidden;
position:relative;
}
.content_right .slider,.content_right .num{
position:absolute;
}
.content_right .slider li{
list-style:none;
display:inline;

}
.content_right .slider img{
width:573px;
height:257px;
display:block;
}
.content_right .num{
right:5px;
bottom:5px;
}
.content_right .num li{
float: left;
color: #069;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #069;
background-color: #fff;
}
.content_right .num li.on{
color: #fff;
line-height: 16px;
width: 16px;
height: 16px;
font-size: 14px;
margin: 3px 1px;
border: 1px solid #069;
background-color: #069;
font-weight: bold;
}

/************************************/

buttom_0.jpg --- buttom_3.jpg

number1.png:

转载原文地址：http://www.cnblogs.com/osmond/archive/2011/12/05/2277022.html

Sean_SJTU

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现图片切换

index.html: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档按钮1 按钮2 按钮3
复制链接

扫一扫