web前端|js教程
jQuery,图片切换
web前端-js教程
文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件)，对网友们的学习是很有帮助的，虽然样式不太好看，大家可以自己写，好好利用哦。。。
电影天堂源码程序,mips vscode,花生壳ubuntu安装,tomcat 443,sqlite3.2,服务器不能运行exe,鲶鱼插件,免费前端框架ppt,python网络爬虫图片,南京php培训中心,网上seo培训,帝国 精仿 改进某早教培训类网站,免责声明网页源码,ecstore模板下载,html5错误页面模板,c s进销存管理系统,安卓 开发小程序lzw
JS代码部分：
手机地图开发源码,vscode自动纠错,ubuntu更改驱动报错,tomcat常用目录,sqlite 多语句,max翻书插件,前端开发框架针对那些,爬虫抓取软件,smtp php,SEO案例模特,导购网站源程序,网页显示二维码,中文jquery模板下载,jquery实现切换页面过渡动画效果,layui 管理系统源码,企业手机网站程序是什么样的lzw
(function ($) {
var//申明全局变量
_eleTemp,//缓存变量
_eleThis = $(this),//当前元素
_eleImg = $(.zd-imgChange-img),//图片组元素
_eleControll = $(.zd-imgChange-controll),//控制器组元素
_eleChange = $(.zd-imgChange-change),//切换元素
_icon = ●○,//动态图标
_imgTemplate = $(document.createElement(img)),//图片模版
_setting = {
height: 100,//高
width: 200,//宽
imgs: new Array(),//图片地址
links: null,//点击地址
tips: null,//图片说明
timers: 3000//自动切换时间
},//配置
_timers = null//自动切换保存变量
$.fn.zoeDylan_ImageChange = function (op) {
_eleThis = $(this);
_setting = $.extend(_setting, op);//设置属性
//处理数据(查看是否为合法范围)
_setting.timers = _setting.timers != null && _setting.timers != undefined && _setting.timers > 1000 ? _setting.timers : 1000;
_setting.height = parseFloat(_setting.height) < 100 ? 100 : parseFloat(_setting.height);
_setting.width = parseFloat(_setting.width) < 200 ? 200 : parseFloat(_setting.width);
return this.each(function () {//初始化
AddTemplate();
AddImg();
DisSize();
DisControll();
})
}
//添加模版
function AddTemplate() {
_eleThis.removeClass();
_eleThis.addClass(zd-imgChange);
_eleTemp = ;
_eleThis.append(_eleTemp);
_eleTemp =
交友 婚姻 网站源码,自建vscode web版,ubuntu安装yara,nigix配置tomcat,sqlite++数据类型,对浏览器兼容最好的前端框架,爬虫学到爬取视频需要多久,sort排序php,绥阳seo优化价格,一元夺宝网站模板,网页教务系统源码,html个人资料模板lzw
‘;
_eleThis.append(_eleTemp);
_eleTemp = ‘
‘;
_eleThis.append(_eleTemp);
_eleTemp = ‘‘;
_eleThis.append(_eleTemp);
//给全局变量赋值
_eleImg = $(‘.zd-imgChange-img’);
_eleControll = $(‘.zd-imgChange-controll’);
_eleChange = $(‘.zd-imgChange-change’);
}
//添加图片
function AddImg() {
for (var i = 0; i < _setting.imgs.length; i++) {
//图片
_eleTemp = $(document.createElement(‘img’));
_eleTemp.addClass(‘zd-imgChange-img-item’);
_eleTemp.attr(‘src’, _setting.imgs[i]);
_eleImg.append(_eleTemp);
//图标
_eleControll.append(” + _icon[1] + ”);
//提示
$(_eleImg.children(‘img’)[i]).attr({ ‘title’: _setting.tips[i] + ‘|’ + _setting.links[i] });
$(_eleControll.children(‘span’)[i]).attr(‘title’, _setting.tips[i]);
}
Dispose(0, ‘TtoB’);
}
//处理尺寸
function DisSize() {
_eleThis.css({ ‘height’: _setting.height, ‘width’: _setting.width, ‘font-size’: _setting.height * 0.2 – 2 });
_eleThis.children(‘button’).css(‘font-size’, _setting.height * 0.2 – 2);
_eleChange.css({ ‘line-height’: _setting.height + ‘px’ });
}
//处理操作事件
function DisControll() {
_eleImg.children(‘img’).bind(‘click’, function () {//点击图片跳转
document.location = ‘http://’ + $(this).attr(‘title’).split(‘|’)[$(this).attr(‘title’).split(‘|’).length – 1];
});
_eleChange.bind(‘click’, function () {//顺序切换图片
var nowImg = $(‘.zd-imgChange-img-item-sel’);
_eleTemp = _eleImg.children(‘img’);
if ($(this).hasClass(‘zd-imgChange-change-left’)) {//向左切换
for (var i = 0; i < _eleTemp.length; i++) {
if (nowImg.attr(‘title’) == $(_eleTemp[i]).attr(‘title’)) {
if ((i – 1) < 0) {
Dispose(_eleTemp.length – 1, ‘RtoL’);
} else {
Dispose(i – 1, ‘RtoL’);
}
break;
}
}
} else if ($(this).hasClass(‘zd-imgChange-change-right’)) {//向右切换
for (var i = 0; i < _eleTemp.length; i++) {
if (nowImg.attr(‘title’) == $(_eleTemp[i]).attr(‘title’)) {
if ((i + 1) > _eleTemp.length – 1) {
Dispose(0, ‘LtoR’);
} else {
Dispose(i + 1, ‘LtoR’);
}
break;
}
}
} else {
return false;
}
});
_eleControll.children(‘span’).bind(‘click’, function () {
for (var i = 0; i < _eleControll.children(span).length; i++) {
if ($(_eleControll.children(‘span’)[i]).attr(‘title’) == $(this).attr(‘title’)) {
if ($(_eleImg.children(‘img’)[i]).attr(‘src’) != $(‘.zd-imgChange-img-item-sel’).attr(‘src’)) {//判断是否点击的同一个标签
Dispose(i, ‘TtoB’);
}
break;
}
}
});
}
//切换器
function Dispose(eNum, dir) {//切换图片
clearTimeout(_timers);
DisposeAnm();
$(_eleControll.children(‘span’)).html(_icon[1]);
$(_eleControll.children(‘span’)[eNum]).html(_icon[0]);
$(‘.zd-imgChange-change-left’).attr(‘title’, eNum – 1 >= 0 ? $(_eleControll.children(‘span’)[eNum – 1]).attr(‘title’) : $(_eleControll.children(‘span’)[_eleControll.children(‘span’).length – 1]).attr(‘title’));
$(‘.zd-imgChange-change-right’).attr(‘title’, eNum + 1 <= _eleControll.children(span).length – 1 ? $(_eleControll.children(span)[eNum + 1]).attr( itle) : $(_eleControll.children(span)[0]).attr( itle));
_timers = setTimeout(Timers, _setting.timers);
//切换动画–根据z-index实现视觉效果
function DisposeAnm() {
$(‘.zd-imgChange-img-item’).removeClass(‘zd-imgChange-img-item-temp’);
$(‘.zd-imgChange-img-item-sel’).removeClass(‘zd-imgChange-img-item-sel’).addClass(‘zd-imgChange-img-item-temp’);
_eleTemp = $(_eleImg.children(‘img’)[eNum]).addClass(‘zd-imgChange-img-item-sel’);
if (dir == ‘TtoB’) {
_eleTemp.css(‘top’, -_setting.height);
_eleTemp.animate({ top: 0 }, 300);
} else if (dir == ‘RtoL’) {
_eleTemp.css(‘left’, _setting.width);
_eleTemp.animate({ left: 0 }, 300);
} else if (dir == ‘LtoR’) {
_eleTemp.css(‘left’, -_setting.width);
_eleTemp.animate({ left: 0 }, 300);
}
}
}
//自动切换时钟
function Timers() {
_timers = setTimeout(Timers, _setting.timers);
var nowImg = $(‘.zd-imgChange-img-item-sel’);
_eleTemp = _eleImg.children(‘img’);
for (var i = 0; i < _eleTemp.length; i++) {
if (nowImg.attr(‘title’) == $(_eleTemp[i]).attr(‘title’)) {
if ((i – 1) < 0) {
Dispose(_eleTemp.length – 1, ‘TtoB’);
} else {
Dispose(i – 1, ‘TtoB’);
}
break;
}
}
}
})($)
CSS代码部分：
.zd-imgChange {
position: relative;
margin: auto;
padding: 0px;
min-width: 200px;
min-height: 100px;
background: rgba(0,0,0,0.5);
color: #fff;
cursor: pointer;
overflow: hidden;
}
.zd-imgChange-change {
cursor:pointer;
color:#fff;
margin: 0px;
padding: 0px;
position: relative;
background: rgba(0,0,0,0.5);
width: 10%;
height: 100%;
text-align: center;
opacity: 0.1;
z-index: 1;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
border:none;
}
.zd-imgChange-change:hover {
opacity: 1;
}
.zd-imgChange-change-left {
float: left;
}
.zd-imgChange-change-right {
float: right;
}
.zd-imgChange-img {
z-index: 0;
padding: 0px;
position: absolute;
top: 0px;
left: 0px;
background: rgba(100,0,0,0.1);
width: 100%;
height: 100%;
}
.zd-imgChange-img-item {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: none;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
opacity: 1;
z-index: -1;
}
.zd-imgChange-img-item-temp{
z-index:0;
}
.zd-imgChange-img-item-sel {
z-index: 1;
}
.zd-imgChange-controll {
z-index: 2;
padding: 0px;
position: absolute;
bottom: 0px;
width: 100%;
height: 20%;
background: rgba(0,0,0,0);
text-align: center;
-moz-transition: background 0.4s;
-o-transition: background 0.4s;
-webkit-transition: background 0.4s;
transition: background 0.4s;
text-shadow: 0px 0px 5px #000;
opacity: 0.7;
}
.zd-imgChange-controll:hover {
background: rgba(0,0,0,0.5);
opacity: 1;
}
.zd-imgChange-controll span {
-moz-transition: color 0.4s;
-o-transition: color 0.4s;
-webkit-transition: color 0.4s;
transition: color 0.4s;
}
.zd-imgChange-controll span:hover {
color: rgba(0,0,0,0.6);
}
HTML代码部分：
var a_imgs = new Array(//插入图片地址
./1 (1).jpg,
./1 (2).jpg,
./1 (3).jpg,
./1 (4).jpg
),
a_links = new Array(//点击图片跳转的网址
\,
\,
\,
\
),
a_tips = new Array(//鼠标停靠的提示
百度,
腾讯,
谷歌,
中关村
);
$(function () {
$(#imgc).zoeDylan_ImageChange({//设置
width: 500,
height: 300,
imgs: a_imgs,
links: a_links,
tips: a_tips,
timers:2000
});
});
<!-- <
d
>-->
ps:尽量使用高版本浏览器，目测测试浏览器：IE11 IE10 IE6 google 猎豹 欧鹏 可以完美运行，IE6透明效果有损失
代码下载：/12/yuanma/zeodylanimgchange().rar
