轮播图切换圆点html,jQuery插件实现带圆点的焦点图片轮播切换
这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁
#img img{width:100%;height:100%;}
#img #imgcontent{display:none}a{color:blue}
$("#img").hovertreeimg({
"h_circlePosition": "",//left,right,center
"h_width": 768,
"h_height": 66,
"h_borderColor":"silver",
"h_circleWidth": 14
});
jquery.img.js
/*!
* HovertreeImg(jQuery Plugin)
* version: 1.0.0
* Copyright (c) 2016 HoverTree
*/
(function ($) {
$.fn.hovertreeimg = function (options) {
var settings = $.extend({
h_time:"3000",//切换时间
h_borderColor: "transparent",//边框颜色
h_width: "500",//宽度
h_height: "200",//高度
h_circleWidth: "18",//方框边长
h_circleColor:"silver",//圆点颜色
h_currentCircleColor: "red",//当前圆点颜色
h_circlePosition:"right"//圆点位置
}, options);
var h_hovertreeimg = $(this);
if (h_hovertreeimg.length < 1)
return;
h_hovertreeimg.css({
"position": "relative", "border":"solid 1px "+ settings.h_borderColor
, "width": settings.h_width, "height": settings.h_height
, "overflow": "hidden"
})
var h_hovertreeimgcontent = h_hovertreeimg.find(">div#hovertreeimgcontent");
h_hovertreeimgcontent.hide();
var h_hovertreeimgcurrent = h_hovertreeimg.find(">a");
h_hovertreeimgcurrent.wrap("
h_replaceFrame = h_hovertreeimg.find("#replaceframe").css({ "width": "100%", "height": "100%" });
//构造圆点框
$('
var h_hovertreeimgpoint = h_hovertreeimg.find(".hovertreeimgpoint");
h_hovertreeimgcontent.prepend(h_hovertreeimgcurrent.clone(true));//复制到总a集合
var h_hovertreeimgitems = h_hovertreeimgcontent.children();//所有a标签集合
var h_hovertreeimglength = h_hovertreeimgitems.length;//所有轮播项数量
var h_isswitch = true;//是否轮播
var h_circleWidth = parseInt(settings.h_circleWidth);
//加边框与间隔
var h_circleFrameWidth = (h_circleWidth + 4) * h_hovertreeimglength+2;
h_hovertreeimgpoint.css({
"height": (h_circleWidth + 4), "position": "absolute", "bottom": "0px",
"display": "inline-block"
})
//设置圆点位置
switch (settings.h_circlePosition) {
case 'right':
h_hovertreeimgpoint.css({
"right": "0px"
})
break;
case 'left':
h_hovertreeimgpoint.css({
"left": "0px"
})
break;
default:
h_hovertreeimgpoint.css({
"left": "0px",
"right": "0px",
"width": h_circleFrameWidth + "px",
"margin": "0px auto"
})
break;
}
//切换索引
var h_hovertreeimgindex = 1;
if (h_hovertreeimglength < 2)
h_hovertreeimgindex = 0;
//构造圆点
for (var h_i = 0; h_i < h_hovertreeimglength; h_i++) {
h_hovertreeimgpoint.append("
}
h_pointset = h_hovertreeimgpoint.find("div");//圆点集合
h_pointset.css({
"background-color": settings.h_circleColor, "width": settings.h_circleWidth
, "height": settings.h_circleWidth
, "border": "1px solid white"
, "margin-left": "2px",
"display": "inline-block",
"border-radius": "50%"
})
h_pointset.eq(0).css({ "background-color": settings.h_currentCircleColor });
//设置当前图片
function imgswitch(imgindex) {
h_replaceFrame.html(h_hovertreeimgitems.eq(imgindex));
h_pointset.css({ "background-color": settings.h_circleColor });
h_pointset.eq(imgindex).css({ "background-color": settings.h_currentCircleColor });
}
h_replaceFrame.find("img").css({
"width": settings.h_width
, "height": settings.h_height
})
//圆点操作
h_pointset.hover(function () {
h_isswitch = false;//光标悬停到圆点停止切换
imgswitch($(this).attr('hovertreeimgdata'));
}
, function () {
h_isswitch = true;
}
)
//切换
setInterval(function () {
if (!h_isswitch)
return;
imgswitch(h_hovertreeimgindex);
h_hovertreeimgindex = (h_hovertreeimgindex + 1) % h_hovertreeimglength;
}, settings.h_time)
//光标悬停到图片停止切换
h_replaceFrame.hover(function () { h_isswitch = false; }, function () { h_isswitch = true; })
}
}(jQuery));
轮播图切换圆点html,jQuery插件实现带圆点的焦点图片轮播切换相关推荐
- html幻灯片图片轮播w3,支持30+种类型幻灯片|轮播图|旋转木马的强大jQuery插件
jssor slider是一款功能非常强大的可制作超过30种不同类型的幻灯片|轮播图|旋转木马的jQuery插件.jssor具有高性能,轻量级,跨浏览器等特点,它可以支持IE6+的浏览器,并且可以支持 ...
- 网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图 (4)使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播 设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
- 【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
- 图片轮播php代码下载,jQuery带进度条滚动图片轮播代码
jQuery带进度条滚动图片轮播代码 jQuery带进度条滚动图片轮播代码是一款带左右箭头按钮控制图片滚动轮播,标题和进度条显示效果. $(document).ready(function(e) { ...
- 前端学习记录13-CSS-(滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素 滑动门技术 微信导航栏实现 静态轮播图实现 网上引用的图标字体设置 过渡效果(transit ...
- js轮播图片小圆点变化_纯js实现轮播图,详解(简单,无缝,小圆点,左右手动切换,自动轮动)...
无论用什么语言开发可视化界面,都有一个叫轮播图的东西.我们现在有个需求,如图: slideshow1.PNG 左右切换按钮默认为隐藏,当鼠标进入图片时,左右切换按钮时显示的,当鼠标离开图片时左右切换按 ...
- html轮播图添加文字,(swiper插件)轮播图,下面的文字随图片进行翻页
效果:(图片来源网路) Html: 广播通知:你好 你好你好!!!! 欢迎来到这里,welcome,这是轮播图的第二条消息 css: *{ margin:0; padding:0; } .slider ...
- 自定义插件实现网易云音乐首页图片轮播
编写html界面 <!DOCTYPE html> <html><head><meta charset="utf-8" /><t ...
- bootstrap 轮播控制时间_【前端冷知识】如何封装一个图片轮播组件
组件封装是一个前端工程师进阶的必经之路.组件封装是指Web页面上抽出来一个个包含模版(HTML).功能(Javascript)和样式(CSS)的单元.所以,今天的内容,我们将带你了解组件封装的开发思路 ...
最新文章
- AE,按照属性值关系选择要素
- CSMA/CD在全双工和半双工模式下的区别
- 数组中查找並返回数组_用Python查找数组中出现奇数次的那个数字
- k8s redis集群_基于K8S部署redis哨兵集群
- ApiPost V5 升级指南
- C#连接Oracle中文乱码问题解决方法
- 【NOIP2016提高A组模拟10.15】算循环
- Java字符串replaceAll()方法
- Linux 平台下 Tomcat 的安装与优化
- 一起学习MVC(4)-entity SQL语句
- AD 软件的学习--基本操作
- 两只小企鹅(Python实现)
- flac格式歌曲如何转换成mp3格式,flac转mp3详细图文教程
- 从诺贝尔奖到“吃鸡守护者”:通往极点的手机散热战争
- matlab 祁彬彬,MATLAB 向量化编程基础精讲
- 微信图片翻译技术优化之路
- Unicode字符类
- 关于maxIdle ,MaxActive,maxWait介绍
- 基于SIMD的算法加速技术简介
- 游戏数据分析报告--<野蛮时代>