基于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 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
canvas的神奇用法
Feb 03 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
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
mysql+php分页类(已测)
2008/03/31 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
Vue中计算属性computed的示例解读
2017/07/26 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
Vue瀑布流插件的使用示例
2018/09/19 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
Python导出DBF文件到Excel的方法
2015/07/25 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
在python中用url_for构造URL的方法
2019/07/25 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
大队委竞选演讲稿
2014/04/28 职场文书
《悯农》教学反思
2014/04/28 职场文书
卫生系统先进事迹
2014/05/13 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
西安兵马俑导游词
2015/02/02 职场文书
人事任命通知书
2015/04/21 职场文书
导游词之镇江焦山
2019/11/21 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android