jQuery满屏焦点图左右滚动特效代码分享

前端技术 2023/09/06 JavaScript

本文实例讲述了jQuery横向擦除焦点图特效。分享给大家供大家参考。具体如下：
jQuery焦点图是一款满屏左右滚动，带左右按钮，带缩略图，支持自动轮播的焦点图代码。
运行效果图：        -------------------查看效果 下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的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\" />
<title>住趣家居网满屏jQuery焦点图</title>
<link href=\"css/home.css\" rel=\"stylesheet\" />
<script src=\"js/jquery.js\" type=\"text/javascript\"></script>
<script src=\"js/home.js\" type=\"text/javascript\"></script>
</head>
<body>
<div class=\"zq_homeView\" id=\"jobs_home_homeView\">
 <div class=\"zq_pictureBox\" node-type=\"pictureBox\">
  <div class=\"zq_pictures\" node-type=\"pictures\">
   <a node-type=\"picItem\" href=\"http://www.phpstudy.net/jiaoben/\" target=\"_blank\"><img alt=\"厨房收纳整理工具\" src=\"images/5.jpg\" /></a>
   <a node-type=\"picItem\" href=\"http://www.phpstudy.net/jiaoben/\" target=\"_blank\"><img alt=\"百搭落地灯\" src=\"images/1.jpg\" /></a>
   <a node-type=\"picItem\" href=\"http://www.phpstudy.net/jiaoben/\" target=\"_blank\"><img alt=\"百搭落地灯\" src=\"images/2.jpg\" /></a>
   <a node-type=\"picItem\" href=\"http://www.phpstudy.net/jiaoben/\" target=\"_blank\"><img alt=\"清新格子床品\" src=\"images/3.jpg\" /></a>
   <a node-type=\"picItem\" href=\"http://www.phpstudy.net/jiaoben/\" target=\"_blank\"><img alt=\"特色墙纸壁纸\" src=\"images/4.jpg\" /></a>
   <a node-type=\"picItem\" href=\"http://www.phpstudy.net/jiaoben/\" target=\"_blank\"><img alt=\"开放式简约现代一居室装修\" src=\"images/5.jpg\" /></a>
   <a node-type=\"picItem\" href=\"http://www.phpstudy.net/jiaoben/\" target=\"_blank\"><img alt=\"厨房收纳整理工具\" src=\"images/1.jpg\" /></a>
  </div>
  <div class=\'zq_mask zq_maskLeft\' node-type=\"maskLeft\"></div>
  <div class=\'zq_mask zq_maskRight\' node-type=\"maskRight\"></div>
 </div>
 <div class=\"zq_imgBox\">
  <div class=\"zq_imgs clearfix\">
   <a node-type=\"smallPic\" target=\"_blank\" data-index=\"1\" href=\"http://www.phpstudy.net/jiaoben/\" class=\"currentImg\"><img alt=\"百搭落地灯\" src=\"images/1.jpg\" /></a>
   <a node-type=\"smallPic\" target=\"_blank\" data-index=\"2\" href=\"http://www.phpstudy.net/jiaoben/\"><img alt=\"清新格子床品\" src=\"images/2.jpg\" /></a>
   <a node-type=\"smallPic\" target=\"_blank\" data-index=\"3\" href=\"http://www.phpstudy.net/jiaoben/\"><img alt=\"特色墙纸壁纸\" src=\"images/3.jpg\" /></a>
   <a node-type=\"smallPic\" target=\"_blank\" data-index=\"4\" href=\"http://www.phpstudy.net/jiaoben/\"><img alt=\"开放式简约现代一居室装修\" src=\"images/4.jpg\" /></a>
   <a node-type=\"smallPic\" target=\"_blank\" data-index=\"5\" href=\"http://www.phpstudy.net/jiaoben/\"><img alt=\"厨房收纳整理工具\" src=\"images/5.jpg\" /></a>
  </div>
  <div class=\"zq_slides\">
   <a href=\"javascript:;\" class=\"zq_slideLeft\" action-type=\"prev\"><em> </em></a>
   <a href=\"javascript:;\" class=\"zq_slideRight\" action-type=\"next\"><em> </em></a>
  </div>
 </div>
</div>
<div style=\"text-align:center;clear:both\">
</div>
</body>
</html>

以上就是为大家分享的jQuery满屏焦点图左右滚动特效代码，希望大家可以喜欢，并应用到实践中。

本文地址：https://www.stayed.cn/item/15285

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案