有如下的结构的图片:
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>