基于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 控制非法字符的输入代码
Dec 04 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
jquery延迟对象解析
Oct 26 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 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
一个数据采集类
2007/02/14 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
深入php内核之php in array
2015/11/10 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
js返回顶部实例分享
2016/12/21 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python中zfill()方法的使用教程
2015/05/20 Python
python实现自动重启本程序的方法
2015/07/09 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
汽车驾驶求职信
2013/10/25 职场文书
总经理职责范文
2013/11/08 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
学生出入校管理制度
2014/01/16 职场文书
简短大学毕业感言
2014/01/18 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
销售活动策划方案
2014/08/26 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python