原生javascript淡入淡出焦点图 + Jquery实现方法

淡入淡出焦点图效果类

这里是缓动焦点图链接：

JavaScript 缓动焦点图实现的几种写法封装 + 函数式 + JQuery

焦点图

实现思路：

原生JS的类的调用方式：

        var slider1 = new Slider({id:'focus_pic', /**包裹图片的UL的ID**/btnId:"focus_btn", //幻灯片按钮的ID,可以用来控制CSS显示//step:5, //透明度变化步长，默认为2autoTime:2000//自动播放间隔时间});

幻灯片的HTML书写方式：

<ul id="focus_pic"><li><a target="_blank" href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_01.jpg" width="530" height="180" alt=""></a></li><li><a target="_blank" href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_02.jpg" width="530" height="180" alt=""></a></li><li><a target="_blank" href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_03.jpg" width="530" height="180" alt=""></a></li><li><a target="_blank" href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_04.jpg" width="530" height="180" alt=""></a></li></ul>

幻灯片的原生JavaScript代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>焦点图</title><style type="text/css">#focus_box {position: relative;margin: 0 auto;zoom: 1;width: 530px;height: 180px;overflow: hidden;}#focus_box ul {list-style: none;padding: 0;margin: 0;}#focus_btn {position: absolute;right: 5px;bottom: 5px;z-index: 2;}#focus_pic {position: absolute;}#focus_pic li {position: absolute;left: 0;}#focus_pic li img {border: none;float: left;}#focus_btn li {float: left;font-size: 12px;width: 25px;height: 25px;line-height: 25px;font-weight: bold;text-align: center;background: #fff;color: #000;margin-right: 2px;cursor: pointer;border-radius: 20px;}#focus_btn li.on {background: #f60;color: #fff;}#focus_box1 {position: relative;margin: 0 auto;overflow: hidden;zoom: 1;}#focus_box1 ul {list-style: none;padding: 0;margin: 0;}</style>
</head>
<body>
<div id="focus_box"><ul id="focus_pic"><li><a><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_01.jpg"></a></li><li><a><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_02.jpg"></a></li><li><a><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_03.jpg"></a></li><li><a><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_04.jpg"></a></li></ul>
</div>
<script type="text/javascript">(function () {//先设置两个简洁函数获取ID，设置透明度var $ = function () {var elements = new Array();for (var i = 0; i < arguments.length; i++) {var element = arguments[i];if (typeof element == 'string')element = document.getElementById(element);if (!element) continue;if (arguments.length == 1) return element;elements.push(element);}return elements;};var setOpacity = function (node, level) {node = $(node);if (document.all) {node.style.filter = 'alpha(opacity=' + level + ')';} else {node.style.opacity = level / 100;}};var getTag = function (child, parent) {return parent.getElementsByTagName(child);};var bindEvent = function (element, type, func) {if (element.addEventListener) {element.addEventListener(type, func, false); //false 表示冒泡} else if (element.attachEvent) {element.attachEvent('on' + type, func);} else {element['on' + type] = func;}};function Slider(options) {var id = options.id;var warper = this.warper = $(id);//获取包裹图片DOM(第一个UL的ID)var warpLis = this.warpLis = getTag("li", warper);//获取包裹下的LI子元素this.no = warpLis.length;//获取包裹LI元素的个数this.step = options.step || 2;this.autoTime = options.autoTime || 1000;   //自动播放间隔时间this.btnId = options.btnId || "focus_btn"; //图片上面的数字按钮的IDthis.index = 1; //  开始变幻时的下一个INDEXthis.preIndex = 0;this.init();}Slider.prototype = {init:function () {this.makeBtn(this.no, this.btnId);this.autoPlay();},makeBtn:function (no, c) {//生成按钮 no表示个数 C表示UL的IDvar btnUl = this.btnUl = document.createElement("ul");btnUl.id = c;for (var i = 0; i < no; i++) {var li = document.createElement('li');if (i == 0) li.className = 'on';var text = document.createTextNode(i + 1);li.appendChild(text);setOpacity(li, 80);// 绑定鼠标事件，传递当前的INDEX和preIndexbindEvent(li, 'mouseover', function (obj, t) {return function () {obj.mouseOn.call(obj, t);}}(this, i));btnUl.appendChild(li);}this.warper.parentNode.appendChild(btnUl);//添加到父div下},autoPlay:function(){var that = this;// 执行播放clearTimeout(this.T1);this.T1 = setTimeout(function(){that.fadeIn(that.index)},that.autoTime);},fadeIn:function(index){var thisObj = this.warpLis[index];var thisOpacity = 0; //当前透明度从0渐入var that = this;// 底部按钮的同步,与当前的图层Z-index始终在上面var btnLi = getTag('li', this.btnUl);for (var i = 0, n = btnLi.length; i < n; i++) {btnLi[i].className = '';// 移除所有的Zindexthis.warpLis[i].style.zIndex = '';}//在改变INDEX之前先设置透明度为0setOpacity(this.warpLis[index],0);// 设置前一个图片的Zindexthis.warpLis[that.preIndex].style.zIndex = 1;// 设置当前图片的Zindexthis.warpLis[index].style.zIndex = 2;btnLi[index].className = 'on';//淡入动画if(that.T2)clearInterval(that.T2);this.T2 = setInterval(function(){setOpacity(thisObj,thisOpacity++);  // 设置透明度渐入if(thisOpacity == 100){thisOpacity = 0;clearInterval(that.T2);that.T2 = null;that.preIndex = that.index ++;if(that.index == that.no)that.index = 0;that.autoPlay();}},10);},mouseOn:function(index){this.index = index;this.fadeIn(index);}};var slider1 = new Slider({id:'focus_pic', /**包裹图片的UL的ID**/btnId:"focus_btn", //幻灯片按钮的ID,可以用来控制CSS显示//step:5, //透明度变化步长，默认为2autoTime:2000//自动播放间隔时间});})();
</script>
</body>
</html>

用Jquery 方法实现代码：

slider函数的参数解释：id-包裹UL的DIV的id，autoTime-自动播放时间，btn-为是否需要控制按钮，此参数不填即带控制按钮

调用方法：

slider("focus_pic", 3000);//层的ID与自动播放时间

slider("focus_pic", 3000,"noButton"); //幻灯片不带按钮

var slider = function (id, autoTime, btn) {var $div = $("#" + id), len = $("li", $div).length;var index = 1, timer, preIndex = 0;// 初始化$div.find("li").css("opacity", 0).eq(0).css("opacity", 1);// 生成按钮if (!btn) {var $dl = $("<dl id='J_flashBtn'></dl>");for (var i = 0; i < len; i++) {var $dt = $("<dt>" + (i + 1) + "</dt>");$dl.append($dt);}$div.append($dl);$dl.find("dt").css("opacity", 0.8).eq(0).addClass("on");// 按钮事件$dl.find("dt").hover(function () {clearInterval(timer);index = $(this).index();$(this).addClass("on").siblings().removeClass("on");auto(index);                     preIndex = index;}, function () {timer = setInterval(function () {auto(index);preIndex = index++;if (index > len - 1) index = 0;}, autoTime);});}// 循环执行timer = setInterval(function () {auto(index);preIndex = index++;if (index > len - 1) index = 0;}, autoTime);// 主要动画function auto(index) {$div.find("li").eq(preIndex).css("z-index","0").stop(true, false).animate({opacity:0}, 800);$div.find("li").eq(index).css("z-index","1").stop(true, false).animate({opacity:1}, 800);if(!btn){$dl.find("dt").eq(index).addClass("on").siblings().removeClass("on");}}};

转载于:https://www.cnblogs.com/NNUF/archive/2012/05/13/2497296.html

原生javascript淡入淡出焦点图 + Jquery实现方法相关推荐

JavaScript 自执行函数和 jQuery扩展方法
我们通常将JS代码写在一个单独的JS文件中,然后在页面中引入该文件.但是,有时候引入后会碰到变量名或函数名与其它JS代码冲突的问题.那么如何解决这个问题呢?作用域隔离.在JS中,作用域是通过函数来划分 ...
js轮播图片小圆点变化_原生js实现轮播图(两种方法)
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
jQuery 淡入淡出、滑动和动画
一.淡入淡出 1.jQuery fadeIn() 方法 jQuery fadeIn() 用于淡入已隐藏的元素. 语法:$(selector).fadeIn(speed,callback); 可选的 s ...
【jQuery笔记Part2】04-jQuery淡入淡出动画右下角广告案例
jQuery淡入淡出动画-右下角广告 CSS display 属性淡入淡出动画案例 jQuery笔记目录 CSS display 属性 display 属性规定元素应该生成的框的类型. 值描述 n ...
jQuery学习教程五：jQuery 效果 - 淡入淡出, Fading 方法
实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法. <!DOCTYPE html> <html> <head> <script ...
jQuery 淡入淡出
jQuery Fading 方法通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
jQuery |淡入淡出
通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fadeTo() 下面一一介绍 jQu ...
原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...
php中加载图片淡入淡出,jQuery实现滚动图片淡入淡出功能
这次给大家带来jQuery实现滚动图片淡入淡出功能,jQuery实现滚动图片淡入淡出的注意事项有哪些,下面就是实战案例,一起来看一下. 下面是上下滚动源码向上滚动代码带上下翻按钮滚动特效 body{ ...

原生javascript淡入淡出焦点图 + Jquery实现方法

JavaScript 缓动焦点图实现的几种写法封装 + 函数式 + JQuery

原生javascript淡入淡出焦点图 + Jquery实现方法相关推荐

最新文章

热门文章

原生javascript淡入淡出焦点图 + Jquery实现方法

JavaScript 缓动焦点图实现的几种写法 封装 + 函数式 + JQuery

原生javascript淡入淡出焦点图 + Jquery实现方法相关推荐

最新文章

热门文章

JavaScript 缓动焦点图实现的几种写法封装 + 函数式 + JQuery