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

最新推荐文章于 2024-12-13 16:13:46 发布

转载最新推荐文章于 2024-12-13 16:13:46 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lihanqiang/p/4986921.html

文章标签：

#javascript #ViewUI

本文将介绍如何使用HTML、CSS、jQuery等技术实现轮播图效果，并通过实例演示了利用fadeIn和fadeOut函数来制作淡入淡出的轮播效果。包括整体容器、图片列表、图片显示标题和图片序号等关键组件的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　首先说下，我在网上找的例子全是用的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(); } }; };

转载于:https://www.cnblogs.com/lihanqiang/p/4986921.html