利用jquery的淡入淡出函数(fadeIn和fadeOut)--实现轮播

  首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果。利用jquery的淡入淡出函数(fadeIn和fadeOut)。废话也不多说,边上代码边讲解。最后附上demo效果地址。

  <!--整体容器-->
    <div class="imgbox">
        <!--图片列表,除第一张显示外,其余隐藏-->
        <ul>
            <li style="display: block;" title="清灵少女宛如梦境仙女"><a href="#">
                <img src="http://p.dddddd.net/uploads/allimg/110927/11-11092G32227.jpg" /></a></li>
            <li title="美女海边性感透视装诱惑"><a href="#">
                <img src="http://tu.dushiys.com/uploads/allimg/130621/1-130621145931-50.jpg" /></a></li>
            <li title="夏小薇:百变小魔女变身性感数码宝贝"><a href="#">
                <img src="http://p.dddddd.net/uploads/allimg/130620/19-130620115013.jpg" /></a></li>
            <li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#">
                <img src="http://imgtu.5239.com/uploads/allimg/130315/5-130315135240.jpg" /></a></li>
        </ul>
        <div class="title_bg common"><!--图片标题背景-->
        </div>
        <!--图片显示标题-->
        <div class="title common"></div>
        <!--图片序号-->
        <div class="pager common">
            <ul>
                <li>4</li>
                <li>3</li>
                <li>2</li>
                <li style="background: #FF70Ad;">1</li>
            </ul>
        </div>
    </div>

//css

img{border-style:none;}
.imgbox{width:530px;margin:100px;height:350px;}
.imgbox img{width:530px;height:350px;}
.imgbox ul{list-style-type:none;margin:0px;padding:0px;}
.imgbox ul li{display:none;}
.title_bg{z-index:1;background-color:#000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;}
.title{z-index:2;color:#FFF;text-indent:10px;font-size:14px;line-height:40px;}
.pager{z-index:3;}
.common{position:relative;height:40px;margin-top:-43px;}
.pager ul{margin-top:5px;}
.pager ul li{float:right;color:#FFF;font-size:15px;display:block;border:2px solid #e5eaff;width:25px;height:25px;margin-right:4px;margin-top:5px;text-align:center;line-height:25px;background-color:#6f4f67;cursor:pointer;}

//js

$(document).ready(function () {             (new CenterImgPlay()).Start();         });         function CenterImgPlay() {             this.list = $(".imgbox").children(":first").children();             this.indexs = [];             this.length = this.list.length;             //图片显示时间             this.timer = 3000;             this.showTitle = $(".title");

var index = 0, self = this, pre = 0, handid, isPlay = false, isPagerClick = false;

this.Start = function () {                 this.Init();                 //计时器,用于定时轮播图片                 handid = setInterval(self.Play, this.timer);             };             //初始化             this.Init = function () {                 var o = $(".pager ul li"), _i;

for (var i = o.length - 1, n = 0; i >= 0; i--, n++) {                     this.indexs[n] = o.eq(i).click(self.PagerClick);                 }             };             this.Play = function () {                 isPlay = true;                 index++;                 if (index == self.length) {                     index = 0;                 }                 //先淡出,在回调函数中执行下一张淡入                 self.list.eq(pre).fadeOut(300, "linear", function () {                     var info = self.list.eq(index).fadeIn(500, "linear", function () {                         isPlay = false;                         if (isPagerClick) { handid = setInterval(self.Play, self.timer); isPagerClick = false; }                     }).attr("title");                     //显示标题                     self.showTitle.text(info);                     //图片序号背景更换                     self.indexs[index].css("background-color", "#FF70Ad");                     self.indexs[pre].css("background-color", "#6f4f67");

pre = index;                 });             };             //图片序号点击             this.PagerClick = function () {                 if (isPlay) { return; }                 isPagerClick = true;

clearInterval(handid);

var oPager = $(this), i = parseInt(oPager.text()) - 1;

if (i != pre) {                     index = i - 1;                     self.Play();                 }             };         };

时间: 2024-10-02 13:16:01

利用jquery的淡入淡出函数(fadeIn和fadeOut)--实现轮播的相关文章

Jquery中淡入淡出效果fadeIn()、fadeOut()、fadeToggle()、fadeTo()学习引发的思考----关于Jquery函数传参数

一.基本语法 1.fadeIn淡入.fadeOut淡出.fadeToggle淡入淡出切换(已经淡出点击淡入,或者相反): $(selector).fadeIn(duration,complete); $(selector).fadeOut(duration,complete); $(selector).fadeToggle(duration,complete); 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"(200ms)."fast"(600

利用jQuery的淡入淡出实现轮播器

基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡出时却无效果,最后只能使用fadeOut实现,求大神指教 HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

210 jQuery淡入淡出:fadeIn() 、fadeOut() 、fadeToggle() 、fadeTo()

淡入淡出动画,常见有四个方法:fadeIn() .fadeOut() .fadeToggle() .fadeTo() ? 语法规范如下: 代码演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

利用fadein、fadeout写轮播

<div id="s" style="width:400px;height:300px;position:relative;"> <div id="s1" style="position:absolute;width:100%;height:100%;background-color:gray;"></div> <div id="s2" style="po

Jqurey学习笔记---6、jQuery 效果 - 淡入淡出

jQuery 效果 - 淡入淡出 实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法. jQuery fadeOut() 演示 jQuery fadeOut() 方法. jQuery fadeToggle() 演示 jQuery fadeToggle() 方法. jQuery fadeTo() 演示 jQuery fadeTo() 方法. jQuery fadeIn() 方法 jQuery fadeIn() 用于淡入已隐藏的元素. 语法: $(selector).f

jQuery 效果 – 淡入淡出

在在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuery中使用这四个方法. 通过 jQuery,您可以实现元素的淡入淡出效果. 点击展示 淡入/淡出 面板 实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法. jQuery fadeOut() 演示 jQuery fadeOut() 方法. jQuery fadeToggl

jQuery(5)——jQuery fade淡入淡出效果

jQuery fade淡入淡出效果 淡入淡出效果是基于透明度的变换而实现的.在测试demo的时候可以在控制台查看elements中的opacity的变换 在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo() 语法 $(selector).fadeXXX(speed,callback); 他们都可以有两个可选参数: 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"

jQuery 效果 - 淡入淡出

jQuery 拥有下面四种 fade 方法: jQuery fadeIn() 方法jQuery fadeIn() 用于淡入已隐藏的元素. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="jquery-2.2.0.min.js"></script> 5 <script> 6 $(document).ready(function(){ 7 $("butto

利用CSS3制作淡入淡出动画效果

CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态效果,由CSS3来驱动产生动画效果. 下面讲解一下如何利用CSS3制作淡入淡出的动画效果.具体实例可参考刚进入本站时的淡入效果. 1. 定义动画,名称为fadeIn @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% {