web前端輪播器特效(顯示與隱藏效果)

時間 2019-11-20

標籤 web 前端特效顯示隱藏效果欄目 HTML 简体版

原文原文鏈接

html代碼
<!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="banner/jquery.min.js" ></script>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
ul,li{list-style-type:none;}
#banner {height: 280px;width: 800px;margin:0px auto;position:relative;}
#banner  img{position:absolute;}
#banner ul,#banner span{top:250px;position:absolute; height:30px; line-height:30px;}
#banner ul{left:400px;}
#banner ul li{float:left; padding:0px 4px; cursor:pointer; color:#666;}
#banner ul li.checked{ /*color:#00F;*/}
#banner span{ background-color:#ccc;opacity:0.3; width:775px; padding-left:25px;}
</style>
</head>
<body>
<div id="banner">
<img src="banner/img/01.jpg" width="800" height="280"  alt="111"/>
<img src="banner/img/02.jpg" width="800" height="280"  alt="222"/>
<img src="banner/img/03.jpg" width="800" height="280"  alt="333"/>
<span></span>
<ul>
  <li >⊙</li>
  <li>⊙</li>
  <li>⊙</li>
</ul>
</div>
</body>
</html>

js代碼
<script>
$(function(){
    //輪播器初始化
    $("#banner img").css("display","none");
    $("#banner img").first().css("display","block");
    $("#banner li").first().css("color","#00F");
    $("#banner span").text($("#banner img").first().attr("alt"));
    var index=1;
    
    //自動輪播
    var time=setInterval(banner_fn,1000);
    //鼠標移動事件
    $("#banner li").hover(function(){
        clearTimeout(time);
        banner($(this));
    },function(){
        var index=$(this).index()+1;
        time=setInterval(banner_fn,1000);
    })
    function banner_fn(){
        if(index>=$("#banner li").length) index=0;
         banner($("#banner li").eq(index).first());
        index++;
    }
    function banner(obj){
        $("#banner li").css("color","#666");
        $("#banner li").eq($(obj).index()).css("color","#00F");
        $("#banner img").css("display","none");
        $("#banner img").eq($(obj).index()).css("display","block");
        $("#banner span").text($("#banner img").eq($(obj).index()).attr("alt"));    
    }    
});
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。