jquery焦點圖片切換(數位標註/手動/自動播放/橫向滾動)_jquery

demo01.html

複製程式碼碼

>


ul,li{margin:0;padding:0}
img{邊框:0px;}
#container{padding:40px;}
#showArea img{width:700px;}
a{text-decoration:none;border:0px;}
# scrollDiv{border:#ccc 1pxsolid;}
#scrollDiv li{background:#A83;}




$(document).ready(function(){

$.imgfocus({
objId:"scrollDiv",
showTitle: true,
高度:210 ,
寬度：280，
速度：1000
})
});
腳本>
頭>

;

• ;


• ;


• ;


• ;


• ;


• ;

身體>



imgfocus-0.1.0.js

複製代碼程式碼如下：

/**
* 手动滚动图片
*
**/
$.extend({
imgfocus: function(opt, callback) {
//alert("suc");
this.defaults = {
// 滚动区域id
objId: "",
// 是否在大图下方显示标题
showTitle: false,
// 每行的宽度
width: 300,
// div的高度
height: 100,
// 每次滚动的行数
line: 1,
// 自动滚动的行数
autoLine: 1,
// 动作时间
speed: 0,
// 滚动间隔
interval: 3000,
// 图片根目录
imgPath: "",
// 间隔句柄，不需要设置，只是作为标识使用
picTimer: 0,
// 按钮透明度
opacity: 0.3
};
//参数初始化
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("

");
$("#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("

");
$("#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("

" + (index + 1) + "

");
var bgColor;
$("#imgfocus_banner_squ" index).mouseover(function() {
bgColor = $(this).css("背景");
$( this).css({
"背景": "#CC0"
});.mouseleave(function() {
$(this).css({
"背景": bgColor
});
}); //數字區塊點擊事件
$("#imgfocus_banner_squ" index).click(function() {

var length = $(" #" opts .objId " ul li[index=" index "]").prevAll().size()
varscrollWidth = 0 - 長度* opts.width - (0 - $( "#" opts.objId) .find( "ul:first").css("margin-left").replace("px", ""));
$("#" opts.objId). ).animate({
marginLeft: scrollWidth
},
6,
function() {
for (i = 1; 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");
//數字標籤全部變成灰色
$(".imgfocus_banner_squ").css({
"background" : "#CCC"
})
//活動的數字標籤變成紅色
$("#imgfocus_banner_squ" index).css({
"background": "#C00"
});
bgColor = "背景:#C00";
changeTitle();
});
});
});
// 數字塊樣式
$(".imgfocus_banner_squ").css({
"display": "block",
"float": "left",
"margin" : "1px",
"寬度": "18px",
"高度": "18px",
"顏色": "#000",
""背景: "#CCC"
});
// 第一個數字區塊樣式
$(".imgfocus_banner_squ:first").css({
"background": "#C00"
});
}
/**
* 自動橫向捲動
*/
functionscrollLeft() {
varscrollWidth = 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.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();標籤全部變成灰色
$(".imgfocus_banner_squ").css({
"background": "#CCC"
})
//活動的數字標籤變紅
$ ("#imgfocus_banner_squ"index).css({
"背景": "#C00"
});
}；
/**
* 切換標題
*/
function changeTitle(){
$("#imgfocus_banner_title").text($("#" opts.objId).find(" li:first img:首先").attr("alt"));
}
/**
* 滑鼠滑上後顯示按鈕
*/
$("#" opts.objId).hover(function() {
$("#button_left").css({
不透明度: 1
})
$("#button_right").css({
不透明度: 1
})
},
function() {
$("#button_left").css({
opacity: opts.opacity
});
$("#button_right").css({
opacity: opts.opacity
});
}).trigger("mouseleave");
/**
* 最先執行的函數
* 滑鼠滑上焦點圖時停止自動播放，滑出時開始自動播放
*/
//初始化標題
changeTitle();
$("#" opts.objId).hover(function() {
clearInterval(opts.picTimer);
},
function() {
opts.picTimer = setInterval( function() {
scrollLeft()
},
opts.interval); // 自動播放的間隔，單位：幾十
}).trigger("mouseleave");
}
});

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用JavaScript動態設定樣式實現程式碼及示範動畫_javascript技巧下一篇：使用JavaScript動態設定樣式實現程式碼及示範動畫_javascript技巧

相關文章

看更多

• 深入淺析Bootstrap列表組元件
• JavaScript函數柯里化詳解
• JS密碼產生與強度偵測完整實例(附demo源碼下載)
• Angularjs整合微信UI（weui）
• JavaScript快速切換繁體中文和簡體中文的方法及網站支援簡繁體切換的絕招_javascript技巧