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 相关文章推荐
jQuery html()等方法介绍
Nov 18 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
js闭包实现按秒计数
Apr 23 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
VueJS全面解析
Nov 10 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
vue 子组件和父组件传值的示例
Sep 11 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通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
小学毕业家长寄语
2014/01/19 职场文书
党委班子对照检查材料
2014/08/19 职场文书
教师三严三实心得体会
2014/10/11 职场文书
工程部主管岗位职责
2015/02/12 职场文书
使用python创建股票的时间序列可视化分析
2022/03/03 Python
以下牛机,你有几个
2022/04/05 无线电