demo01.html

手動滾動圖片

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;}

$(document).ready(function(){

$.imgfocus({

objId:"scrollDiv",

showTitle: true,

height:210,

width:280,

speed: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("background");

$(this).css({

"background": "#CC0"

});

}).mouseleave(function() {

$(this).css({

"background": bgColor

});

});

// 數字塊點擊事件

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

// 數字標簽全部變灰色

$(".imgfocus_banner_squ").css({

"background": "#CCC"

});

// 活動的數字標簽變紅色

$("#imgfocus_banner_squ" + index).css({

"background": "#C00"

});

bgColor = "background:#C00";

changeTitle();

});

});

});

// 數字塊樣式

$(".imgfocus_banner_squ").css({

"display": "block",

"float": "left",

"margin": "1px",

"width": "18px",

"height": "18px",

"color": "#000",

"background": "#CCC"

});

// 第一個數字塊樣式

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

// 數字標簽全部變灰色

$(".imgfocus_banner_squ").css({

"background": "#CCC"

});

// 活動的數字標簽變紅色

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

/**

* 最先執行的函數

* 鼠標滑上焦點圖時停止自動播放，滑出時開始自動播放

*/

// 初始化標題

changeTitle();

$("#" + opts.objId).hover(function() {

clearInterval(opts.picTimer);

},

function() {

opts.picTimer = setInterval(function() {

scrollLeft();

},

opts.interval); // 自動播放的間隔，單位：毫秒

}).trigger("mouseleave");

}

});

總結

以上是生活随笔為你收集整理的html焦点图自动播放纯代码,jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。