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获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 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
Terran兵种对照表
2020/03/14 星际争霸
PHP生成便于打印的网页
2006/10/09 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
JS实现按比例缩小图片宽高
2020/08/24 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python列表操作实例
2015/01/14 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
pandas中Timestamp类用法详解
2017/12/11 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
人事专员岗位职责范本
2014/03/04 职场文书
考核评语大全
2014/04/29 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
同意迁入证明模板
2014/10/26 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL