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 相关文章推荐
JavaScript修改css样式style
Apr 15 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
原生js 秒表实现代码
2012/07/24 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
利用python循环创建多个文件的方法
2018/10/25 Python
python的sorted用法详解
2019/06/25 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
Etam德国:内衣精品店
2019/08/25 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
西式婚礼证婚词
2014/01/12 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
大学生工作自荐书
2014/06/16 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
上下班时间调整通知
2015/04/23 职场文书
公司转让协议书
2016/03/19 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript