html焦点图自动播放纯代码,jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)...
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("
");
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焦点图片切换(数字标注/手动/自动播放/横向滚动)...相关推荐
- jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- html 折叠焦点图切换,jQuery层叠式图片切换焦点图插件
本文作者html5tricks,转载请注明出处 之前我们为大家分享过一款jQuery内容层叠滚动切换动画插件,主要是针对文字的层叠式切换.今天要介绍的也是一款层叠式切换插件,不过它是一款 下面我们一起 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- 3种风吹图片jquery堆叠图片切换效果插件
dreamweaver免费视频教程: http://www.51rgb.com/mproductzh.aspx?classid=31 加讨论群390180913 入群即可参加周一至周五免费公开课并获得 ...
- b站黑马的Vue快速入门案例代码——图片切换(类似手动播放的轮播图)
目录 目标效果: 重点原理: 1.用数组储存图片的数据 2.v-bind指令可以设置元素属性 e.g.src 语法 v-bind:属性名=表达式 简写[实际开发常用] :属性名=表达式 3.v ...
- html焦点图自动轮播,JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 ...
- Vuetify Carouse轮播图 图片切换导致页面总是自动跳转到轮播图位置
文章目录 begin !!! Solution1 Solution2 end begin vuetify carouse轮播图 的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个 ...
- Qt安装后要做的第一件事------Qt自动补全代码快捷键和输入法切换快捷键 的冲突解决 (附:fedora下查询 删除软件命令)...
遥想当年初接触qt,只要能要就心满意足了.随着不断学习,发现了越来越多的问题.在linux环境下,qt自动补全代码的快捷键是ctrl+space,而输入法的切换启动快捷键也是如此,这就冲突了!导致qt ...
- html如何实现图片轮流播放,纯css如何实现图片轮播
纯css如何实现图片轮播 发布时间:2020-07-29 10:23:33 来源:亿速云 阅读:119 作者:Leah 纯css如何实现图片轮播?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希 ...
最新文章
- MNIST数据库介绍及转换
- AI产业链全景图!【物联网智商精选】
- Docker Desktop添加对Kubernetes的支持
- 数据库中死锁那些事儿
- Windows 命名管道 + 异步I/O模型
- GitHub 标星 7000+,面试官的灵魂 50 问,问到你怀疑人生!
- 每日程序C语言3-三个数大小排序
- elasticsearch 查看索引_ElasticSearch 索引基本操作
- 第41课 蜗牛与葡萄树 《小学生C++趣味编程》
- 实现文件中名词的统计计数_Python中的统计数据展示
- 验1-8 输出倒三角图案 (5 分)
- 设计模式(十)外观模式
- 目标跟踪学习笔记_2(particle filter初探1)
- 计算机硬盘怎么优化,硬盘怎么优化_机械硬盘优化
- 记录 Kindle Fire HDX 7 安装 Google Play 服务过程
- 一个商人应遵守的22条规矩
- 2020暨南大学计算机专硕考研经验分享
- Linux系统用户详细介绍
- 阿里旅行 门票基础保障内容
- krpano php,krpano调试模式的开启
热门文章
- python教材目录_Python实用教程/高等院校信息技术规划教材简介,目录书摘
- Java内存模型、volatile、原子性、可见性、有序性、happens-before原则
- yii2 请求外部api_[PHP] 基于redis的分布式锁防止高并发重复请求
- 人工智能实现a*算法解决八数码_小白带你学回溯算法
- Qt / Moc 和信号 - 槽解析
- libevent 1.4.13 / 源代码文件组织
- 乐鑫代理启明云端分享| ESP32系列教程之五: Eclipse搭建esp-idf环境
- matlab 低秩矩阵分解,低秩分解的matlab代码看不懂,分解的两个矩阵在哪呀??...
- Android NDK 学习汇总
- 语言生日创意代码_你生日那天的宇宙什么样子知道?我全部给你吧!