Home>

This is a javascript-based image carousel special effect code.The implementation process is simple.

Tip:If the browser does not work properly,Try switching the browsing mode.

Introduce css style in the head area:

<link href="css/jb51.net.css" rel="stylesheet" type="text/css">

The 5 screen rotation focus map special effects code with thumbnails for everyone to share is as follows

<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>js 5-screen rotation focus map with thumbnails</title>
<link href="css/jb51.net.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/show.js"></script>
</head>
<body>
<div>
   <div></div>
   <div><img src="images/loading.gif" width="78" height="8" /></div>
   <table border="0" cellpadding="0" cellspacing="0" summary="fullsize image">
    <tr>
     <td><div>
       <div>
        <div>
         <div><a href="javascript:;"><img src="images/biaozhi.gif" name="p7ssm_im" width="390" height="245" border="0" /> ;</a></div>
         <div></div>
        </div>
       </div>
      </div></td>
    </tr>
   </table>
   <div>
    <div>
     <div>
      <div>
       <ul><!-Start of modification->
        <li><a href="images/001.jpg">
  <img src="images/001.jpg" width="390" height="245" /></a>
         <div>"Fuwa Olympic Tour" won the best work award of the animation contest</div>
        </li>
        <li><a href="images/002.jpg">
  <img src="images/002.jpg" width="390" height="245" /></a>
         <div>Super illustration design 3D robot combined with plane</div>
        </li>
        <li><a href="images/003.jpg">
  <img src="images/003.jpg" width="390" height="245" /></a>
         <div>Clean and comfortable xp desktop wallpaper Easy and pleasant environment</div>
        </li>
        <li><a href="images/004.jpg">
  <img src="images/004.jpg" width="390" height="245" /></a>
         <div>Three-dimensional design of interior decoration Create simple and comfortable</div>
        </li>
        <li><a href="images/005.jpg">
  <img src="images/005.jpg" width="390" height="245" /></a>
         <div>The world's breathtakingly simulated robot</div>
        </li>
       <!-End of modification-></ul>
       <br />
      </div>
     </div>
    </div>
   </div>
   <div>
    <div><a href="#">new image set</a></div>
    <div><span>move</span></div>
    <div>
     <table summary="thumbnail preview">
      <tr>
       <td><img src="images/biaozhi.gif" />
      </tr>
     </table>
    </div>
    <div>
     <table border="0" cellpadding="0" cellspacing="0" summary="slideshow toolbar">
      <tr>
       <td><div><a href="#"><em>navigate</em></a>
         <div>
          <div>
           <ul>
            <li></li>
           </ul>
          </div>
         </div>
        </div></td>
       <td><a href="#"><em>hide thumbs</em></a></td>
       <td><a href="#"><em>first</em></a></td>
       <td><a href="#"><em>previous</em></a></td>
       <td><a href="#"><em>pause</em></a></td>
       <td><a href="#"><em>next</em></a></td>
       <td><a href="#"><em>last</em></a></td>
       <td><div>
         <div><a href="#"><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>
  • Previous Teach you 8 days to learn MongoDB-the first day of basics
  • Next The effect of the pull-down zoom-in and pull-up blur of the view in iOS development