jQuery带缩略图轮播效果图片切换带缩略图

最新推荐文章于 2024-06-26 11:48:50 发布

转载

最新推荐文章于 2024-06-26 11:48:50 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangweiaiweb/p/10202072.html

文章标签：

#javascript #json #5g #ViewUI

该博客介绍了如何利用jQuery创建一个带有缩略图的图片轮播效果，包括HTML结构、CSS样式和jQuery代码实现的详细步骤。提供了一个简单的javascript示例，并分享了相关资源文件如jquery.js和slide.js。文章最后鼓励读者如果喜欢可以点赞支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以上为效果图

HTML代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>

        <link rel=stylesheet type=text/css href="css/lrtk.css">
<script type=text/javascript src="js/jquery.js"></script>
<script type=text/javascript src="js/slide.js"></script>

    </head>

    <body style="text-align:center">

<div style="height: 560px; padding-top: 20px" class="wrap picshow"><!--大图轮换区-->
<div id=picarea>
<div style="margin: 0px auto; width: 774px; height: 436px; overflow: hidden">
<div style="margin: 0px auto; width: 774px; height: 436px; overflow: hidden" id=bigpicarea>
<p class=bigbtnprev><span id=big_play_prev></span></p>
<div id=image_xixi-01 class=image><a href="http://www.lanrentuku.com/" target=_blank><img alt="" 
src="images/42766101.jpg" width=772 height=434></a> 
<div class=word>
<h3>舞动青春</h3></div></div>
<div id=image_xixi-02 class=image><a href="http://www.lanrentuku.com/" target=_blank><img alt="" 
src="images/42813100.jpg" width=772 height=434></a> 
<div class=word>
<h3>台球厅的生活</h3></div></div>
<div id=image_xixi-03 class=image><a href="http://www.lanrentuku.com/" target=_blank><img alt="" 
src="images/42813102.jpg" width=772 height=434></a> 
<div class=word>
<h3>采访进行中</h3></div></div>
<div id=image_xixi-04 class=image><a href="http://www.lanrentuku.com/" target=_blank><img alt="" 
src="images/42813139.jpg" width=772 height=434></a> 
<div class=word>
<h3>美女代言人</h3></div></div>
<div id=image_xixi-05 class=image><a href="http://www.lanrentuku.com/" target=_blank><img alt="" 
src="images/42766145.jpg" width=772 height=434></a> 
<div class=word>
<h3>红色经典</h3></div></div>
<div id=image_xixi-06 class=image><a href="http://www.lanrentuku.com/" target=_blank><img alt="" 
src="images/42766146.jpg" width=772 height=434></a> 
<div class=word>
<h3>回眸</h3></div></div>
<div id=image_xixi-07 class=image><a href="http://www.lanrentuku.com/" target=_blank><img alt="" 
src="images/42766159.jpg" width=772 height=434></a> 
<div class=word>
<h3>眩光的诱惑</h3></div></div>