淡入淡出效果模板 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.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...

随机推荐

[BZOJ 2208] 连通数
Link: BZOJ 2208 连通数 Solution: 传递闭包模板题传递闭包是集合中最小的二元关系,其实就是对二元关系的不断拓展,一般用$floyd$求解这里要先跑一遍$tarjan$求出$ ...
某考试 T1 lcm
把lcm写成 (a+n)*(b+n) / gcd(a+n,b+n). 因为gcd可以辗转相减,所以就成了gcd(abs(a-b),a+n),一个常量一个变量之间的gcd,我们可以直接把abs(a-b) ...
【动态规划】【记忆化搜索】1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提高组
跟CODEVS 3415没有什么区别,也不用高精度. http://www.cnblogs.com/autsky-jadek/p/4055184.html #include<cstdio> ...
【莫比乌斯反演】BZOJ2920-YY的GCD
[题目大意] 给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对. [思路] 太神了这道题……蒟蒻只能放放题解:戳,明早再过来看看 ...
scrapy初探
一创建scrapy项目运行命令: scrapy startproject 项目名称目录结构二定义Item容器 Item是保存爬取到数据的容器,其使用方法和python字典类似,并且提供了 ...
Enable a SQL Server Trace Flag Globally on Linux
https://www.mssqltips.com/sql-server-tip-category/226/sql-server-on-linux// Microsoft has recently r ...
学习使用常用的windbg命令（u、dt、ln、x）
http://blog.csdn.net/wesley2005/article/details/51501514 目录: (1) u命令(反汇编) (2) dt命令(查看数据结构) (3) ln命令( ...
Firefox中好用的几个快捷键
对于一些经常用FF(firefox)上网的朋友来说, 怎样加快上网的操作速度呢, 使用Firefox快捷键是很好的方法. 本人也经常遇到一些Firefox的很好的快捷键,现在我来告诉大家Firefox ...
Oracle RMAN 备份及不完全恢复(删除archievelog)
RMAN备份命令 backup Database format='/home/oracle/backup/bak_full_%U_%T' tag='bak_full'; sql 'alter syst ...
Java线程：概念与原理（转）
一.操作系统中线程和进程的概念现在的操作系统是多任务操作系统.多线程是实现多任务的一种方式. 进程是指一个内存中运行的应用程序,每个进程都有自己独立的一块内存空间,一个进程中可以启动多个线程.比如在 ...

淡入淡出效果模板 js

淡入淡出效果模板 js的更多相关文章

随机推荐

热门专题