新浦京81707con > 软件下载 > jQuery实现类似滑动门切换效果的层切换,幻灯片

原标题:jQuery实现类似滑动门切换效果的层切换,幻灯片

浏览次数:174 时间:2019-09-13

您大概感兴趣的稿子:

  • JQuery达成轻便的图样滑动切换特效
  • jQuery完毕的Tab滑动选项卡及图片切换(各个功力)小结
  • jQuery完成全自动切换播放的经文滑动门效果
  • jQuery达成带幻灯的tab滑动切换风格菜单代码
  • jQuery实现TAB风格的举国省份都会滑动切换效果代码
  • jQuery达成图片与文字描述左右滑动自动切换的章程
  • jQuery插件Slider Revolution完成响应动画滑动图片切换效果
  • jQuery调整作而成分展现、掩盖、切换、滑动的方法总计
  • multiSteps 基于Jquery的多步骤滑动切换插件
  • 剧情滑动切换效果jquery.hwSlide.js插件封装

附:
在线演示:
装进下载:TabDemo_jb51.rar

jquery特效 幻灯片效果,效果图如下:
图片 1 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动门切换,jQuery层切换代码</title>
<script type="text/javascript" src="//www.jb51.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li").each(function(i){
$(this).hover(function(){
$(this).addClass("bg").siblings().removeClass("bg");
$(".div:eq(" i ")").show().siblings(".div").hide();
})
})
})
</script>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px;}
ul li{ list-style:none; float:left; background-color:#999; cursor:pointer; width:100px; height:25px; line-height:25px; text-align:center;}
ul li.bg{ background-color:#9F0;}
.clr{ clear:both;}
.div{width:200px; height:60px; background:#666; line-height:60px; text-align:center;}
.none{ display:none}
</style>
</head>
<body>
<ul><li class="bg">账户音信</li><li>邮寄地址</li></ul>
<div class="clr"></div>
<div class="div">
第一个div内容
</div>
<div class="div none">
第二个div内容
</div>
</body>
</html>

 js:

你大概感兴趣的篇章:

  • jQuery旋转木马式幻灯片轮播特效
  • 听大人讲Jquery代码达成协助PC端手提式有线电话机端幻灯片代码
  • jquery轻巧贯彻幻灯片的章程
  • jQuery插件animateSlide制作多点滑动幻灯片
  • jQuery插件Skippr达成大旨图幻灯片特效
  • jQuery插件slick完结响应式移动端幻灯片图片切换特效
  • jquery幻灯片插件bxslider样式立异实例
  • Jquery图片滚动与幻灯片的实例代码
  • jQuery Tools tab(幻灯片)
  • jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)

复制代码 代码如下:

css:

<!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="#" style="display:block"><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>

html:

复制代码 代码如下:

本文由新浦京81707con发布于软件下载,转载请注明出处:jQuery实现类似滑动门切换效果的层切换,幻灯片

关键词: 新浦京81707con

上一篇:【奥门新浦京8867】jQuery中extend函数详解,的简单

下一篇:没有了