当前位置:首页 > jQuery技术文章 > jquery特效 幻灯片效果示例代码

jquery幻灯片效果实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:189

这篇文章主要知识点是关于jquery特效、幻灯片、jquery简单实现幻灯片的方法 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP与jQuery开发实例
  • 类型:PHP开发大小:9.8 MB格式:PDF作者:(印) 乔希 (Joshi,V.) 著,
立即下载

jquery特效 幻灯片效果示例代码

jquery特效 幻灯片效果,效果图如下:
jquery特效 幻灯片效果示例代码 
 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>jquery特效</title>
<style>
/* 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; }
table{border-collapse:collapse;border-spacing:0;}
a{ color:#333; text-decoration:none;}
.box{ width:420px; margin:20px auto; position:relative; overflow:hidden; text-align:left;}
.box img{border:0px; width:420px;}
.big{ width:100%; float:left; height:196px; overflow:hidden; margin-bottom:2px;}
.big a{ display:none;}
.big span{ position:absolute; left:0; top:167px; font-size:13px; color:#fff; z-index:11; height:30px; line-height:30px; text-indent:1em; width:100%; )}
.num{ width:424px; margin-right:-24px; float:left; height:53px; padding-top:2px;}
.num li{ width:99px; padding-top:5px; padding-left:1px; cursor:pointer; float:left; margin-right:6px;height:48px;}
.num img{ width:98px;}
.num li.on{ background:url(../images/bg01.gif) no-repeat 0 0;}
.txtbg{ position:absolute; left:0; top:167px; width:100%; height:30px; background:#000; opacity:0.5;filter:alpha(opacity=50); z-index:10;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var timer;
var i=-1;
var offset=3000;
function roll(){
i++;
if(i>3){
i=0;
}
slide(i);
timer=setTimeout(roll,offset)
}
function slide(i){
$('.big a').eq(i).fadeIn().siblings().hide();
$('.num li').eq(i).siblings().removeClass('on');
$('.num li').eq(i).addClass('on');
}
function stopBig(){
$('.big').hover(function(){
clearTimeout(timer);
},function(){
timer=setTimeout(roll,offset);
});
}
function stoproll(){
$('.num li').hover(function(){
clearTimeout(timer);
i=$(this).index();
slide(i);
},function(){
timer=setTimeout(roll,offset);
})
}
$(function(){
roll();
stoproll();
stopBig()
})
</script>
</head>
<body>
<div class="box">
<div class="txtbg"> </div>
<div class="big">
<a href="#" ><img src="images/1.jpg" /><span>标题1</span></a>
<a href="#"><img src="images/2.jpg" /><span>标题2</span></a>
<a href="#"><img src="images/3.jpg" /><span>标题3</span></a>
<a href="#"><img src="images/4.jpg" /><span>标题4/span></a>
</div>
<ul class="num">
<li class="on"><img src="images/1s.jpg" /></li>
<li><img src="images/2s.jpg" /></li>
<li><img src="images/3s.jpg" /></li>
<li><img src="images/4s.jpg" /></li>
</ul>
</div>
</body>
</html>

jquery简单实现幻灯片的方法

本文实例讲述了jquery简单实现幻灯片的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<style type="text/css">
.slide{position: relative; overflow: hidden;}
.slide img{max-width: 100%; position: absolute; left: 0; top: 0;}
.slide img:first-child{position: relative; visibility: visible;}
</style>
</head>
<body>
<div class="slide">
 <img src="images/172233f3cyzidsc8rl8irz.jpg" />
 <img src="images/172231vxzvzz2xvk92d5m0.jpg" />
 <img src="images/172228jybldywbdwdflfzm.jpg" />
 <img src="images/172223i8otbbsot8b232o5.jpg" />
</div>
<script type="text/javascript">
var size = $('.slide img').size();
var _index = size;
var timer = null;
 $('.slide').append($('.slide img:eq(0)').clone());
  timer = setInterval(function(){
    $('.slide img').eq(_index).fadeOut(800);
    _index == 1?_index=size:_index--;
    $('.slide img').eq(_index).fadeIn(800);
  },4000);
</script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

idea2020注册激活码(激活到2100年)

实例分析Java实现的zip压缩及解压缩工具类

python3 pandas 如何读取MySQL数据和插入

ThinkPHP3.2.3框架如何实现分页功能

深入理解JS函数stack size计算方法

展开 +

收起 -

jquery特效 相关电子书
学习笔记
网友NO.548115

基于jquery的网站幻灯片切换效果焦点图代码

导入jquery代码 script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"/script script src="js/jquery-image-scale-carousel.js" type="text/javascript" charset="utf-8"/script script 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").isc({ imgArray: carousel_images, autoplay: true, autoplayTimer: 5000 // 5 seconds. }); }); */ /script 样式文件css有几个 需要加载个 body { font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; color: #FFF; font-size: 12px; background: #000; } h1 { font-size: 52px; text-align: center; } h1,h2,h3,h4 { font-weight: 100; } #photo_container { width: 960px; height: 400px; margin: auto; backgr……

网友NO.787850

jquery幻灯片插件bxslider样式改进实例

本文实例讲述了jquery幻灯片插件bxslider样式改进方法,分享给大家供大家参考。具体如下: 对比了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动。 但是官方提供的显示效果真的很难看,让人难以接受。最后只能自己DIY了。 bxslider官方样式如下: 改造后的样式如下: 第一步:引入bxslider !-- jQuery library (served from Google) -- script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"/script !-- bxSlider Javascript file -- script src="/js/jquery.bxslider.min.js"/script !-- bxSlider CSS file -- link href="/lib/jquery.bxslider.css" rel="stylesheet" / !-- jQuery library (served from Google) -- script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"/script !-- bxSlider Javascript file -- script src="/js/jquery.bxslider.min.js"/script !-- bxSlider CSS file -- link href="/lib/jquery.bxslider.css" rel="stylesheet" /……

网友NO.910317

Jquery幻灯片特效代码分享--鼠标滑过按钮时切换(2)

这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,具体如下 幻灯片效果描述: 用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换。 自定义切换参数效果 :向下切换、切换时间为8秒、鼠标滑过按钮时切换 运行效果截图如下: 具体代码如下 headtitleJquery幻灯片焦点图插件/titlescript src="js/jquery-1.4a2.min.js" type="text/javascript"/scriptscript src="js/jquery.-1.2.1.min.js" type="text/javascript"/scriptscript type="text/javascript"$(function(){ $("#KinSlideshow").KinSlideshow({ moveStyle:"down", intervalTime:8, mouseEvent:"mouseover", titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} });})/scriptstyle type="text/css".code{ height:auto; padding:20px; border:1px solid #9EC9FE; background:#ECF3FD;}.code pre{ font-family:"Courier New";font-size:14px;}.code p……

网友NO.296419

jQuery配合coin-slider插件制作幻灯片效果的流程解析

今天为了做一个模板,来收集幻灯片插件,最终确定了两款比较合适的。coin-slider和nivoslider,为此,研究了一下午,从各个方面来实验这两款插件,究竟哪款比较适合、比较好。 当然,聪明的你看题目就已经知道了。我必须要吐槽一下nivoslider这个jquery插件。这两款插件,在看官方的demo时,这个插件的效果要比coin-slider好一些。看了一下教程,可以自定义的参数较多,貌似功能要更强大一下。于是我就首先研究了一下这款插件的使用方法。由于网上教程比较少,大部分都是直接复制的官方教程,我就直接拿官方的demo代码来看了。这一看,直接晕死。加载了N个css文件,以及各种图片文件,当场晕死。demo里面的代码,也是很多很乱,不是怕多、乱的代码,就怕引用的各种文件各种效果的叠加,分析起来累死个人。 干脆自己按照步骤,自己写个小demo,看……

网友NO.531983

jQuery Tools tab(幻灯片)

html !DOCTYPE html html head titlejQuery Tools standalone demo/title !-- include the Tools -- script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"/script link rel="stylesheet" type="text/css" href="./tabs-slideshow.css"/ /head body!-- "previous slide" button -- a class="backward"prev/a !-- container for the slides -- div class="images" !-- first slide -- div h3First pane/h3 p Aenean nec imperdiet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. /p p 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 neque, dapibus sit amet suscipit at, tempus sed nibh. Aliquam sagittis ligula in ligula faucibus cursus. Quisque vulputate pellentesque facilisis. /p /div !-- second slide -- div h3Second pane/h3 p Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra. /p p Vivam……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757