基于jquery的网站幻灯片切换效果焦点图代码


Posted in Javascript onSeptember 15, 2013

导入jquery代码

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
 <script src="js/jquery-image-scale-carousel.js" type="text/javascript" charset="utf-8"></script>
 <script>
  var carousel_images = [
   "images/01.jpg",
   "images/02.jpg",
   "images/03.jpg",
   "images/04.jpg",
   "images/05.jpg",
   "images/06.jpg",
   "images/07.jpg"
  ];  // Example without autoplay
  $(window).load(function() {
   $("#photo_container").isc({
    imgArray: carousel_images
   }); 
  });
  // Example with autoplay
  /* $(window).load(function() {
   $("#photo_container").isc({
    imgArray: carousel_images,
    autoplay: true,
    autoplayTimer: 5000 // 5 seconds.
   }); 
  }); */
 </script>

样式文件css有几个 需要加载个
body {
 font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
 color: #FFF;
 font-size: 12px;
 background: #000;
}
h1 {
 font-size: 52px;
 text-align: center;
}
h1,h2,h3,h4 {
 font-weight: 100;
}
#photo_container {
 width: 960px;
 height: 400px;
 margin: auto;
 background-color: #000;
}
p {
 text-align: center;
}
/*定义文字样式*/
A {FONT-SIZE: 12px; COLOR: #000;}
A:link {COLOR: #2d8931; TEXT-DECORATION: none;}
A:visited {COLOR: #333; TEXT-DECORATION: none;}
A:hover {COLOR: #333; TEXT-DECORATION:underline;}
A:active {COLOR: #333; TEXT-DECORATION: none;}

#swipe_nav_prev,#swipe_nav_next {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2000;
 background-color: #ccc;
 cursor: pointer;
 text-align: center;
 display: none;
}
#swipe_nav_prev {
 background: #333 url('prev.png') no-repeat center center;
}
#swipe_nav_next {
 background: #333 url('next.png') no-repeat center center;
}
.internal_swipe_container {
 position: relative;
}
.trans {
 filter:alpha(opacity=75);
 -moz-opacity:0.75;
 -khtml-opacity: 0.75;
 opacity: 0.75;
}
.jq_swipe_image {
 background: url('loader.gif') no-repeat center center;
}
#count_container {
 padding: 0;
 margin: 0;
 position: absolute;
 top: 0;
 left: 0;
 background-color: pink;
 height: 6px;
 list-style: none;
}
.counter {
 float: left;
 height: 6px;
 background-color: #FFF;
 z-index: 200;
 height: 6px;
 padding: 0;
 margin: 0;
}
.counter:hover {
 cursor: pointer;
 background-color: #ff00fc !important;
}
.current {
 background-color: #ff00fc !important;
}
Javascript 相关文章推荐
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 #Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 #Javascript
异步动态加载js与css文件的js代码
Sep 15 #Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 #Javascript
js左侧三级菜单导航实例代码
Sep 13 #Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 #Javascript
jquery mobile事件多次绑定示例代码
Sep 13 #Javascript
You might like
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
小程序实现留言板
2018/11/02 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python 和 JS 有哪些相同之处
2017/11/23 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
python Django 创建应用过程图示详解
2019/07/29 Python
Python assert关键字原理及实例解析
2019/12/13 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
Java语言程序设计测试题改错题部分
2014/07/22 面试题
送餐员岗位职责范本
2014/02/21 职场文书
家长会主持词开场白
2014/03/18 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
党校学习个人总结
2015/02/15 职场文书
2015年政教主任工作总结
2015/07/23 职场文书