基于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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
JavaScript函数柯里化
Nov 07 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验证码类分享
2014/11/18 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
Django与遗留的数据库整合的方法指南
2015/07/24 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
python如何实现word批量转HTML
2020/09/30 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
员工福利申请报告
2015/05/15 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android