基于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 相关文章推荐
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
js数组实现权重概率分配
Sep 12 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
Vue Element plus使用方法梳理
Dec 24 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
文件系统基本操作类
2006/11/23 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
Python入门篇之正则表达式
2014/10/20 Python
Python实现简单状态框架的方法
2015/03/19 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
Python3生成手写体数字方法
2018/01/30 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Python 寻找局部最高点的实现
2019/12/05 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
.net面试题
2016/09/17 面试题
物流仓储实习自我鉴定
2013/09/25 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
优秀纪检干部材料
2014/08/27 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
Python之基础函数案例详解
2021/08/30 Python