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 jQuery $.post $.ajax用法
Jul 09 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
Javascript复制实例详解
2016/01/28 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
8种常用的Python工具
2020/08/05 Python
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
致1500米运动员广播稿
2014/02/07 职场文书
企业宣传策划方案
2014/05/29 职场文书
党员民主生活会材料
2014/12/15 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle