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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
js实现筛选功能
Nov 24 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
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
Yii快速入门经典教程
2015/12/28 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
validform表单验证的实现方法
2019/03/08 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
Python多线程学习资料
2012/12/19 Python
Python实现获取网站PR及百度权重
2015/01/21 Python
Python写的英文字符大小写转换代码示例
2015/03/06 Python
深入解析Python中的上下文管理器
2016/06/28 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python3 字符串知识点学习笔记
2020/02/08 Python
少年闰土教学反思
2014/02/22 职场文书
三年级小学生评语
2014/04/22 职场文书
团拜会策划方案
2014/06/07 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
投资申请报告
2015/05/19 职场文书
工资证明格式模板
2015/06/12 职场文书
团干部培训班心得体会
2016/01/06 职场文书