jQuery焦点图切换特效代码分享


Posted in Javascript onSeptember 15, 2015

本文实例讲述了jQuery焦点图切换特效。分享给大家供大家参考。具体如下:
这是一款网易保健品商城网站的jQuery焦点图代码,界面简洁、时尚、大方,通用性比较强,实现过程很简单。
运行效果图:      -------------------查看效果 下载源码-------------------

jQuery焦点图切换特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
在head区域引入CSS样式:

<link rel="stylesheet" href="css/zzsc.css"/>

为大家分享的jQuery焦点图切换特效代码如下

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery焦点图</title>
<link rel="stylesheet" href="css/zzsc.css"/>
<script src="js/jquery-1.4.2.js"></script>
<script src="js/easyCore.js"></script>
</head>
<body>
<center>
 <div class="fright cleafix">
  <section id="picBox" class="sliderBox">
   <ul id="show_pic">
    <li><a target="_blank" href="https://3water.com/jiaoben/"><img src="images/hoqk6ne310002.jpg" width="710" height="280" border="0" /></a></li>
    <li class="hide"><a target="_blank" href="https://3water.com/jiaoben/"><img src="images/hmu2bby910001.jpg" width="710" height="280" border="0" /></a></li>
    <li class="hide"><a target="_blank" href="https://3water.com/jiaoben/"><img src="images/hne5kxga10001.jpg" width="710" height="280" border="0" /></a></li>
    <li class="hide"><a target="_blank" href="https://3water.com/jiaoben/"><img src="images/hlw1vdep10003.jpg" width="710" height="280" border="0" /></a></li>
    <li class="hide"><a target="_blank" href="https://3water.com/jiaoben/"><img src="images/hp92wuht10001.jpg" width="710" height="280" border="0" /></a></li>
    <li class="hide"><a target="_blank" href="https://3water.com/jiaoben/"><img src="images/hp0i5srm10022.jpg" width="710" height="280" border="0" /></a></li>
   </ul>
  </section>
<script src="js/index.js"></script>
</center>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

以上就是为大家分享的jQuery图片轮播特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
vue实现搜索过滤效果
May 28 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
详解vue 组件注册
Nov 20 Vue.js
js面向对象方式实现拖拽效果
Mar 03 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 #Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 #Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 #Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 #Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 #Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 #Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 #Javascript
You might like
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
关于Python的一些学习总结
2018/05/25 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
益模软件Java笔试题
2012/03/27 面试题
客服服务心得体会
2013/12/30 职场文书
寒假思想汇报
2014/01/10 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
面试自我评价范文
2014/09/17 职场文书
年会主持人开场白台词
2015/05/29 职场文书
员工离职证明范本
2015/06/12 职场文书
公司车辆管理制度
2015/08/04 职场文书
Go 中的空白标识符下划线
2022/03/25 Golang