Jquery简单幻灯片

最新推荐文章于 2021-07-18 14:55:47 发布
最新推荐文章于 2021-07-18 14:55:47 发布
阅读量91 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/anyan/archive/2011/12/13/2310123.html
版权
看了许多jquery的幻灯片，自己也想学着弄一个，简单是简单了一点。不过研究过，还是比较安慰的啦， 以下代码并未在生产环境中使用过，如果您要在生产环境中使用，请慎重

/* slide(FrameId, FrameWidth, FrameHeight, UlId, isshow,Intervaltime) 外层对象ID，外层宽度，外层高度，内层ID，是否显示半透明层，切换时间间隔 */ function slide(FrameId, FrameWidth, FrameHeight, UlId, isshow, Intervaltime) { var index = 0; var count = -1; //设置图片切换动画 function setlistatus() { $("#" + FrameId + " #" + UlId + " li").fadeOut("slow"); $("#" + FrameId + " .ulorder li").removeClass("on") $("#" + FrameId + " #" + UlId + " li:eq(" + index + ")").fadeIn("slow"); $("#" + FrameId + " .ulorder li:eq(" + index + ")").addClass("on"); index++; if (index >= count) { index = 0; } if (isshow) { var _href = $("#" + FrameId + " #" + UlId + " li:eq(" + index + ") a").attr("href"); var _title = $("#" + FrameId + " #" + UlId + " li:eq(" + index + ") a").attr("title"); if (_title != null && _title != "" && _title != undefined) { $("#" + FrameId + " .transparent").html(""); $("#" + FrameId + " .transparent").html("<a href='" + _href + "' title='" + _title + "'>" + _title + "</a>"); } } } //初始化样式 function setStyle() { var style = "<style type=\"text/css\">"; style += "#" + FrameId + " img{ border:0px;}"; style += "#" + FrameId + " ul,li{ padding:0px; margin:0px;}"; style += "#" + FrameId + "{height:" + FrameHeight + "px; width:" + FrameWidth + "px; overflow:hidden; border:5px #ccc solid;}"; style += "#" + FrameId + " li{list-style:none}"; style += "#" + FrameId + " .ulorder{ position:absolute;z-index:100;}"; style += "#" + FrameId + " .ulorder li{ cursor:pointer; float:left; font-weight:bold; padding:2px 5px; background-color:White; margin-right:5px; text-align:center}"; style += "#" + FrameId + " .ulorder .on{ background-color:Red; color:White}"; if (isshow) { style += "#" + FrameId + " .transparent{padding-left:15px; height:50px; line-height:50px; background-color:black;position:absolute;z-index:50}"; style += "#" + FrameId + " .transparent a{ color:White}"; } style += "</style>"; return style; } //初始化序号 function slideInit() { count = $("#" + FrameId + " ul li").length; //添加序号 var ulstr = "<ul class='ulorder'>" for (var i = 1; i <= count; i++) { ulstr += "<li>" + i + "</li>"; } ulstr += "</ul>"; $("#" + FrameId).append(ulstr); //为序号添加点击事件 $("#" + FrameId + " .ulorder li").bind("click", function () { index = $(this).index(); clearInterval(dingshi); setlistatus(); dingshi = setInterval(setlistatus, Intervaltime); }); var contentHeight = $("#" + FrameId).height() + $("#" + FrameId).position().top; var contentWidth = $("#" + FrameId).width() + $("#" + FrameId).position().left; var ulorderHeight = $("#" + FrameId + " .ulorder").height(); var ulorderWidth = $("#" + FrameId + " .ulorder").width(); $("#" + FrameId + " .ulorder").css("top", (contentHeight - ulorderHeight) + "px"); $("#" + FrameId + " .ulorder").css("left", (contentWidth - ulorderWidth) + "px"); if (isshow) { //添加半透明 style='height:100px;width:" + FrameWidth + "px' var transparent = "<div class=\"transparent\">"; transparent += "</div>"; $("#" + FrameId).append(transparent); $("#" + FrameId + " .transparent").css('opacity', 0.6); $("#" + FrameId + " .transparent").css('width', (FrameWidth - parseInt($("#" + FrameId+ " .transparent").css("padding-left"))) + "px"); var transparentHeight = $("#" + FrameId + " .transparent").height(); var transparentWidth = $("#" + FrameId + " .transparent").width(); var bordtop =parseInt($("#" + FrameId).css("border-top-width")); $("#" + FrameId + " .transparent").css("top", (contentHeight - transparentHeight + bordtop) + "px"); $("#" + FrameId + " .transparent").css("left", ($("#" + FrameId).position().left + $("#" + FrameId).css("border-left-width")) + "px"); } setlistatus(); var dingshi = setInterval(setlistatus, Intervaltime); } $("#" + FrameId).append(setStyle()); slideInit(); }
<!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> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script src="Scripts/Slide.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready( function() { slide("DuDuCMSRoll", 600, 417, "content", true,5000); slide("Div1", 450, 300, "Ul1",false,3000); } ); </script> </head> <body> <div id="DuDuCMSRoll"> <ul id="content"> <li><a href="http://www.baidu.com?id=1" title="kong"> <img alt="kong" src="http://pic.sc.chinaz.com/files/pic/pic7/xpic1247.jpg" /></a></li> <li><a href="http://www.baidu.com?id=2" title="郊外风景图片下载"> <img alt="郊外风景图片下载" src="http://pic.sc.chinaz.com/files/pic/pic6/pic488.jpg" /></a></li> <li><a href="http://www.baidu.com?id=3" title="高清养生少女图片下载"> <img alt="高清养生少女图片下载" src="http://pic.sc.chinaz.com/files/pic/pic7/pic3865.jpg" /></a></li> <li><a href="http://www.baidu.com?id=4" title="不知道"> <img alt="不知道" src="http://pic.sc.chinaz.com/files/pic/pic7/xpic1763.jpg" /></a></li> <li><a href="http://www.baidu.com?id=5" title="绿色叶子图片下载"> <img alt="绿色叶子图片下载" src="http://pic.sc.chinaz.com/files/pic/pic6/pic626.jpg" /></a></li> </ul> </div> <div id="Div1"> <ul id="Ul1"> <li><a href=""> <img alt="kong" src="http://pic.sc.chinaz.com/files/pic/pic7/xpic1247.jpg" /></a></li> <li><a href=""> <img alt="郊外风景图片下载" src="http://pic.sc.chinaz.com/files/pic/pic6/pic488.jpg" /></a></li> <li><a href=""> <img alt="高清养生少女图片下载" src="http://pic.sc.chinaz.com/files/pic/pic7/pic3865.jpg" /></a></li> <li><a href=""> <img alt="不知道" src="http://pic.sc.chinaz.com/files/pic/pic7/xpic1763.jpg" /></a></li> <li><a href=""> <img alt="绿色叶子图片下载" src="http://pic.sc.chinaz.com/files/pic/pic6/pic626.jpg" /></a></li> </ul> </div> </body> </html>

转载于:https://www.cnblogs.com/anyan/archive/2011/12/13/2310123.html

CGGAO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery 幻灯片_有关使用jQuery创建支持滑动的幻灯片的完整教程
cukeoumuqian0413的博客
08-02 358
jquery 幻灯片No matter what’s the basic purpose of your website, if you’ve equipped it with a fully-functional Javascript slideshow, you’ve reduced the gap between your business and the targeted customer...
jquery 简单幻灯片
05-27
【jQuery 简单幻灯片】是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来实现平滑过渡。这个项目基于JavaScript库jQuery构建，旨在提供一个轻量级、易于定制的幻灯片解决方案。在本案例...
jQuery框架开发一个最简单的幻灯效果
GBin1.com
07-28 664
在线演示 在这个课程中，我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果。 立刻观看互动课程：jQuery框架开发一个最简单的幻灯效果 阅读原文：jQuery框架开发一个最简单的幻灯效果
最简单的jquery图片幻灯片
07-29
最简单的jquery图片幻灯片 自动图片轮播，不显示其他任何额外东西
jQuery全屏幻灯片插件finger
04-07
**jQuery全屏幻灯片插件finger详解** 在网页设计中，为了吸引用户注意力和提供良好的用户体验，全屏幻灯片已经成为一种常见的设计元素。jQuery Finger插件正是为实现这一功能而生，它是一个轻量级且易于使用的库，...
jquery简单实现幻灯片的方法
10-23
主要介绍了jquery简单实现幻灯片的方法,核心的js代码只有9行即可实现幻灯切换效果,非常简单实用,需要的朋友可以参考下
jquery图像幻灯片上下滑动图片切换
11-17
在本文中，我们将深入探讨如何使用jQuery来实现一个图像幻灯片效果，特别是上下滑动的图片切换功能。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画制作，使得创建交互式网页变得更加容易。...
Jquery幻灯片焦点图插件.rar
04-07
《jQuery幻灯片焦点图插件详解》 在网页设计中，吸引用户注意力并提供良好的用户体验至关重要。jQuery作为一款强大的JavaScript库，为实现这一目标提供了丰富的功能。本篇文章将深入探讨一个特别实用的jQuery插件...
Jquery 幻灯片
09-26
jquery 幻灯片插件，可用于广告、图片新闻等模块，默认配置就很好，带左右箭头、圆点导航和自动播放，可满足大多数要求。
js图片幻灯片 jquery幻灯片图片 html幻灯片案例
11-15
js图片幻灯片 jquery幻灯片图片 html幻灯片案例，官方以及本人的案例各有一个
基于jquery的15款幻灯片插件
12-02
1，Gallerific Galleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果，包括缩略图、图片标题和描述等详细功能，是一个非常不错的高质量画廊相册展示工具。 2，ZoomImage zoomimage ，以一种独具魅力的方式展示图片效果。缩略图链接在本页弹出大图，并且可以可以随意拖拽该悬浮图片。 3，EasySlider Easy Slider 可以实现图片或其他任意内容，在水平或垂直方向上的滑动效果，你还可以通过 CSS 自定义设置样式。 4，The Slider from Barack Obama’s website
jquery幻灯片
0day
03-13 168
htmlhtmlhtml 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>幻灯片</title> <style> body, * { font-size: 10px; } #parse span { color: #667; background-color: #fb5; }
幻灯slider
weixin_30628077的博客
10-28 112
<style> .focusBox { position: relative; width: 340px; height: 240px; overflow: hidden; font: 12px/1.5 Verdana, Geneva, sans-serif; text-align: left; background: white; }.focusBox .pic img { w...
jQuery幻灯片
qq_33840688的博客
07-18 155
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> $(function(){ var $point = $('.point') .
用jquery制作简易幻灯片
weixin_30411239的博客
10-18 146
用jquery制作简易的幻灯片。原理都比较简单，主要是css样式控制和用setInterval设置定时器。下面是最简单的幻灯片代码，用jquery制作的。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body, h1, h2, h3, h4, h5, h6, hr, p, bl...
jquery幻灯片简单实现方法
xmlife的专栏
06-04 817
jquery幻灯片简单实现方法 //<![CDATA[ $(function(){ (function(){ var curr = 0; $("#jsNav .trigger").each(function(i){ $(this).click(function(){ curr = i; $("#js img").eq(i).fadeIn("slow").sib
Jquery幻灯片 单独控制时间 鼠标悬停
最新发布
03-27
以下是一个简单的jQuery幻灯片代码，可以单独控制时间和鼠标悬停： HTML： ```html <div id="slideshow"> <ul> <li><img src="img1.jpg" alt="Image 1"></li> <li><img src="img2.jpg" alt="Image 2"></li> <li><img src="img3.jpg" alt="Image 3"></li> </ul> </div> ``` CSS： ```css #slideshow { position: relative; height: 300px; overflow: hidden; } #slideshow ul { list-style: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #slideshow ul li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } #slideshow ul li.active { opacity: 1; } ``` jQuery： ```javascript $(document).ready(function() { // 设置幻灯片的总时间 var total_time = 5000; // 初始化幻灯片 var slideshow = $("#slideshow"); var slides = slideshow.find("ul li"); var current_slide = 0; slides.eq(current_slide).addClass("active"); // 启动幻灯片定时器 var timer = setInterval(function() { // 切换到下一张幻灯片 slides.eq(current_slide).removeClass("active"); current_slide = (current_slide + 1) % slides.length; slides.eq(current_slide).addClass("active"); }, total_time); // 当鼠标悬停在幻灯片上时暂停定时器 slideshow.hover(function() { clearInterval(timer); }, function() { timer = setInterval(function() { slides.eq(current_slide).removeClass("active"); current_slide = (current_slide + 1) % slides.length; slides.eq(current_slide).addClass("active"); }, total_time); }); // 单独控制每张幻灯片的时间 var slide_times = [3000, 4000, 5000]; var slide_timers = []; for (var i = 0; i < slides.length; i++) { (function(index) { slide_timers[index] = setInterval(function() { if (index == current_slide) { slides.eq(current_slide).removeClass("active"); current_slide = (current_slide + 1) % slides.length; slides.eq(current_slide).addClass("active"); } }, slide_times[index]); })(i); } }); ``` 这个代码使用了两个定时器，一个定时器控制整个幻灯片的时间，另一个定时器控制每张幻灯片的时间。同时，当鼠标悬停在幻灯片上时，定时器会被暂停。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值