jQuery 小案例图片切换

最新推荐文章于 2022-04-09 16:16:24 发布
最新推荐文章于 2022-04-09 16:16:24 发布
阅读量535 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mz_shenbian/article/details/8811042
本博客展示了新款时尚男装，并提供了关注功能。通过左右箭头，用户可以浏览不同款式，点击图片即可查看详细信息。

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

<html>
<head>
<meta charset="utf-8" />
<title>jQuery 小案例</title>
<style>
.p{ color:#F00;}
</style>
<link rel="stylesheet" href="styles/main.css" type="text/css"/>
<link rel="stylesheet" href="styles/index.css" type="text/css"/>
<script src="script/jquery-1.4.2.min.js"></script>
<script>

$(function(){
var $width=$("#div1").width();
var $div=$(".prolist_content");
var $page=1;
var $imgs=$(".prolist_content ul li").length;
var $pagesize=4;
var $page_cont=Math.ceil($imgs/$pagesize)
$(".goLeft").click(function(){
if($page==$page_cont){
 $div.stop(true,true).animate({'left':0},600);
 $page=1;
}else{
$div.animate({'left':'-='+$width+'px'},600);
$page++;
}
});
//向右移动
$(".goRight").click(function(){
if($page==1){
$div.animate({'left':'-='+$width*($page_cont-1)+'px'},600);
$page=$page_cont;
}else{
$div.animate({'left':'+='+$width+'px'},600);
$page--;
}
})
})
</script>
<script>
$(function(){
$(".guanzhu").toggle(function(){
//alert("aa");
$(this).css("color","green").text("已关注");
return false;
},function(){
$(this).css("color","green").text("关注");
return false;
})
})
</script>
</head>
<body>
<div class="content_right">
<div class="global_module prolist" id="div1">
<h3>新款上市</h3>
            <div  class="prolist_content">
                <ul>
                    <li>
                        <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>嘻嘻</span><span><p  class="guanzhu" ><font color="#FF0000">关注</font></p></span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span><p  class="guanzhu" ><font color="#FF0000">关注</font></p></span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬</span><span><p  class="guanzhu" ><font color="#FF0000">关注</font></p></span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span>
                    </li>
                        <li>
                        <a href="detail.html"><img src="images/img_5.jpg" alt="" /></a><span>免烫高支棉衬衣2</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="images/img_6.jpg" alt="" /></a><span>免烫斜纹衬</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="images/img_7.jpg" alt="" /></a><span>棉小方格正装衬衣</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="images/img_8.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span>
                    </li>
                        <li>
                        <a href="detail.html"><img src="images/img_9.jpg" alt="" /></a><span>免烫高支棉衬衣3</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="images/img_10.jpg" alt="" /></a><span>免烫斜纹衬</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="images/img_11.jpg" alt="" /></a><span>棉小方格正装衬</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="images/img_12.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span>
                    </li>
                </ul>
            </div>
            <p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p>
</div>
   </div> 
</body>
</html>
mz_shenbian
关注
jQuery经典小案例
娃娃的博客
03-29 1万+
目录 下拉菜单案例 突出展示案例 淘宝精品案例 京东呼吸灯案例 tab栏切换案例 手风琴案例 城市选择案例 微博发布案例 弹幕效果案例 固定导航栏案例 小火箭返回顶部案例 音乐导航栏案例 下拉菜单案例 效果图： 源代码： 鼠标进入事件mouseenter 鼠标离开事件mouseleave 下拉动画slideDown /slid...
jquery手风琴实现图片切换
06-10
本教程将详细讲解如何利用jQuery实现一个手风琴式的图片切换效果，该效果同时具备自动播放和手动播放功能，用户可以通过点击文字来控制图片的切换。 首先，我们需要在HTML中设置基本的结构。手风琴效果通常涉及到可...
jquery图片切换案例
04-08
9种jquery图片切换案例，不用学，非常容易套用，下载下来就是自己的积累。
jQuery插件图片列表切换实例
06-21
通过jquery插件实现图片列表切换，希望对你们有所帮助
jquery 操作 img
y_h_t的专栏
06-26 5782
jquery 操作 img，jquery 操作 image
jquery 替换img 属性
weixin_30480583的博客
12-22 553
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title></tit...
jQuery案例:鼠标经过切换图片
m0_63400611的博客
03-09 697
代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 12px;
jQuery 实现图片手风琴切换效果案例
逆风优雅的博客
06-09 610
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title&...
jQuery：案例5 图片切换
willard_cui的博客
08-08 1046
动画：点击左右按钮实现图片切换 jQuery方法：animate(), stop(), first(), last(), siblings(), appendTo(), prependTo(), attr(), addClass(), removeClass(), eq() 动画效果： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;h...
jQuery插件实现图片墙小案例
qq_49002903的博客
11-09 1121
你想写出绚丽多彩的图片墙吗？想的话就来一起看一下接下来的内容吧 接下来就让我们使用两个简单的插件来实现图片墙小案例吧。编写之前需要提前下载lazyload懒加载插件和masonry瀑布流式布局插件。（百度可以搜到呦！） 1、使用的核心方法 ​ a. 懒加载插件 – lazyload()方法 ​ b.瀑布流插件 – masonry()方法 2、核心问题 必须保证所有图片延迟加载完毕后,才能实现瀑布流效果。 解决这个问题可以使用load方法，等懒加载图片加载完毕后，实现瀑布流效果。 具体实现代码如下： &lt
案例 jQuery 实现 图片框切换【与原生 JS 对比】
weixin_52212950的博客
04-09 1321
我们学习原生 JS 时，写过一个图片框切换的案例，还记得采用的是什么方法做到导航栏和内容栏同步切换吗？用的是自定义属性的创建和获取，比较麻烦，我们还要使用for循环遍历绑定事件，但是学了 jQuery 之后，虽然只是入门，但以及可以完成一些基本的动态效果。 我们来对比一下二者的实现部分： 原生 JS： 原生 JS 就是在循环给每一个 li 绑定鼠标移动事件时使用setAttribute 设置一个自定义属性 index，然后绑定移动事件时使用 getAttri...
非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip
08-12
jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) jquery仿苏宁易购商城产品图片全方位展示功能 jquery制作漂亮按钮示例打包 jQuery动态切换网页背景的大块图片的导航栏代码 jquery图文排行混合互相切换...
jQuery带箭头的图片滑动切换代码
06-24
然后，编写JavaScript代码实现图片切换功能。`jiaoben4684.js`中，我们添加以下内容： ```javascript $(document).ready(function() { var $slider = $('#slider'); var $slides = $slider.find('.slide'); var ...
jquery手机端图片切换效果
04-07
"jquery手机端图片切换效果"就是一种专为手机屏幕设计的、利用jQuery库实现的动态图片展示方案。这种效果通常用于制作手机端的banner（横幅）或焦点图，使用户能够轻松浏览一系列图片，而无需手动滑动或点击。 ...
jQuery案例
qq_52476758的博客
03-09 7116
1. 开关灯(jquery与dom对象转换案例)2. 下拉菜单(选择器案例)3. 突出展示(选择器案例)4. 手风琴(选择器案例)5. 淘宝服饰精品(选择器案例)6. tab栏切换(class操作案例)7. 下拉菜单(滑入与滑出案例)8. 360开机动画(自定义动画案例)9. 生成表格(动态创建元素案例)10. 城市选择(节点创建案例)11. 表格删除(清空和移除节点案例)12. 动态数据添加和删除(val()方法案例)13. 美女相册(操作属性案例)14. 表格全选反选(prop()方法案例)15. 固.
虚拟同步电机Simulink仿真与并电网模型仿真：参数设置完毕，可直接使用 - 电力电子
08-09
如何利用Simulink对虚拟同步电机(Virtual Synchronous Generator,VSG)及其并电网模型进行仿真。首先概述了Simulink作为MATLAB的一部分，在电力电子仿真中的重要地位。接着阐述了虚拟同步电机的建模步骤，涵盖机械、电气和控制三个部分，并强调了参数设置对仿真精度的影响。然后讨论了并电网模型的构建方法，涉及电网结构、电压等级、线路阻抗等要素。随后讲解了参数设置的具体流程，包括电机初始状态、控制策略、并电网电压电流等。最后探讨了通过MATLAB编写控制策略和数据分析代码的方法，以及如何基于仿真结果评估电机性能和电网稳定性。 适合人群：从事电力电子领域研究的专业人士，尤其是那些对虚拟同步电机和并电网仿真感兴趣的工程师和技术人员。 使用场景及目标：适用于需要深入了解虚拟同步电机工作原理和并电网运行规律的研究项目。目标是在掌握Simulink仿真技巧的基础上，优化电机性能，提高电网稳定性。 阅读建议：由于涉及到大量的理论知识和技术细节，建议读者先熟悉Simulink的基本操作和相关电力电子基础知识，再逐步深入理解和实践文中提到的各种仿真技术和方法。
西门子Smart200 PLC控制V90伺服实现绝对定位与速度控制及PN通信调试
最新发布
08-09
如何使用西门子Smart200 PLC控制两台V90伺服电机，实现绝对定位和速度控制的功能。文中涵盖了硬件组态、关键代码段、通信配置以及触摸屏设计要点，并提供了详细的调试说明和常见问题解决方案。主要内容包括：硬件连接方式、运动控制指令库的应用、IO映射配置、触摸屏界面设计、以及具体的调试步骤和注意事项。 适合人群：从事自动化控制系统设计与维护的技术人员，尤其是对西门子PLC和伺服系统有一定了解的工程师。 使用场景及目标：适用于工业自动化项目中需要精确控制伺服电机的位置和速度的情况。目标是帮助工程师快速掌握Smart200 PLC与V90伺服系统的集成方法，确保系统稳定可靠地运行。 其他说明：文中还提到了一些实用技巧，如坐标系转换设置、通信稳定性优化措施等，有助于提高项目的实施效率和成功率。
基于Maxwell方程的静电场电位分布研究及其工程应用 · Maxwell方程
08-09
Maxwell方程在静电场电位分布研究中的应用。首先阐述了Maxwell方程组作为描述电磁场基本工具的重要性，接着具体分析了静电场中电场强度和电位分布的特点，特别是在不同电介质环境下的表现。文中还讨论了电位分布受地形、地貌、天气等因素的影响，并通过实际案例展示了静电场电位分布在电力传输等工程领域的应用。最后强调了准确描述静电场电位分布对于确保电力传输稳定性和安全性的重要意义。 适合人群：从事电气工程、物理学及相关领域的研究人员和工程师。 使用场景及目标：适用于需要理解和解决静电场电位分布相关问题的研究和工程项目，如电力传输系统的设计与优化。 其他说明：本文不仅提供了理论分析，还结合了实际案例，有助于读者更好地理解Maxwell方程在静电场电位分布中的应用。
elasticsearch-5.3.2.jar中文文档.zip
08-09
1、压缩文件中包含： 中文文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
9种jQuery图片切换案例，轻松套用成自己的积累
从提供的文件信息中，我们可以了解到这是一份关于“jquery图片切换案例”的资源包。为了满足要求，我们将从标题、描述、标签以及压缩包子文件的文件名称列表中提取相关知识点，并详细说明这些知识点。 ### 知识点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值