js带缩略图的图片轮播效果代码分享


Posted in Javascript onSeptember 14, 2015

本文实例讲述了js带缩略图的图片轮播效果。分享给大家供大家参考。具体如下:
这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单。
运行效果图:-------------------查看效果 下载源码-------------------

js带缩略图的图片轮播效果代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
在head区域引入CSS样式:

<link href="css/3water.com.css" rel="stylesheet" type="text/css" >

为大家分享的JS带缩略图的5屏轮换焦点图特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS带缩略图的5屏轮换焦点图</title>
<link href="css/3water.com.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="js/show.js"></script>
</head>

<body>
<div id="p7ssm">
   <div id="p7ssm_cf"> </div>
   <div id="p7ssm_loading"><img src="images/loading.gif" alt="" width="78" height="8" /></div>
   <table id="p7ssm_fstbl" border="0" cellpadding="0" cellspacing="0" summary="Fullsize Image">
    <tr>
     <td><div id="p7ssm_fullsize">
       <div id="p7ssm_fsc">
        <div id="p7ssm_fsw">
         <div id="p7ssm_fsimg"><a href="javascript:;" id="p7ssm_fslink"><img src="images/biaozhi.gif" alt="" name="p7ssm_im" width="390" height="245" border="0" id="p7ssm_im" /></a></div>
         <div id="p7ssm_description"></div>
        </div>
       </div>
      </div></td>
    </tr>
   </table>
   <div id="p7SSMwhmb">
    <div id="p7ssm_thumbs">
     <div id="p7SSMwp_1">
      <div class="p7ssm_thumb_section">
       <ul><!-- 修改内容开始 -->
        <li><a href="images/001.jpg">
  <img src="images/001.jpg" alt="《福娃奥运漫游记》获动漫大赛最佳作品奖" width="390" height="245" /></a>
         <div class="p7ssm_lk"><a href="https://3water.com/">点击查看详情</a></div>
         <div class="p7ssm_fd">《福娃奥运漫游记》获动漫大赛最佳作品奖</div>
        </li>
        <li><a href="images/002.jpg">
  <img src="images/002.jpg" alt="超级插画设计 3D机器人与平面相结合" width="390" height="245" /></a>
         <div class="p7ssm_lk"><a href="https://3water.com/">点击查看详情</a></div>
         <div class="p7ssm_fd">超级插画设计 3D机器人与平面相结合</div>
        </li>
        <li><a href="images/003.jpg">
  <img src="images/003.jpg" alt="洁净舒适的XP桌面壁纸 轻松愉快的环境" width="390" height="245" /></a>
         <div class="p7ssm_lk"><a href="https://3water.com/">点击查看详情</a></div>
         <div class="p7ssm_fd">洁净舒适的XP桌面壁纸 轻松愉快的环境</div>
        </li>
        <li><a href="images/004.jpg">
  <img src="images/004.jpg" alt="室内装修三维设计 创造简洁舒适" width="390" height="245" /></a>
         <div class="p7ssm_lk"><a href="https://3water.com/">点击查看详情</a></div>
         <div class="p7ssm_fd">室内装修三维设计 创造简洁舒适</div>
        </li>
        <li><a href="images/005.jpg">
  <img src="images/005.jpg" alt="世界上令人叹为观止的仿真的机器人" width="390" height="245" /></a>
         <div class="p7ssm_lk"><a href="https://3water.com/">点击查看详情</a></div>
         <div class="p7ssm_fd">世界上令人叹为观止的仿真的机器人</div>
        </li>
       <!-- 修改内容结束 --></ul>
       <br class="p7ssm_clearThumbs" />
      </div>
     </div>
    </div>
   </div>
   <div id="p7ssm_toolbar">
    <div class="p7ssm_sectionTrigger"><a id="p7SSMtp_1" href="#">New Image Set</a></div>
    <div id="p7ssm_dragbar" title="Move"><span>Move</span></div>
    <div id="p7ssm_preview">  
     <table summary="Thumbnail Preview">
      <tr>
       <td><img src="images/biaozhi.gif" alt="" /></td>
      </tr>
     </table>
    </div>
    <div id="p7ssm_tools">
     <table border="0" cellpadding="0" cellspacing="0" summary="Slideshow Toolbar">
      <tr>
       <td><div id="p7ssm_nav_wrapper"><a id="p7SSMtnav" href="#" title="Menu"><em>Navigate</em></a>
         <div id="p7SSMwnav">
          <div id="p7ssm_navList">
           <ul>
            <li></li>
           </ul>
          </div>
         </div>
        </div></td>
       <td><a href="#" title="Hide or Show Thumbnails" id="p7SSMthmb"><em>Hide Thumbs</em></a></td>
       <td><a href="#" id="p7ssm_first" title="First Image"><em>First</em></a></td>
       <td><a href="#" id="p7ssm_prev" title="Previous Image"><em>Previous</em></a></td>
       <td><a href="#" id="p7ssm_pp" class="p7ssm_pause" title="Pause"><em>Pause</em></a></td>
       <td><a href="#" id="p7ssm_next" title="Next Image"><em>Next</em></a></td>
       <td><a href="#" id="p7ssm_last" title="Last Image"><em>Last</em></a></td>
       <td><div id="p7ssm_slidechannel">
         <div id="p7ssm_slider"><a href="#" id="p7ssm_slidebar" title="Speed:"><em>Set Speed</em></a></div>
                 </div></td>
        </tr>
     </table>
    </div>
   </div>
