JQuery【图片轮播1】

最新推荐文章于 2022-12-15 10:37:43 发布

一直在冬眠

最新推荐文章于 2022-12-15 10:37:43 发布

阅读量562

点赞数

分类专栏： JavaScript/JQuery 文章标签： jquery function list border div html

本文链接：https://blog.csdn.net/wjr_loves/article/details/7865054

版权

JavaScript/JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="image/jquery-1.4.2.min.js"></script>
<title>用jQuery做的图片轮播</title>
<script type="text/javascript">
var t = n = 0, count;
$(document).ready(function(){
  count=$("#banner_list a").length;
  $("#banner_list a:not(:first-child)").hide();
  $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
  $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
  $("#banner li").click(function() {
   var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
   n = i;
   if (i >= count)
    return;
   $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
   $("#banner_info").unbind().click(function(){
    window.open($("#banner_list a").eq(i).attr('href'), "_blank")});
    $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
    $(this).css({"background":"#be2424",'color':'#000'}).siblings().css({"background":"#6f4f67",'color':'#fff'});
    });
    t = setInterval("showAuto()", 4000);
    $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
});
function showAuto(){
  n = n >=(count - 1) ? 0 : ++n;
  $("#banner li").eq(n).trigger('click');
}
</script>
<style type="text/css">
#banner {
position:relative;
width:346px;
height:191px;
border:1px solid #666;
overflow:hidden;}
#banner_list img {
border:0px;}
#banner_bg {
position:absolute;
bottom:0;
background-color:#000;
height:30px;
filter: Alpha(Opacity=30);
opacity:0.3;
z-index:1000;
cursor:pointer;
width:346px; }
#banner_info{
position:absolute;
bottom:0;
left:5px;
height:22px;
color:#fff;
z-index:1001;
cursor:pointer}
#banner_text {
position:absolute;
width:120px;
z-index:1002;
right:3px;
bottom:3px;}
#banner ul {
position:absolute;
list-style-type:none;
filter: Alpha(Opacity=80);
opacity:0.8;
border:1px solid #fff;
z-index:1002;
margin:0;
padding:0;
bottom:3px;
right:5px;}
#banner ul li {
padding:0px 8px;
float:left;
display:block;
color:#FFF;
border:#e5eaff 1px solid;
background-color:#6f4f67;
cursor:pointer}
#banner_list a{
position:absolute;}
</style>

</head>

<body>

一直在冬眠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery【图片轮播1】

http://www.w3.org/1999/xhtml"> 用jQuery做的图片轮播 var t = n = 0, count; $(document).ready(function(){ count=$("#banner_list a").length; $("#banner_list a:n
复制链接

扫一扫