先看网页代码:
<body>
<div id="content">
<div id="top">
<ul>
<li class="top1"><a href="#" id="tianmao" class="a_link">天猫</a>精选</li>
<li class="top2">
<div>1吃货节<span style="color:#ccc">sdfsfsfdsfsd</span></div>
<div>2电器热卖</div>
<div>3天天低价</div>
</li>
<li class="top3"><img src="images/back.JPG" width="24" height="24" alt="" class="left"/><img src="images/go.JPG" width="24" height="24" alt="" class="right"/></li>
</ul>
</div>
<div id="middle">
<ul>
<li class="back"><img src="images/back.JPG" width="24" height="24" class="imgleft"/></li>
<li class="imgs">
<div><img src="images/middle1.JPG" width="442" height="138" /></div>
<div><img src="images/middle2.JPG" width="442" height="138" /></div>
<div><img src="images/middle3.JPG" width="442" height="138" /></div>
</li>
<li class="go"><img src="images/go.JPG" width="24" height="24" class="imgright"/></li>
</ul>
</div>
<div id="bottom">
<ul>
<li><img src="images/bottom1.JPG" width="68" height="43" /></li>
<li><img src="images/bottom2.JPG" width="68" height="43" /></li>
<li><img src="images/bottom3.JPG" width="68" height="43" /></li>
<li><img src="images/bottom4.JPG" width="68" height="43" /></li>
<li><img src="images/bottom5.JPG" width="68" height="43" /></li>
<li><img src="images/bottom6.JPG" width="68" height="43" /></li>
</ul>
</div>
</div>
</body>
这里:css样式:
@charset "utf-8";
/* CSS Document */
* {
list-style-type:none;
font-size:12px;
margin:0;
padding:0;
}
img {
border-left-width:0;
border-right-width:0;
border-top-width:0;
border-bottom-width:0;
}
ul li {
float:left;
}
#content{
height: 250px;
width: 495px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#content #bottom{
height: 42px;
}
#content #top {
height: 24px;
line-height: 24px;
}
#top ul .top1 {
width: 260px;
}
/* 默认 */
.a_link {
color: #000;
text-decoration: none;
}
/* 鼠标放上时 */
.a_over {
color: #ff7300;
text-decoration: underline;
}
#top ul .top2 {
height: 24px;
overflow: hidden;
width: 180px;
text-align: right;
}
#top ul .top3 {
float: right;
height: 24px;
width: 48px;
}
#content #middle {
height: 140px;
border: 1px solid #CCC;
}
.imgs {
overflow: hidden;
height: 138px;
width: 442px;
}
#middle ul .back {
height: 100%;
width: 24px;
padding-top: 50px;
text-align: center;
}
#middle ul .go {
height: 100%;
width: 24px;
padding-top: 50px;
}
#content #bottom {
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
padding-left: 40px;
height: 45px;
}
JQuery的关键代码:
<script>
$(function(){
//天猫颜色改变
$("#tianmao").hover(function(){
$(this).removeClass().addClass("a_over");
},function(){
$(this).removeClass().addClass("a_link");
});
autoleft();
clickleft1();
clickright1();
automiddle();
clickmleft1();
clickmright1();
$("#bottom ul li").click(function() {
switch($(this).index()){
case 0:
location="www.0.com";
break;
case 1:
location="www.1.com";
break;
case 2:
location="www.2.com";
break;
case 3:
location="www.3.com";
break;
case 4:
location="www.4.com";
break;
case 5 :
location="www.5.com";
break;
}
});
});
//左上角广告自动播放
function autoleft(){
var scrtime;
var i=0;
$(".top2").hover(function(){
clearInterval(scrtime);//停止滚动
},function(){
scrtime = setInterval(function(){
if(i>2){i=0;}
var ul = $(".top2 div");
ul.eq(i).show().siblings().hide();
i++;
},3000);
}).trigger("mouseleave");
}
//选中左上角<时图片显示
function clickleft1(){
var i=2;
$(".top3 .left").click(function(){
if(i<0){i=2;}
var ul = $(".top2 div");
ul.eq(i).show().siblings().hide();
i--;
})
}
//选中右上角>时图片显示
function clickright1(){
var i=0;
$(".top3 .right").click(function(){
if(i>2){i=0;}
var ul = $(".top2 div");
ul.eq(i).show().siblings().hide();
i++;
})
}
//中间广告自动播放
function automiddle(){
var scrtime;
var i=0;
$(".imgs").hover(function(){
clearInterval(scrtime);//停止滚动
},function(){
scrtime = setInterval(function(){
if(i>2){i=0;}
var ul = $(".imgs div");
ul.eq(i).show().siblings().hide();
i++;
},3000);
}).trigger("mouseleave");
}
//选中中间<时图片显示
function clickmleft1(){
var i=2;
$(".back ").click(function(){
if(i<0){i=2;}
var ul = $(".imgs div");
ul.eq(i).show().siblings().hide();
i--;
})
}
//选中中间角>时图片显示
function clickmright1(){
var i=0;
$(".go").click(function(){
if(i>2){i=0;}
var ul = $(".imgs div");
ul.eq(i).show().siblings().hide();
i++;
})
}
</script>
另外自动切换的另外一种代码:
setInterval(function () {
var indexs;
var div = $(".imgs div").map(function (i, v) {
if ($(v).css("display") == "block")
indexs = i;
return v;
})
var values = $(div.get(0));
indexs++;
if (indexs > 2)
indexs = 0;
$(".imgs div").each(function (i, v) {
if (indexs == i)
$(v).css("display", "block");
else
$(v).css("display", "none");
})
}, 3000);