当前位置: 代码迷 >> ASP.NET >> jquery兑现图片大批滚动
  详细解决方案

jquery兑现图片大批滚动

热度:4055   发布时间:2013-02-25 00:00:00.0
jquery实现图片大批滚动
有如下的结构的图片:

a图 b图 

c图 d图

在数据库里查询出来,共有8个图。。

用jquery如何实现自动的,滚动: 先显示a b c d,隔一段时间后,a b c d隐掉,显示e f g h图。。

谢谢。。

------解决方案--------------------------------------------------------
网上有很多jquery图片轮播插件,当然你也可以自己去写一个轮播,思路就是4个图片放在一个div层,另外四个也放在一个div层,然后写事件和样式切换,当然你不想写就直接用控件,推荐一个slidebox空间类似自动相框效果,该控件api都在slidebox.js里面写着,你可以自行查看,示例代码如下
HTML code
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %><asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">    Slidebox</asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">    <h2>        Slidebox</h2>    <div id="davidDemo" class="slideBox">        <ul class="items">            <li><a href="javascript:void(0)">                <img src="../../Images/Chrysanthemum.jpg" width="300" height="200" /></a> <a href="javascript:void(0)">                    <img src="../../Images/Desert.jpg" width="300" height="200" /></a> <a href="javascript:void(0)">                        <img src="../../Images/Hydrangeas.jpg" width="300" height="200" /></a> <a href="javascript:void(0)">                            <img src="../../Images/Jellyfish.jpg" width="300" height="200" /></a>            </li>            <li><a href="javascript:void(0)">                <img src="../../Images/Koala.jpg" width="300" height="200" /></a> <a href="javascript:void(0)">                    <img src="../../Images/Lighthouse.jpg" width="300" height="200" /></a> <a href="javascript:void(0)">                        <img src="../../Images/Penguins.jpg" width="300" height="200" /></a> <a href="javascript:void(0)">                            <img src="../../Images/Tulips.jpg" width="300" height="200" /></a>            </li>        </ul>    </div>    <script language="javascript" type="text/javascript">        var InitSlidebox = function () {            $('#davidDemo').slideBox({                direction: 'top', //left,top#方向                duration: 0.3, //滚动持续时间,单位:秒                easing: 'linear', //swing,linear//滚动特效                delay: 5, //滚动延迟时间,单位:秒                startIndex: 1//初始焦点顺序,            });        }        //创建slidebar对象,千万记住不要变动ul li a的层次结构可以更改div的id,不要随意去除slideBox样式否则需要重新更改Slidebox.js中的源码        var initSlidebox = new InitSlidebox();    </script></asp:Content>
  相关解决方案