Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
无标题文档 // source http://jsbin.com/womipu/1
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
body,html,ul,li{ margin:0; padding:0; list-style:none;}
.area .list{ height:501px; overflow:hidden;}
.area .list li{ height:400px; position:relative; text-align:center; display:none;}
.triggers{ top:0px; position:absolute; right:0; z-index:10;}
.area .triggers a{ background:none repeat scroll 0 0 #09F; color:#000000; cursor:pointer; display:inline-block; font-size:12px; height:3px; line-height:20px; margin-right:1px; opacity:0.8; outline:medium none; text-align:center; text-decoration:none; width:115px;}
.area .triggers a.curr{ background:none repeat scroll 0 0 #000; color:#fff; opacity:0.7; text-decoration:none;}
.area{ height:501px; margin:0; width:1056px; overflow:hidden; position:relative;}/*new_actHei这个是什么*/
.area img{width:100%}
</style>
</head>
<body>
<div class="area">
<div class="list">
<ul>
<li style="display:block"><a href="#" target="_blank"><img src="images/5.jpg"></a></li>
<li><a href="#" target="_blank"><img src="images/1.jpg"></a></li>
<li><a href="#" target="_blank"><img src="images/2.jpg"></a></li>
<li><a href="#" target="_blank"><img src="images/3.jpg"></a></li>
<li><a href="#" target="_blank"><img src="images/4.jpg"></a></li>
</ul>
<div class="triggers nums banner-index">
<a href="#" hidefocus="true" class="curr" target="_blank" title="1" ></a>
<a href="#" hidefocus="true" target="_blank" title="2"></a>
<a href="#" hidefocus="true" target="_blank" title="3"></a>
<a href="#" hidefocus="true" target="_blank" title="4"></a>
<a href="#" hidefocus="true" target="_blank" title="5"></a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.area').each(function () {
slideTo(this);
});
function slideTo(list) {
var adTimer;
var index = 0;
var len = $(list).find('.banner-index').find("a").length-1;
$(list).find('.banner-index a').mouseover(function () {
index = $(this).index();
showPic(list,index);//调用函数
});
$(list).find('.list').hover(function () {
clearInterval(adTimer);
},
function () {
adTimer = setInterval(function () {
if (index == len){
index = 0;
}else
{
index++;
}
showPic(list,index);
}, 6000);
}).trigger("mouseleave");
function showPic(list,index) {
$(list).find('.list li').stop(true, true).hide().eq(index).fadeIn('slow');
$(list).find('.banner-index a').removeClass('curr').eq(index).addClass('curr');
};
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.min.js"><\/script>
<style type="text/css">
body,html,ul,li{ margin:0; padding:0; list-style:none;}
.area .list{ height:501px; overflow:hidden;}
.area .list li{ height:400px; position:relative; text-align:center; display:none;}
.triggers{ top:0px; position:absolute; right:0; z-index:10;}
.area .triggers a{ background:none repeat scroll 0 0 #09F; color:#000000; cursor:pointer; display:inline-block; font-size:12px; height:3px; line-height:20px; margin-right:1px; opacity:0.8; outline:medium none; text-align:center; text-decoration:none; width:115px;}
.area .triggers a.curr{ background:none repeat scroll 0 0 #000; color:#fff; opacity:0.7; text-decoration:none;}
.area{ height:501px; margin:0; width:1056px; overflow:hidden; position:relative;}/*new_actHei这个是什么*/
.area img{width:100%}
</style>
</head>
<body>
<div class="area">
<div class="list">
<ul>
<li style="display:block"><a href="#" target="_blank"><img src="images/5.jpg"></a></li>
<li><a href="#" target="_blank"><img src="images/1.jpg"></a></li>
<li><a href="#" target="_blank"><img src="images/2.jpg"></a></li>
<li><a href="#" target="_blank"><img src="images/3.jpg"></a></li>
<li><a href="#" target="_blank"><img src="images/4.jpg"></a></li>
</ul>
<div class="triggers nums banner-index">
<a href="#" hidefocus="true" class="curr" target="_blank" title="1" ></a>
<a href="#" hidefocus="true" target="_blank" title="2"></a>
<a href="#" hidefocus="true" target="_blank" title="3"></a>
<a href="#" hidefocus="true" target="_blank" title="4"></a>
<a href="#" hidefocus="true" target="_blank" title="5"></a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.area').each(function () {
slideTo(this);
});
function slideTo(list) {
var adTimer;
var index = 0;
var len = $(list).find('.banner-index').find("a").length-1;
$(list).find('.banner-index a').mouseover(function () {
index = $(this).index();
showPic(list,index);//调用函数
});
$(list).find('.list').hover(function () {
clearInterval(adTimer);
},
function () {
adTimer = setInterval(function () {
if (index == len){
index = 0;
}else
{
index++;
}
showPic(list,index);
}, 6000);
}).trigger("mouseleave");
function showPic(list,index) {
$(list).find('.list li').stop(true, true).hide().eq(index).fadeIn('slow');
$(list).find('.banner-index a').removeClass('curr').eq(index).addClass('curr');
};
}
});
<\/script>
</body>
</html>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.