多图轮换,自动播放,鼠标悬停

效果图:


自动播放,鼠标悬停,按钮鼠标离开时消失,小点可点击


代码如下:

<!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.7.2.js"></script>
<style type="text/css">
*{padding: 0; text-align: center; margin: 0 auto; border: none;}
.right{float: right;}.left{ float: left;} .clear{clear: both;}
h1{ font-size: 25px; color: orange;}
li{list-style: none;}
.show{ width: 300px; height: 300px; overflow: hidden; position: relative; }
.subnav{width: 100%; height: 50px;  border-bottom: 1px solid #ccc; margin-top: 10px;}
.piccontent{width: 100%; height: 217px;position: relative; }
.piclist{position: absolute; left: 0; bottom: 0;}
.piclist ul{ width: 10000px; height: 217px;}
.piclist ul li{float: left; }
.pre,.next{ width: 47px; height: 59px; float: left;}
.pre{ background: url(images/leftbtn.png) no-repeat; position: absolute; left: 0; top: 48%; display: none;}
.next{background: url(images/rightbtn.png) no-repeat; position: absolute; right: 0; top: 48%; display: none;}
.btn{ width: 190px; height: 39px; position: absolute; bottom: -19px; right: -8px;}
.btn span,.btn span.current{width: 12px; height: 10px; float: left;}
.btn span{background: url(images/listdot.png) no-repeat;}
.btn span.current{background: url(images/current.png) no-repeat;}
</style>
</head>
<body>
<div class="show">
<div class="subnav">
<h1 class="left">每日推荐</h1>
</div>
<div class="piccontent clear">
<div class="piclist">
<ul>
<li><img src="images/view2.jpg" width="300" height="213"></li>
<li><img src="images/view3.jpg" width="300" height="213"></li>
<li><img src="images/view1.jpg" width="300" height="213"></li>
<li><img src="images/view4.jpg" width="300" height="213"></li>
<li><img src="images/view4.jpg" width="300" height="213"></li>
<li><img src="images/view4.jpg" width="300" height="213"></li>
</ul>
</div>
<div class="pre"></div>
<div class="next"></div>
<div class="btn">
<span class="current"></span>
<span></span>
<span></span><span></span><span></span><span></span>
</div>
</div>
</div>
<script type="text/javascript">
var i=1;
var page=1;
var $parent=$(".show");
var $content=$(".piccontent");
var $list=$(".piclist");
var width=$content.width();
var len=$content.find("li").length;
var pagecount=Math.ceil(len/i);
$(function(){
//鼠标放上悬停、出现左右标签
var interval=setInterval("rightslid()",500);
$(".show").hover(function(){
$(".pre,.next").css("display","block");
clearInterval(interval);
},function(){
$(".pre,.next").css("display","none");
interval=setInterval("rightslid()",500);
});
//点击按钮
$(".next").click(function(){
rightslid();
});
$(".pre").click(function(){
leftslid();
});
//点击小点
$("span").click(function(){
index=$("span").index(this);
$list.animate({left:"-"+width*index},"slow");
page=index+1;
$parent.find("span").eq((index)).addClass("current").siblings().removeClass("current");
});
})
function rightslid(){
if(!$list.is(":animated")){
if(page==pagecount){
$list.animate({left:"0px"},"fast");
page=1;
}else{
$list.animate({left:"-="+width},"slow");
page++;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
}
}
function leftslid(){
if(!$list.is(":animated")){
if(page==1){
$list.animate({left:"-="+width*(pagecount-1)},"fast");
page=pagecount;
}else{
$list.animate({left:"+="+width},"slow");
page--;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
}
}
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值