jQuery large image on the left, small image on the right, focus image slideshow switching code sharing

Home

Web Front-end

JS Tutorial

jQuery large image on the left, small image on the right, focus image slideshow switching code sharing_jquery

May 16, 2016 pm 03:44 PM

jquery focus map

This is a special effect source code for the right tab focus picture carousel animation based on jQuery. The content information of each picture can be hidden and displayed according to your own preferences. It is a cool focus picture carousel code.

The jQuery slideshow switching code for the large image on the left and the small image on the right and the focus image is as follows

---------------------Source code download View the effect---------- -------------

&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;jQuery左侧大图右侧小图切换代码 &lt;/title&gt;

&lt;link rel="stylesheet" type="text/css" href="css/index.css" media="all"&gt;

&lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;br&gt;
&lt;div class="examples_body"&gt;

 &lt;div class="examples_bg"&gt;
 
 &lt;div class="examples_image"&gt;
 &lt;img src="images/sample_banner1.jpg" alt="" /&gt;
 &lt;div class="desc"&gt;
 &lt;a href="#" class="collapse"&gt;Close Me!&lt;/a&gt;
 &lt;div class="block"&gt;
 &lt;h4&gt;脚本之家http://www.jb51.net&lt;/h4&gt;
 &lt;small&gt;脚本之家发布时间&lt;/small&gt;
 &lt;p&gt;脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。&lt;/p&gt;
 &lt;/div&gt; 
 &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;div class="mune_thumb"&gt;
 &lt;ul&gt;
 &lt;li&gt;
 &lt;a href="images/sample_banner1.jpg"&gt;&lt;img src="images/sample_banner1_thumb.jpg" alt="Image Name" /&gt;&lt;/a&gt;
 &lt;div class="block"&gt;
 &lt;h4&gt;脚本之家二号图片&lt;/h4&gt;
 &lt;small&gt;脚本之家发布时间&lt;/small&gt;
 &lt;p&gt;脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。&lt;/p&gt;
 &lt;/div&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="images/sample_banner2.jpg"&gt;&lt;img src="images/sample_banner2_thumb.jpg" alt="Image Name" /&gt;&lt;/a&gt;
 &lt;div class="block"&gt;
 &lt;h4 class="title02"&gt;脚本之家三号图片&lt;/h4&gt;
 &lt;small&gt;脚本之家发布时间&lt;/small&gt;
 &lt;p&gt;脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。&lt;/p&gt;
 &lt;/div&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="images/sample_banner3.jpg"&gt;&lt;img src="images/sample_banner3_thumb.jpg" alt="Image Name" /&gt;&lt;/a&gt;
 &lt;div class="block"&gt;
 &lt;h4 class="title03"&gt;脚本之家四号图片&lt;/h4&gt;
 &lt;small&gt;脚本之家发布时间&lt;/small&gt;
 &lt;p&gt;脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。&lt;/p&gt;
 &lt;/div&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="images/sample_banner4.jpg"&gt;&lt;img src="images/sample_banner4_thumb.jpg" alt="Image Name" /&gt;&lt;/a&gt;
 &lt;div class="block"&gt;
 &lt;h4 class="title04"&gt;脚本之家五号图片&lt;/h4&gt;
 &lt;small&gt;脚本之家发布时间&lt;/small&gt;
 &lt;p&gt;脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、网页制作、网络编程、网站建设等编程资料。&lt;/p&gt;
 &lt;/div&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;/div&gt;

&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;

Copy after login

Operation renderings:

The above is a jQuery image switching special effect code with a thumbnail tab on the right to share with you. I hope you like it.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn