熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jquery仿QQ商城帶左右按鈕控制焦點圖片切換滾動效果

2013-11-15 12:06:30  來源: JSP教程 
jquery圖片特效制作仿騰訊QQ商城首頁banner焦點圖片輪播切換效果帶索引按鈕控制和左右按鈕控制圖片切換實例代碼如下感興趣的朋友可以參考下哈   復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>jquery圖片滾動仿QQ商城帶左右按鈕控制焦點圖片切換滾動</title>
<meta name="description" content="jquery圖片特效制作仿騰訊QQ商城首頁banner焦點圖片輪播切換效果帶索引按鈕控制和左右按鈕控制圖片切換" />
<style type="text/css">
*{margin:;padding:;}
body{fontsize:px;color:#;fontfamily:VerdanaArialHelveticasansserif;background:#fff;}
clearfix:after{content: "";display: block;height: ;clear: both;visibility: hidden;}
clearfix{zoom:;}
ulli{liststyle:none;}
img{border:;}
wrapper{width:px;margin: auto;paddingbottom:px;}
h{height:px;lineheight:px;fontsize:px;fontweight:normal;fontfamily:"Microsoft YaHei"SimHei;marginbottom:px;}
/* focus */
#focus{width:px;height:px;overflow:hidden;position:relative;}
#focus ul{height:px;position:absolute;}
#focus ul li{float:left;width:px;height:px;overflow:hidden;position:relative;background:#;}
#focus ul li div{position:absolute;overflow:hidden;}
#focus btnBg{position:absolute;width:px;height:px;left:;bottom:;background:#;}
#focus btn{position:absolute;width:px;height:px;padding:px px;right:;bottom:;textalign:right;}
#focus btn span{display:inlineblock;_display:inline;_zoom:;width:px;height:px;_fontsize:;marginleft:px;cursor:pointer;background:#fff;}
#focus btn spanon{background:#fff;}
#focus preNext{width:px;height:px;position:absolute;top:px;background:url(img/spritepng) norepeat ;cursor:pointer;}
#focus pre{left:;}
#focus next{right:;backgroundposition:right top;}
</style>
<script type="text/javascript" src="
<script type="text/javascript">
$(function() {
var sWidth = $("#focus")width(); //獲取焦點圖的寬度(顯示面積)
var len = $("#focus ul li")length; //獲取焦點圖個數
var index = ;
var picTimer;

//以下代碼添加數字按鈕和按鈕後的半透明條還有上一頁下一頁兩個按鈕
var btn = "<div class=btnBg></div><div class=btn>";
for(var i=; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class=preNext pre></div><div class=preNext next></div>";
$("#focus")append(btn);
$("#focus btnBg")css("opacity");
//為小按鈕添加鼠標滑入事件以顯示相應的內容
$("#focus btn span")css("opacity")mouseover(function() {
index = $("#focus btn span")index(this);
showPics(index);
})eq()trigger("mouseover");
//上一頁下一頁按鈕透明度處理
$("#focus preNext")css("opacity")hover(function() {
$(this)stop(truefalse)animate({"opacity":""});
}function() {
$(this)stop(truefalse)animate({"opacity":""});
});
//上一頁按鈕
$("#focus pre")click(function() {
index = ;
if(index == ) {index = len ;}
showPics(index);
});
//下一頁按鈕
$("#focus next")click(function() {
index += ;
if(index == len) {index = ;}
showPics(index);
});
//本例為左右滾動即所有li元素都是在同一排向左浮動所以這裡需要計算出外圍ul元素的寬度
$("#focus ul")css("width"sWidth * (len));

//鼠標滑上焦點圖時停止自動播放滑出時開始自動播放
$("#focus")hover(function() {
clearInterval(picTimer);
}function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = ;}
}); //此代表自動播放的間隔單位毫秒
})trigger("mouseleave");

//顯示圖片函數根據接收的index值顯示相應的內容
function showPics(index) { //普通切換
var nowLeft = index*sWidth; //根據index值計算ul元素的left值
$("#focus ul")stop(truefalse)animate({"left":nowLeft}); //通過animate()調整ul元素滾動到計算出的position

$("#focus btn span")stop(truefalse)animate({"opacity":""})eq(index)stop(truefalse)animate({"opacity":""}); //為當前的按鈕切換到選中的效果
}
});
</script>
</head>
<body>
<div class="wrapper">
<h>jquery圖片滾動仿QQ商城帶左右按鈕控制焦點圖片切換滾動</h>

<div id="focus">
<ul>
<li><a href="商城焦點圖效果下載" /></a></li>
<li><a href="商城焦點圖效果教程" /></a></li>
<li><a href="商城焦點圖效果" /></a></li>
<li><a href="商城焦點圖代碼" /></a></li>
<li><a href="商城焦點圖源碼" /></a></li>
</ul>
</div><!focus end>

</div><! wrapper end >
</body>
</html>

  
效果圖如下


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20300.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.