幻灯片效果

<BODY>
<div id="dh">
<img src="images/t1.jpg"/>
<img src="images/t2.jpg"/>
<img src="images/t3.jpg"/>
<img src="images/t4.jpg"/>
<img src="images/t5.jpg"/>
</div>

========================

*{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;color:red;}
html,body{width:100%;height:100%;background:#FFF;font-size:12px;font-family:"宋体"}
#dh{width:595px;height:260px;margin:6px;overflow:hidden;}

==========================================

$(function(){
$("#dh>img").not(":last").hide();
setInterval(function(){
if($("#dh>img").filter(":visible").prev().is("img"))
{
$("#dh>img").filter(":visible").fadeOut(200).prev().fadeIn(500);
}
else{
$("#dh>img").filter(":visible").fadeOut(200).end().last().fadeIn(500);
}
},2000);

})

时间： 2024-09-04 11:08:25

幻灯片效果的相关文章

图片的幻灯片效果

简单实现图片的幻灯片效果 设置-->"上一页"和"下一页"按钮 NSUInteger select; //创建图片视图控件 v1=[[UIImageView alloc] initWithFrame:CGRectMake(10, 30, 400, 400)]; select=0; v1.image=arr[select]; //添加到视图 [self.view addSubview:v1]; //按钮的响应方法 -(void)butaction:(UIButt

setTimeout应用 &amp;&amp; 自动播放——幻灯片效果&amp;&amp; 自动改变方向——幻灯片效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

酷毙了！三种风格的全屏幻灯片效果【附源码下载】

今天,我们想向您展示如何创建平铺背景图像的幻灯片效果.其灵感来自于国外的一个工作室网站(围观),这个网站充满了各种有趣和创意效果,一定记得去看看. 这个幻灯片效果是由四个区域的独立移动构成,通过画面分割,同时显示出新的图片.这里需要组合使用 CSS3 的3D转换.过渡和动画功能.除了这种效果我们也将添加两个更多的变化,我们的宗旨是实现超流畅的交互体验. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 源码下载      在线演示

【jquery】幻灯片效果

闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. 效果可参考: http://www.helloweba.com/demo/supersized/ 只是上面这个DEMO用的是supersized,功能比较强大,就是代码加密过了,读起来很困难. 废话不说,代码放上. CSS: img.slider-image { position:absolute

使用CSS实现一个简单的幻灯片效果

方法一: 简单的CSS代码实现幻灯片效果 方法二: 使用CSS3 Animation来制作幻灯片 方法一: 简单的CSS代码实现幻灯片效果 话不多说,直接上代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS实现简单的幻灯片效果</title> <style type="te

图片滑块，传送带，幻灯片效果

适合电子商务网站的图片滑块 Sequence.js 是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能.带有图片缩率图,能够呈现全屏图片浏览效果.结合 CSS3 Transition 实现响应式的滑块效果. 效果演示     插件下载 经典的 jQuery 图片幻灯片效果 Slides 是一款精巧的 jQuery 幻灯片插件,有循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页.利用 Slides 插件,你还可以随机播放幻灯片.它附带详细的的帮助文档和示例. 插件下载

css+js 控制幻灯片效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>幻灯片效果</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ padding: 50px 10%; } .slider .main,.slide

javascript - 图片的幻灯片效果

javascript 代码: <script type="text/javascript"> function select_play() { var select_play_box = document.getElementById("select_play_box"); var aUl = select_play_box.getElementsByTagName("ul"); var aImg = aUl[0].getElemen

js练习-实现图片的幻灯片效果

1.实现效果: 2.实现主要思想: 三张图做成一个大图,点击某个链接,对链接判断从而对图片进行相应px大小的左移或者右移操作 3.代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>幻灯片效果-点击某个链接某张图移动</title> 5 <meta charset="en"> 6 <style> 7 #slideshow { 8 width:1200px;

实用图片滑块，传送带，幻灯片效果【附源码】

图片是网站功能的重要组成部分,这里集合了10个图片滑块,传送带,幻灯片效果,相信你在项目中肯定会用到.这些分享的效果大部分都是实用 jQuery 实现的,使用起来很简单.看看下面这些惊人的功能和效果,我相信你会发现一些很有用的东西. 适合电子商务网站的图片滑块 Sequence.js 是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能.带有图片缩率图,能够呈现全屏图片浏览效果.结合 CSS3 Transition 实现响应式的滑块效果. 效果演示     插件下载 经典的 j