jQuery实现图片与文字描述左右滑动自动切换的方法


Posted in Javascript onJuly 27, 2015

本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法。分享给大家供大家参考。具体如下:

这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效。一边飞出一边变淡的效果非常漂亮,带小按钮。

效果图如下:

jQuery实现图片与文字描述左右滑动自动切换的方法

具体代码如下:

<!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-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>JQUERY图片切换特效带标题和描述纯JS CSS打造 - </title>
<style type="text/css">
/* YUI reset */
* {margin:0; padding:0;}
/* body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0;padding:0;} */
table {border-collapse:collapse;border-spacing:0;}
fieldset,img { border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul,li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
/* my */
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {zoom:1;}
body {color:#333; font-size:12px; font-family:Verdana,Arial,Helvetica,sans-serif;}
a {text-decoration:none; color:#333;}
a:hover {text-decoration:underline;}
.focus {width:600px; height:250px; background:#eee; margin:10px auto; position:relative; overflow:hidden;}
.focus ul {}
.focus li {width:550px; height:200px; padding:25px; position:absolute; left:600px; top:0;}
.focus li h5, .focus li p, .focus li a.button {float:left; position:relative;}
.focus li h5 {width:300px; font-size:22px; font-family:"Microsoft YaHei";}
.focus li p {width:300px; line-height:22px; font-size:14px; margin:1em 0;}
.focus li a.button {width:100px; height:30px; background:#333; cursor:pointer; display:none;}
.focus li a.button:hover {background:#666;}
.focus li div.imgBox {float:right; width:200px; height:200px; position:relative; background:#dddddd;}
.focus li div.imgBox img {width:200px; height:200px;}
.focus .btn {position:absolute; width:600px; height:6px; padding:10px; text-align:center; left:0; bottom:0;}
.focus .btn span {display:inline-block; width:10px; height:6px; background:#999; margin:0 3px;}
.focus .btn span.on {background:#000;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
 var len = $(".focus ul li").length;
 var width = 600; //整体宽度,根据此计算偏移量
 var indent = 50; //标题隐藏时往回走的一小段长度
 var index = 0;
 var picTimer;
 var btn = "<div class='btn'>";
 for(var i = 0; i < len; i++) {
 btn += "<span></span>";
 }
 btn += "</div>";
 $(".focus").append(btn);
 $(".focus .btn span").mouseenter(function() {
 index = $(".focus .btn span").index($(this));
 play(index);
 }).eq(0).trigger("mouseenter");
 $(".focus").hover(function() {
 clearInterval(picTimer);
 },function() {
 picTimer = setInterval(function() {
  play(index);
  index++;
  if(index == len) {index = 0;}
 },5000);
 }).trigger("mouseleave");
 function play(index) {
 var $now = $(".focus ul li.on");
 if($now.length > 0) {
  $now.find("h5").stop(true,true).animate({left:"-" + (width - indent) + "px"},400,function() {
  $(this).animate({left:"-"+ (2*width) +"px"},400);
  });
  $now.find("a.button").stop(true,true).fadeTo(400,0);
  var hideDelay = setTimeout(function() {
  $now.find("p").stop(true,true).animate({left:"-" + (width - indent) + "px"},400,function() {
   $(this).animate({left:"-"+ (2*width) +"px"},400);
   $now.find("div.imgBox").stop(true,true).animate({left:"-"+ (2*width) +"px"},400);
  });
  },200);
  var showDelayA = setTimeout(function() {
  show(index);
  },700);
 } else {
  show(index);
 }
 }
 function show(index) {
 var $next = $(".focus ul li").eq(index);
 $next.find("h5").css({left:"0px"});
 $next.find("p").css({left:"0px"});
 $next.find("a.button").css({left:"0px"});
 $next.find("div.imgBox").css({left:"0px"});
 $next.find("h5").stop(true,true).animate({left:"-"+ width +"px"},400);
 var showDelayB = setTimeout(function() {
  $next.find("div.imgBox").stop(true,true).animate({left:"-"+ width +"px"},300);
  $next.find("p").stop(true,true).animate({left:"-"+ width +"px"},300,function() {
  $next.find("a.button").stop(true,true).animate({left:"-"+ width +"px"},300,function() {$(this).fadeTo(400,1);});
  });
 },300); 
 $(".focus .btn span").removeClass("on").eq(index).addClass("on");
 $(".focus ul li").removeClass("on").eq(index).addClass("on");
 }
});
</script>
</head>
<body>
<div class="focus">
<ul>
 <li class="clearfix">
 <div class="imgBox"><img src="images/120713/1-120G31F439427.jpg" alt="很漂亮纯css打造的菜单导航" /></div>
 <h5>很漂亮纯css打造的菜单导航</h5>
 <p>今天在浏览一个国外网站时候发现他的网站菜单很美啊 让我情不自禁地想去偷她!渐渐地我就神志不清拿出firebug开始和她交流拉!等我偷玩后我已经爱上这款很漂亮纯css打造的菜单导航,爱微网现在无私地分享给大家!只有一个愿望:大家好好珍惜她吧大家好好珍惜她吧大家好好珍惜她吧...<a href="/zhenxmrong/">[查看详细]</a></p>
 </li>
 <li class="clearfix">
 <div class="imgBox"><img src="images/1212/1-12121Q212324Y.jpg" alt="自己做的jQuery展开收起效果" /></div>
 <h5>自己做的jQuery展开收起效果</h5>
 <p>今天唯美搭配网刚做的jquery下拉收缩特效,用jquery做的很简单,适合jquery入门者,主要用到jquery的slideToggle(),这个函数本身就是下拉收缩的最佳选择 今天刚做的jquery下拉收缩特效,用jquery做的很简单,适合jquery入门者,主要用到jquery的slideToggle(),这个函数本身就是下拉收缩的... <a href="/js_menu/162.html">[查看详细]</a></p>
 </li>
 <li class="clearfix">
 <div class="imgBox"><img src="images/120722/1-120H2102135O8.jpg" alt="QQ和淘宝在线客服JS特效" /></div>
 <h5>QQ和淘宝在线客服JS特效</h5>
 <p>QQ和淘宝在线客服JS特效左侧悬浮广告代码  美观适合企业 个人商城 淘宝商城 使用 代码很简洁 想添加QQ或淘宝在线客服 只要修改HTML标签 TABLE表格 增加和删除 把里面的参数改成自己账号对应的参数就OK拉 这款QQ在线客服 淘宝在线客服特效 大家也许见过!...<a href="/view/442.html">[查看详细]</a></p>
 </li>
</ul>
</div>
</body>
</html>

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

Javascript 相关文章推荐
Javascript技术技巧大全(五)
Jan 22 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
js 轮播效果实例分享
Dec 28 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
原生JS实现幻灯片
Feb 22 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
javascript实现类似百度分享功能的方法
Jul 27 #Javascript
纯js模拟div层弹性运动的方法
Jul 27 #Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 #Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 #Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 #Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 #Javascript
JavaScript判断IE版本型号
Jul 27 #Javascript
You might like
一步一步学习PHP(3) php 函数
2010/02/15 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
浅谈PHP的反射API
2017/02/26 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
javascript表单正则应用
2017/02/04 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
最新大学职业规划书范文
2013/12/30 职场文书
领导检查欢迎词
2014/01/14 职场文书
文明演讲稿范文
2014/05/12 职场文书
春秋淹城导游词
2015/02/11 职场文书
如何写好活动总结
2019/06/21 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
Python学习之包与模块详解
2022/03/19 Python