Méthode jQuery pour réaliser une commutation automatique entre les images et les descriptions de texte en faisant glisser vers la gauche et la droite

Méthode jQuery pour réaliser une commutation automatique entre les images et les descriptions de texte en faisant glisser vers la gauche et la droite_jquery

WBOY

Libérer： 2016-05-16 15:48:44

original

1479 Les gens l'ont consulté

L'exemple de cet article décrit comment jQuery implémente la commutation automatique entre les images et les descriptions textuelles en glissant vers la gauche et la droite. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ici, nous utilisons jQuery pour créer l'effet spécial JS de l'image de focus de défilement transparent CSS et de commutation automatique entre les images gauche et droite. L'effet de fondu au fur et à mesure qu'il s'envole est très sympa, avec le petit bouton.

Le rendu est le suivant :

Le code spécifique est le suivant :

<!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="Méthode jQuery pour réaliser une commutation automatique entre les images et les descriptions de texte en faisant glisser vers la gauche et la droite_jquery" /></div>
 <h5>Méthode jQuery pour réaliser une commutation automatique entre les images et les descriptions de texte en faisant glisser vers la gauche et la droite_jquery</h5>
 <p>今天在浏览一个国外网站时候发现他的网站菜单很美啊 让我情不自禁地想去偷她！渐渐地我就神志不清拿出firebug开始和她交流拉！等我偷玩后我已经爱上这款Méthode jQuery pour réaliser une commutation automatique entre les images et les descriptions de texte en faisant glisser vers la gauche et la droite_jquery，爱微网现在无私地分享给大家！只有一个愿望：大家好好珍惜她吧大家好好珍惜她吧大家好好珍惜她吧...<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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.