jquery焦點圖片切換(數(shù)字標注/手動/自動播放/橫向滾動)
更新時間：2013年01月24日 11:28:25 作者：
焦點圖片切換在網(wǎng)頁制作的商品展示中經(jīng)常會用到，這樣的效果可以給用戶帶來耳目一新的感覺同時也是用戶比較追捧的，本文也實現(xiàn)了一個這樣的焦點圖片切換效果,感興趣的你可以參考下啊，希望本文對你有所幫助
demo01.html
復(fù)制代碼 代碼如下:
<!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>
<style type="text/css">
ul,li{margin:0;padding:0}
img{border:0px;}
#container{padding:40px;}
#showArea img{width:700px;}
a{text-decoration:none;border:0px;}
#scrollDiv{border:#ccc 1px solid;}
#scrollDiv li{background:#A83;}
</style>
<script src="../jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="imgfocus-0.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.imgfocus({
objId:"scrollDiv",
showTitle: true,
height:210,
width:280,
speed:1000
});
});
</script>
</head>
<body>
<div id="container">
<div id="scrollDiv">
<ul>
<li><a href="#"><img src="images/1.jpg" alt="images/1.jpg" width="280"/></a></li>
<li><a href="#"><img src="images/2.jpg" alt="images/2.jpg" width="280"/></a></li>
<li><a href="#"><img src="images/3.jpg" alt="images/3.jpg" width="280"/></a></li>
<li><a href="#"><img src="images/4.jpg" alt="images/4.jpg" width="280"/></a></li>
<li><a href="#"><img src="images/5.jpg" alt="images/5.jpg" width="280"/></a></li>
<li><a href="#"><img src="images/6.jpg" alt="images/6.jpg" width="280"/></a></li>
</ul>
</div>
</div>
</body>
</html>
imgfocus-0.1.0.js
復(fù)制代碼 代碼如下:
/**
* 手動滾動圖片
*
**/
$.extend({
imgfocus: function(opt, callback) {
//alert("suc");
this.defaults = {
// 滾動區(qū)域id
objId: "",
// 是否在大圖下方顯示標題
showTitle: false,
// 每行的寬度
width: 300,
// div的高度
height: 100,
// 每次滾動的行數(shù)
line: 1,
// 自動滾動的行數(shù)
autoLine: 1,
// 動作時間
speed: 0,
// 滾動間隔
interval: 3000,
// 圖片根目錄
imgPath: "",
// 間隔句柄，不需要設(shè)置，只是作為標識使用
picTimer: 0,
// 按鈕透明度
opacity: 0.3
};
//參數(shù)初始化
var opts = $.extend(this.defaults, opt);
// 定義外層元素樣式
$("#" + opts.objId).css({
"position": "relative",
"overflow": "hidden",
"width": (opts.line * opts.width) + "px"
});
// 定義ul樣式
$("#" + opts.objId + " ul").css({
"width": opts.width * $("#" + opts.objId + " ul").find("li").size() + "px",
"height": opts.height + "px"
});
// 定義li樣式
$("#" + opts.objId + " ul li").css({
"display": "block",
"float": "left",
"width": opts.width + "px",
"height": opts.height + "px"
});
// 定義img樣式
$("#" + opts.objId + " ul li img:first").css({
"display": "block",
"float": "left",
"width": opts.width + "px",
"height": opts.height + "px"
});
if (opts.showTitle) {
$("#" + opts.objId).append("<div id=\"imgfocus_banner\" />");
$("#imgfocus_banner").css({
"width": opts.width + "px",
"height": "20px",
"background": "#333",
"position": "absolute",
opacity: 0.7,
"text-align": "center",
"color": "#FFF",
"left": "0px",
"top": (opts.height - 20) + "px"
});
$("#imgfocus_banner").html("<div id=\"imgfocus_banner_title\" />");
$("#imgfocus_banner_title").text("text");
$("#imgfocus_banner_title").css({
"display": "block",
"float": "left",
"width": (opts.width - 20 * $("#" + opts.objId + " ul li").size()) + "px",
"height": "20px"
});
$("#" + opts.objId + " ul li").each(function(index) {
$(this).attr("index", index);
$("#imgfocus_banner").append("<div id=\"imgfocus_banner_squ" + index + "\" class=\"imgfocus_banner_squ\" >" + (index + 1) + "</div>");
var bgColor;
$("#imgfocus_banner_squ" + index).mouseover(function() {
bgColor = $(this).css("background");
$(this).css({
"background": "#CC0"
});
}).mouseleave(function() {
$(this).css({
"background": bgColor
});
});
// 數(shù)字塊點擊事件
$("#imgfocus_banner_squ" + index).click(function() {
var length = $("#" + opts.objId + " ul li[index=" + index + "]").prevAll().size();
var scrollWidth = 0 - length * opts.width - (0 - $("#" + opts.objId).find("ul:first").css("margin-left").replace("px", ""));
$("#" + opts.objId).find("ul:first").animate({
marginLeft: scrollWidth
},
6,
function() {
for (i = 1; i <= length; i++) {
$("#" + opts.objId).find("li:first").appendTo($("#" + opts.objId).find("ul:first"));
}
$("#" + opts.objId).find("ul:first").css({
marginLeft: 0
});
var index = $("#" + opts.objId).find("li:first").attr("index");
// 數(shù)字標簽全部變灰色
$(".imgfocus_banner_squ").css({
"background": "#CCC"
});
// 活動的數(shù)字標簽變紅色
$("#imgfocus_banner_squ" + index).css({
"background": "#C00"
});
bgColor = "background:#C00";
changeTitle();
});
});
});
// 數(shù)字塊樣式
$(".imgfocus_banner_squ").css({
"display": "block",
"float": "left",
"margin": "1px",
"width": "18px",
"height": "18px",
"color": "#000",
"background": "#CCC"
});
// 第一個數(shù)字塊樣式
$(".imgfocus_banner_squ:first").css({
"background": "#C00"
});
}
/**
* 自動橫向滾動
*/
function scrollLeft() {
var scrollWidth = 0 - opts.autoLine * opts.width - (0 - $("#" + opts.objId).find("ul:first").css("margin-left").replace("px", ""));
$("#" + opts.objId).find("ul:first").animate({
marginLeft: scrollWidth
},
opts.speed,
function() {
for (i = 1; i <= opts.autoLine; i++) {
$("#" + opts.objId).find("li:first").appendTo($("#" + opts.objId).find("ul:first"));
}
$("#" + opts.objId).find("ul:first").css({
marginLeft: 0
});
var index = $("#" + opts.objId).find("li:first").attr("index");
changeTitle();
// 數(shù)字標簽全部變灰色
$(".imgfocus_banner_squ").css({
"background": "#CCC"
});
// 活動的數(shù)字標簽變紅色
$("#imgfocus_banner_squ" + index).css({
"background": "#C00"
});
});
};
/**
* 切換標題
*/
function changeTitle(){
$("#imgfocus_banner_title").text($("#" + opts.objId).find("li:first img:first").attr("alt"));
}
/**
* 鼠標滑上后顯示按鈕
*/
$("#" + opts.objId).hover(function() {
$("#button_left").css({
opacity: 1
});
$("#button_right").css({
opacity: 1
});
},
function() {
$("#button_left").css({
opacity: opts.opacity
});
$("#button_right").css({
opacity: opts.opacity
});
}).trigger("mouseleave");
/**
* 最先執(zhí)行的函數(shù)
* 鼠標滑上焦點圖時停止自動播放，滑出時開始自動播放
*/
// 初始化標題
changeTitle();
$("#" + opts.objId).hover(function() {
clearInterval(opts.picTimer);
},
function() {
opts.picTimer = setInterval(function() {
scrollLeft();
},
opts.interval); // 自動播放的間隔，單位：毫秒
}).trigger("mouseleave");
}
});
相關(guān)文章
下面小編就為大家?guī)硪黄猨query插入兄弟節(jié)點的操作方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
在JavaScript的jQuery庫中操作AJAX的方法講解
這篇文章主要介紹了在JavaScript的jQuery庫中操作AJAX的方法講解,包括利用jQuery簡化Ajax開發(fā)部分的內(nèi)容,需要的朋友可以參考下2015-08-08
jquery.tagsinput.js實現(xiàn)記錄checkbox勾選的順序
這篇文章主要為大家詳細介紹了jquery.tagsinput.js實現(xiàn)記錄checkbox勾選的順序，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
本文主要介紹jQuery文件上傳控件 Uploadify的用法，原作者做了非常詳細的備注，有需要的朋友可以參考一下。2016-06-06
本篇文章小編將為大家介紹，在jQuery中實現(xiàn)動畫效果的基本操作介紹，需要的朋友可以參考一下2013-04-04
這篇文章主要介紹了jQuery內(nèi)容過濾選擇器用法,實例分析了:contains()、:has()、:empty()、:parent等內(nèi)容過濾選擇器的使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了NodeJS使用jQuery選擇器操作DOM的相關(guān)資料,需要的朋友可以參考下2015-02-02
利用JQuery實現(xiàn)datatables插件的增加和刪除行功能
這篇文章給大家介紹了jquery實現(xiàn)datatables插件的增加和刪除行的功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
這篇文章主要介紹了基于jquery實現(xiàn)的自動補全功能的方法,涉及jQuery操作數(shù)據(jù)實現(xiàn)補全的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery獲取字符串中出現(xiàn)最多的數(shù) 的相關(guān)資料,需要的朋友可以參考下2016-02-02