淡入淡出效果模板 js
html文件中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Slide</title>
<link href="css/jquery-slide.css" rel="stylesheet" media="screen">
</head> <body>
<div class="slide-pic">
<ul class="slide-viewport">
<li style="z-index:2;">
<a href="javascript:void(0);">
<img src="data:images/sample1.jpg" width="600" height="300" alt="">
</a>
</li>
<li>
<a href="javascript:void(0);">
<img src="data:images/sample2.jpg" width="600" height="300" alt="">
</a>
</li>
<li>
<a href="javascript:void(0);">
<img src="data:images/sample3.jpg" width="600" height="300" alt="">
</a>
</li>
</ul>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/jquery.slide.js"></script>
<script>
$(".slide-pic").slidePic({width:600,height:300,autoSlideTime:2000,controllerLeft:true});<!--此处只能是四个参数-->
</script>
</body> </html>
css样式：
.slide-pic ul,.slide-pic li,.slide-pic img{margin:;padding:;border:;vertical-align:top;}
.slide-pic{position:relative;overflow:hidden;}
.slide-pic .slide-viewport li{position:absolute;left:;top:;list-style:none;}
/* 底部控制器样式 */
.slide-pic .controller-bottom{left:50%;bottom:10px;position:absolute;z-index:;}
.slide-pic .controller-bottom li{background:url("../images/focus-img-button.png") no-repeat 0 0;cursor:pointer;height:9px;float:left;margin-right:10px;overflow:hidden;width:9px;
_background-image:url("../images/focus-img-button-png8.png");}
.slide-pic .controller-bottom li.current {background-position:0 -9px;}
/* 两侧控制器样式 */
.slide-pic .controller-side-left,.slide-pic .controller-side-right{
position:absolute;height:40px;width:20px;top:50%;margin-top:-20px;z-index:;background:rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);zoom:;border-radius:0 20px 20px 0;cursor:pointer;
background-image:url("../images/slide-arrow.png");
background-position:3px 12px;
background-repeat:no-repeat;
_background-image:url("../images/slide-arrow-png8.png");
}
:root .slide-pic .controller-side-left,:root .slide-pic .controller-side-right{filter:none\9;}/*for IE9*/
.slide-pic .controller-side-left{left:;margin-left:-20px;}
.slide-pic .controller-side-right{right:;border-radius:20px 0 0 20px;background-position:-17px 12px;margin-right:-20px;}
js文件：
(function ($) {
var settings;
$.fn.slidePic = function (callerSettings) {
settings = $.extend({//将下面的说有属性的值都合并到全局对象settings中，后面的settings可以调用;
width: 600,
height: 300,
controllerBottom: true,//控制底部的原点的控制按钮是否出现;
controllerLeft: true,//控制左右两侧的按钮是否出现；
autoSlideTime: 5000//图片切换的间隔时间;
}, callerSettings || {});
//初始化
var picsLength = this.find(".slide-viewport > li").length;//只需要将.slide-viewport改成自己代码中所设置的class即可;
picsLength = parseInt(picsLength);//找到html中存在的li的个数，并将其转换为整型;此处为3
this.css({
width: settings.width,
height: settings.height
});
if (settings.controllerBottom) {
createControllerBottom.call(this, picsLength);//调用创建底部按钮的代码;
}
if (settings.controllerLeft) {
createControllerLeft.call(this);//调用两侧按钮出现的代码;
}
var controllerBottomHandler = $(".controller-bottom").find("li");//底部按钮中的li元素;
var controllerSideHandler = $(".controller-side-left,.controller-side-right");//选择两侧的按钮;
var controllerSideLeftHandler = $(".controller-side-left");//单独选取左侧的按钮;
var controllerSideRightHandler = $(".controller-side-right");//单独选取右侧的按钮;
var slidePicHandler = this.find("li");//找到左右的li元素;
var preIndex = 0;
var timer = null;
controllerBottomHandler.mouseover(function() {
var index = $(this).index();//获得当前鼠标放在底部按钮上是第几个按钮;
showNext(index);
});
this.mouseover(function(){//控制两侧的按钮，如果要求显示时，则出现在区域的两侧;
clearTimeout(timer);
controllerSideLeftHandler.stop().animate({marginLeft:0},"normal");
controllerSideRightHandler.stop().animate({marginRight:0},"normal");
}).mouseleave(function() {
timer = setTimeout(function() {
var index = controllerBottomHandler.filter(".current").index();
index = (index + 1) % picsLength;
showNext(index);
timer = setTimeout(arguments.callee,settings.autoSlideTime);
}, settings.autoSlideTime);
//鼠标移开时,两侧按钮不显示;
controllerSideLeftHandler.stop().animate({marginLeft:"-20px"},"normal");
controllerSideRightHandler.stop().animate({marginRight:"-20px"},"normal");
}).mouseleave();
//当点击两侧的按钮时，控制图片以淡入淡出的效果实现;
controllerSideHandler.click(function(){
var index = controllerBottomHandler.filter(".current").index();//获取当前显示为红色的li元素是第几个,从0开始计数;
if($(this).hasClass("controller-side-left")){//如果当前点击的是左侧的按钮;
index = (index - 1) % picsLength;//
if(index < 0){
index = picsLength + index;
}
}
if($(this).hasClass("controller-side-right")){//如果当前点击的是右侧的按钮;
index = (index + 1) % picsLength;
}
showNext(index);
});
//根据底部的红色切换,显示下一个图片;
function showNext(index) {
controllerBottomHandler.removeClass("current").eq(index).addClass("current");//使放上去的这个按钮的颜色变为红色;
slidePicHandler.css("zIndex", "").eq(preIndex).css("zIndex", 1).end().eq(index).css({//连续设置几个li的样式;
"zIndex": 2,
"opacity": 0
}).stop().animate({//表示前面的li样式设置好后，就停止，然后开始逐渐使图片的透明度变为1（完全显示）;
"opacity": 1
}, "normal");
preIndex = index;
}
return this;
}
//创建底部按钮的代码;
var createControllerBottom = function (picsLength) {
var controllerWidth = picsLength * 19; //19为底部控制器圆点的宽度outerWidth
var controllerBottomHtml = "";
for (var i = 0; i < picsLength; i++) {
controllerBottomHtml += "<li></li>"
}
controllerBottomHtml = "<ul class='controller-bottom'>" + controllerBottomHtml + "</ul>";
this.append(controllerBottomHtml);//创建了底部按钮显示的代码;
this.find(".controller-bottom").css({//设置底部按钮的样式，使得默认情况下第一个按钮的眼的为红色;
width: controllerWidth,
marginLeft: -(controllerWidth / 2)
}).find("li:first").addClass("current")
};
var createControllerLeft = function () {//创建幻灯片两侧的按钮;
var controllerLeftHtml = '<span class="controller-side-left"></span><span class="controller-side-right"></span>';
this.append(controllerLeftHtml);
};
})(jQuery);
注意点：images文件夹 和 css文件夹以及 js文件夹实在同一级目录中，而且导入的js库文件版本不要太高，有时会出错，该模板用的jquery文件为：jquery-1.6.2.min.js
淡入淡出效果模板 js的更多相关文章
- 淡入淡出效果的js原生实现
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- 基于jquery实现的文字淡入淡出效果
这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 实现Bootstrap Carousel Fade Transition 淡入淡出效果
html代码: <div id="carousel" class="carousel slide carousel-fade" data-ride=&qu ...
- javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果
最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...
- 【jQuery】使用JQ来编写面板的淡入淡出效果
本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...
- JQuery显示，隐藏和淡入淡出效果
为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...
- jQuery-4.动画篇---淡入淡出效果
jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...
随机推荐
- 设计模式-工厂模式（Factory Pattern）
本文由@呆代待殆原创,转载请注明出处. 工厂模式遵循的设计原则之一:找出代码中常变化的部分,并把这一部分分离出来.(Dependency Inversion Principle) 工厂模式简述 当我们 ...
- 记录（Record）
记录有可以被称为行(Row),可以通俗的认为它是数据表中的一行数据.以员工表为例,一个公司的员工表中的数据是这样的: 这里每一行数据就代表一个员工的资料,这样的一行数据就叫做一条记录.表是由行和列组成 ...
- CodeChef - UASEQ Chef and sequence
Read problems statements in Mandarin Chinese and Russian. You are given an array that consists of n ...
- 【后缀数组】【二分答案】【差分】poj1743 Musical Theme
差分消除加减一个值得影响,貌似r二分上界要设成(n-2)/2?为啥? sa求不可重叠最长重复子串 给定一个字符串,求最长重复子串,这两个子串不能重叠.算法分析:这题比上一题稍复杂一点.先二分答案,把题 ...
- 使用jQuery操作dom（追加和删除样式-鼠标移入移出）练习
1.实现鼠标移入则添加背景色,鼠标移出则删除背景色 <!DOCTYPE html> <html> <head> <title>test1.html< ...
- redis秒杀系统数据同步（保证不多卖）
东西不多卖 秒杀系统需要保证东西不多卖,关键是在多个客户端对库存进行减操作时,必须加锁.Redis中的Watch刚好可以实现一点.首先我们需要获取当前库存,只有库存中的食物小于购物车的数目才能对库存进 ...
- Linux下使用GDB进行调试
Linux下使用GDB进行调试的常用命令记于此. $ sudo su # g++ -g test.cpp -o test -pthread # gdb test <------- ...
- Win10 无法用内置管理员帐户打开 解决方案
- knowledgeroot 配置
首先下载 KnowledgeRoot 的安装包,就是一个压缩文件,解压缩后放到 WebRoot 下面 在浏览器中打开网站,自动提示进行安装,安装的过程很简单,安装结束后即可以使用. 安装包创建的数据库 ...
- 手游产品经理初探（四）从Buybutton谈玩家付费
付费模块一直是游戏中最最重要的一块,那么今天我们从玩家的角度来解说哪种方式付费更迎合玩家的心理.我还是着重从我做的Casino类型游戏说起. 一般来说游戏界面喜欢把付费button放在界面最醒目的位置 ...