基于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获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
Javascript实现简易天数计算器
May 18 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
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python与Redis的连接教程
2015/04/22 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
python实现图片识别汽车功能
2018/11/30 Python
如何在python中写hive脚本
2019/11/08 Python
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
远东集团网络工程师面试题
2014/10/20 面试题
个人求职简历的自我评价
2013/10/19 职场文书
英文演讲稿
2014/05/15 职场文书
华清池导游词
2015/02/02 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
Python+Appium自动化测试的实战
2021/06/30 Python
html粘性页脚的具体使用
2022/01/18 HTML / CSS
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL