溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
周末閑暇時，參照http://www.cnblogs.com/babyzone2004/archive/2010/08/30/1812682.html實現了個jquery圖片輪播特效
界面效果：
css實現：
*{
margin: 0;
}
div{
position:relative;
width:600px;
height:400px;
border:1px #000 solid;
overflow:hidden;
margin:auto;
}
div ul{
list-style-type:none;
position:absolute;
bottom:0;
z-index:11;
right:25px;
filter: Alpha(Opacity=80);opacity:0.8;
}
div ul li{
width:30px;
line-height:30px;
border-left: 0;
border-top:1px #FFF solid;
border-right:1px #FFF solid;
border-bottom:1px #FFF solid;
text-align:center;
vertical-align:middle;
float:left;
background-color:#0ABB6A;
cursor:pointer;
font-size:15px;
font-weight:600;
color:#FFF;
}
.list{
background-color:#AF0348;
color:#000;
}
ul li:first-child{
border-left:1px #FFF solid;
}
a{
position:fixed;
}
#banner_bg{
width:600px;
height:30px;
background-color:#000;
position:absolute;
z-index:10;
filter: Alpha(Opacity=40);opacity:0.4;
bottom:0;
}js代碼實現：
var n = 0,i = 0, count = 0;var timeout = 2000;var nid;
$(function(){
$("div > div a").not(":first-child").hide();
$("div > ul li").eq(0).addClass("list");
count = $("div > ul li").length;
var index = 0;
$("div > ul li").hover(function(){
index = $(this).index();
$(this).addClass("list");
$(this).parent().children().not(":eq("+ index +")").removeClass("list"); },
function(){
$(this).removeClass("list");
$(this).parent().children().eq(n).addClass("list");
});
$("div > ul li").click(function(){
i = $(this).text() - 1;
n = i;
$("div > div a ").eq(i).fadeIn(1500);
$(this).addClass("list");
$(this).parent().children().not(":eq(" + i + ")").removeClass("list");
$("div > div a").not(":eq(" + i + ")").fadeOut(1500); });
clearInterval(nid);
nid = setInterval(function(){
Change();
},timeout);
$("div *").hover(function(){
clearInterval(nid);
},function(){
clearInterval(nid);
nid = setInterval(function(){
Change();
},timeout);
});
});function Change(){
n = n >= count ? 0 : ++ n;
$("#banner > ul li").eq(n).trigger("click");
}
html實現：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>-jquery 圖片輪換-</title>
<link type="text/css" rel="stylesheet" href="css/basic.css"/>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
</head>
<body>
<div id = "banner">
<div id="banner_bg"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>
<a target="_blank"><img src="p_w_picpaths/list_02.jpg" alt="圖片輪播" title="圖片輪播"/></a>
<a target="_blank"><img src="p_w_picpaths/list_03.jpg" alt="圖片輪播" title="圖片輪播"/></a>
<a target="_blank"><img src="p_w_picpaths/list_04.jpg" alt="圖片輪播" title="圖片輪播"/></a>
<a target="_blank"><img src="p_w_picpaths/list_05.jpg" alt="圖片輪播" title="圖片輪播"/></a>
<a target="_blank"><img src="p_w_picpaths/list_06.jpg" alt="圖片輪播" title="圖片輪播"/></a>
</div>
</div>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
