支付宝轮播

最新推荐文章于 2024-08-15 08:55:57 发布

weixin_30660027

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量137

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nifengs/p/4605311.html

版权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#flash{width:100%;height:400px;position:relative;}
#flash .Con{width:100%;height:400px;position:relative;}
#flash .Con .box{width:100%;height:400px;position:absolute;left:0px;top:0px;}
#flash ul.button{width:100px;height:30px;position:absolute;left:49%;bottom:0;z-index:10000;}
#flash ul.button li{width:13px;height:13px;list-style:none;float:left;margin:0 5px;background:url("img/dot.png") -13px 0px;}
#flash ul.button li.hover{background:url("img/dot.png") 0px 0px;}
</style>
</head>
<body>
<div id="flash">
<div class="Con">
<div class="box" style="background:url('img/img1.jpg') center; z-index:1000;"></div>
<div class="box" style="background:url('img/img2.jpg') center"></div>
<div class="box" style="background:url('img/img3.jpg') center"></div>
<div class="box" style="background:url('img/img4.jpg') center"></div>
</div>
<ul class="button">
<li class="hover"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var _index=0;
var setTime=null;
$("ul.button li").mouseover(function(){
clearInterval(setTime);//清除定时器
$(this).addClass("hover").siblings("li").removeClass("hover");//添加hover;
_index=$(this).index();//获取当前序列号
//alert(_index);
$(".Con .box").eq(_index).fadeIn().siblings(".box").fadeOut();//show() hide()
});
$("ul.button li").mouseout(function(){
autoPlay();
});

function autoPlay(){

setTime=setInterval(function(){
//alert("我是定时器");

_index++;//_index+1;
if(_index>3){_index=0;}
$("ul.button li").eq(_index).addClass("hover").siblings("li").removeClass("hover");
$(".Con .box").eq(_index).fadeIn().siblings(".box").fadeOut();
},2000);

}
autoPlay();
</script>
</body>
</html>

转载于:https://www.cnblogs.com/nifengs/p/4605311.html

weixin_30660027

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
支付宝轮播

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Ke...
复制链接

扫一扫