Cloud Carousel (演示 | 下载)ShineTime (演示 | 下载)Nivo Slider (演示 | 下载)Interactive Photo Desk (演示 | 下载)Beautiful Photo Stack Gallery with jQuery and CSS3 (演示 | 下载)Micro Image Gallery: A jQuery Plugin (演示 | 下载)Minimalistic Slideshow Gallery with jQuery (演示 | 下载)Image Slider with Unique Effects (演示 | 下载)Create image gallery in 4 lines of jQuery (演示 | 下载)Slideshow with st...
下面这些网站使用了各种各样的幻灯片效果，一起体验一下。大家如果想实现精美的 jQuery 幻灯片效果，可以参考这篇文章：60款很酷的 jQuery 幻灯片演示和下载。 x-doria Pure Pleasure Design neve / hawk Hufton + Crow Atelier rdio Olly Sorsby Studio Chirpy Aveillant Level Planoform The Kitchen The Barrelhouse Flat Exsud Creative Ludlow Kingsley Indesit Regent College Doberman Ghost Horses Go...
html 代码如下: jQuery Tools standalone demo href="./tabs-slideshow.css"/> prev First pane Aenean nec imperdiet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Sed elementum risus eleifend massa vestibulum consectetur. Duis massa augue, aliquam eget fringilla vel, aliquam vitae arcu. Nam sed magna mi. Praesent odio ne...
网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享 废话少说,看代码 代码如下: sx.activex.imagefade={ init:function(imga,fadeint,fadeoutt){ var ti=new Array(); for(var i=0;i<imga.length;i++){ ti[i]=new Image(); ti[i].src=imga[i] } var div=document.createElement("div"); var img=document.createElement("img"); img.src=ti[0].src; var...
记得亚马逊没改版之前，首页的幻灯片我很喜欢，每个数字上面都带有进度条。 闲的无聊，自己实现了一个。用的jquery。 主要用到animate（）方法， 因为有一个进度条的播放过程。 不支持ie6，当然，改改还是可以的。演示 下载先看下效果图 看代码吧： 代码如下: slide play with loadbar--by loethen *{padding: 0;margin:0;} ul li{list-style: none;} .slideplay ,.slideshow{ position: relative; } .slideshow li{ positi...
实现思路： 1、for循环给数字按钮加上点击事件。 2.for循环先把按钮的样式清空，再把当前样式设置样式。 3、给每个按钮添加自定义属性index aBtn[i].index=i aBtn[2]=2 第二个按钮和第二张图片想对应，用运动框架把大图的UL每次移动-150px，因为图片高度是150px。如果移动到第n张图片就是-150*n。 4、定义变量now，用来自动播放用的。把当前图片赋值给now now=this.index。 5、定义自动播放函数。now++ 下一张，if判断，到最后一张...
js 代码如下: $(function(){ var length = $(".container a").length; var $items = $(".container a"); $items.on("transitionend", function(event){ $items.removeClass("trans"); }); $(".container a").each(function(index, value){ var $child = $(this); if (index === 0) { $child.addClass("current showing"); } else if (index === 1) { $child.addClass("left showing"); } else if (index == 2) { $child.addClass(...
1、图片滚动 代码如下: $(document).ready(function () { Xhun(".a"); //----------------------只需要修改 ”.a" (就是最大的div的class值这里就行---------------------}); function Xhun(_box) { var box_frame = _box + " div ul"; var box_div = _box + " div"; $(_box).find("ul").wrap(""); //添加一个div，来控制偏移量 $(box_div).append($(box_frame).clone()); //克隆一个ul并...
jquery特效 幻灯片效果，效果图如下： 代码如下: jquery特效 /* CSS Document */ body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;} ul,ol,li{list-style:none;} input,button{margin:0;font-size:12px;vertical-align:middle;} body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto;...
最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下： 先展示下效果把： index.html 页面展示代码 代码如下: prev next 小乔，三国时期的主要女性人物之一。在三国时归属吴国，国色流离、资貌绝伦，是当时有名的东吴美女。 潘安，西晋文学家，本名潘岳。中国古代最著名的美男子之首、"金谷二十四友"之首。 朱元璋，明王朝的开国皇帝，建立了全国统一的封建政权。 吕雉，西汉开...
代码如下:jQuery(".fullSlide").hover(function() { jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)},function() { jQuery(this).find(".prev,.next").fadeOut()});jQuery(".fullSlide").slide({ titCell: ".hd ul", mainCell: ".bd ul", effect: "fold", autoPlay: true, autoPage: true, trigger: "click", startFun: function(i) { var curLi = jQuery(".fullSlide...
导入jquery代码代码如下: var carousel_images = [ "images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg", "images/05.jpg", "images/06.jpg", "images/07.jpg" ]; // Example without autoplay $(window).load(function() { $("#photo_container").isc({ imgArray: carousel_images }); }); // Example with autoplay /* $(window).load(function() { $("#photo_container").is...
幻灯片自动播放图片是当前网站比较流行的一个展示方式。在网上我们能找到各种特效丰富的幻灯片插件和代码。这里项目需要，我自己做了一个简单的，就不详细讲解了，代码很简单。直接看效果图和代码吧。 所有代码 ppt.html，需要提供相应图片才能显示： 代码如下: PPT Demo .ppt-container, .ppt-container ul, .ppt-container li, .ppt-container img { margin : 0; padding : 0; border : 0; } .ppt-container { width : 7...
在网站中使用幻灯片效果的目前很普遍，如何实现，自己经过一番研究，本以为很复杂，想不到却很简单。有现成的jquery插件jquery.KinSlideshow.js。 使用jquery.KinSlideshow.js就可以很轻松的实现幻灯片效果 htm代码： 代码如下: js代码： 代码如下: $(function () { $("#focusNews").KinSlideshow({ // moveStyle:"down", //设置切换方向为向下 [默认向左切换] intervalTime:8, //设置间隔时间为8秒 [默认为5秒] mouseE...
使用jquery插件jquery.smallslider.js也能实现幻灯片效果。 htm代码如下： 代码如下: js代码： 代码如下: $(document).ready(function(){ $(#flashbox).smallslider({onImageStop:true, switchEffect:ease,switchEase: easeOutSine,switchPath: left, switchMode: hover, showText:true, textSwitch:2}); }); 使用到的脚本，样式jquery-1.7.2.min.js，jquery.smallslider.js，smallslider.css