<!--[if IE 7]>
<style>
#p7ssm, #p7ssm div {zoom: 1;}
</style><![endif]-->
<!--[if IE 6]><style>
#p7ssm a, #p7ssm, #p7ssm div, #p7ssm_thumb_wrapper {zoom: 1;}
.p7ssm_thumb_section {padding-right: 0; padding-left: 0;}
.p7ssm_thumb_section a {float: left;}
</style><![endif]-->
<!--[if IE 5]><style>
#p7ssm {}
.p7ssm_sectionTrigger {text-align: left;}
#p7ssm_navList li {float: left; clear:both; width: 100%;}
#p7ssm, #p7ssm_w1, #p7ssm_w2, #p7ssm_description, #p7ssm_preview,
#p7ssm_navList a, .p7ssm_sectionTrigger a, #p7ssm_thumbs,
.p7ssm_thumb_section, #p7ssm_fsw {height: 1%;}
.p7ssm_thumb_section {padding: 0;}
</style><![endif]-->
<!--[if IE 5.5000]><style>
#p7ssm, #p7ssm_w1, #p7ssm_w2 {zoom: 1;}
</style><![endif]-->
<script type="text/javascript">
<!--
P7_SSMinit(1,1,1,1,0,1,1,1,5);
//-->
</script>
</div>

<br><br>
<div align="center">
 <p align="center"></p>
 <p align="center"></p>
 <p> </p>
</div>
</body>
</html>

以上就是为大家分享的js带缩略图的图片轮播效果代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
js常见表单应用技巧
Jan 09 Javascript
CSS常用网站布局实例
Apr 03 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
node 命令方式启动修改端口的方法
May 12 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 #Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 #Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 #Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 #Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 #Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 #Javascript
JS实现可关闭的对联广告效果代码
Sep 14 #Javascript
You might like
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php动态生成函数示例
2014/03/21 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
python实现合并两个数组的方法
2015/05/16 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
pandas的qcut()方法详解
2019/07/06 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
Hammitt官网:设计师手袋
2020/05/23 全球购物
网络工程专业自荐信范文
2014/03/16 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
毕业生找工作求职信
2014/08/05 职场文书
个人年终总结范文
2015/03/09 职场文书
2015年统战工作总结
2015/05/19 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
HttpClient实现文件上传功能
2022/08/14 Java/Android