基于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 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
javascript中caller和callee详解
Aug 10 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
Python模拟登录12306的方法
2014/12/30 Python
使用python实现BLAST
2018/02/12 Python
python实现电脑自动关机
2018/06/20 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
《长征》教学反思
2014/04/27 职场文书
会计求职自荐信
2014/06/20 职场文书
药店采购员岗位职责
2014/09/30 职场文书
师德师风学习材料
2014/12/19 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书