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 相关文章推荐
js中更短的 Array 类型转换
Oct 30 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
小程序实现列表倒计时功能
Jan 29 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支持页面回退的两种方法
2008/01/10 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
PHP运行模式的深入理解
2013/06/03 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
初识PHP中的Swoole
2016/04/05 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
layui 表格的属性的显示转换方法
2018/08/14 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
财务管理个人自荐书范文
2013/11/24 职场文书
租房协议书
2014/04/10 职场文书
幼儿教师求职信
2014/05/24 职场文书
测绘工程专业求职信
2014/07/15 职场文书
房屋租赁协议书
2014/10/18 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
欢送领导祝酒词
2015/08/12 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
MySQL中连接查询和子查询的问题
2021/09/04 MySQL