基于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 相关文章推荐
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 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里的JS打印函数
2006/10/09 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
Jquery的Ajax技术使用方法
2019/01/21 jQuery
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
vue--vuex详解
2019/04/15 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
在Django中创建动态视图的教程
2015/07/15 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Python3监控疫情的完整代码
2020/02/20 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
新郎父亲婚宴答谢词
2014/01/11 职场文书
致裁判员加油稿
2014/02/08 职场文书
继承公证书
2014/04/09 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
社区元宵节活动总结
2015/02/06 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
2016年元旦寄语
2015/08/17 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
大学军训心得体会800字
2016/01/11 职场文书