web图片轮播实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播</title>
<!-- 轮播广告 css start-->
<style>
.flexslider{position:relative;width:100%;height:400px;overflow:hidden;zoom:1}
.flexslider .slides li{width:100%;height:100%}
.flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover{opacity:1;filter:alpha(opacity=50)}
.flex-control-nav{width:100%;position:absolute;bottom:10px;text-align:center}
.flex-control-nav li{margin:0 2px;display:inline-block;zoom:1}
.flex-control-paging li a{background:url(http://chzeze.cc/images/dot.png) no-repeat 0 -16px;display:block;height:16px;overflow:hidden;text-indent:-99em;width:16px;cursor:pointer}
.flex-control-paging li a.flex-active,.flex-control-paging li.active a{background-position:0 0}
.flexslider .slides a img{width:100%;height:400px;display:block}
</style>
<!-- 轮播广告 css end-->
</head> <body style="margin: 0px;"> <!-- 轮播广告 -->
<div id="banner_tabs" class="flexslider">
<ul class="slides">
<li> <a title="" target="_blank" href="#"> <img width="1920" height="482" alt="" style="background: url(http://www.chzeze.cc/Page/index/images/banner.png) no-repeat center;" src="http://chzeze.cc/images/alpha.png"> </a> </li>
<li> <a title="" href="#"> <img width="1920" height="482" alt="" style="background: url(http://www.chzeze.cc/Page/index/images/banner4.png) no-repeat center;" src="http://chzeze.cc/images/alpha.png"> </a> </li>
<li> <a title="" href="#"> <img width="1920" height="482" alt="" style="background: url(http://www.chzeze.cc/Page/index/images/banner2.png) no-repeat center;" src="http://chzeze.cc/images/alpha.png"> </a> </li>
</ul>
<ol id="bannerCtrl" class="flex-control-nav flex-control-paging" style="padding-left: 0px;">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>2</a></li>
</ol>
</div>
<script src="http://chzeze.cc/Page/jquery.js"></script>
<script>
<!--背景轮播 js 开始-->
$(function($, window, document, undefined) {
Slider = function(container, options) {
"use strict";
if (!container) return;
var options = options || {}, currentIndex = 0,
cls = options.activeControllerCls,
delay = options.delay,
isAuto = options.auto,
controller = options.controller,
event = options.event,
interval, slidesWrapper = container.children().first(),
slides = slidesWrapper.children(),
length = slides.length,
childWidth = container.width(),
totalWidth = childWidth * slides.length; function init() {
var controlItem = controller.children();
mode();
event == 'hover' ? controlItem.mouseover(function() {
stop();
var index = $(this).index();
play(index, options.mode);
}).mouseout(function() {
isAuto && autoPlay();
}) : controlItem.click(function() {
stop();
var index = $(this).index();
play(index, options.mode);
isAuto && autoPlay();
});
isAuto && autoPlay();
} function mode() {
var wrapper = container.children().first();
options.mode == 'slide' ? wrapper.width(totalWidth) : wrapper.children().css({
'position': 'absolute',
'left': 0,
'top': 0,
'display':'block'
}).first().siblings().hide();
} function autoPlay() {
interval = setInterval(function() {
triggerPlay(currentIndex);
}, options.time);
} function triggerPlay(cIndex) {
var index;
(cIndex == length - 1) ? index = 0 : index = cIndex + 1;
play(index, options.mode);
} function play(index, mode) {
slidesWrapper.stop(true, true);
slides.stop(true, true);
mode == 'slide' ? (function() {
if (index > currentIndex) {
slidesWrapper.animate({
left: '-=' + Math.abs(index - currentIndex) * childWidth + 'px'
}, delay);
} else if (index < currentIndex) {
slidesWrapper.animate({
left: '+=' + Math.abs(index - currentIndex) * childWidth + 'px'
}, delay);
} else {
return;
}
})() : (function() {
if (slidesWrapper.children(':visible').index() == index) return;
slidesWrapper.children().fadeOut(delay).eq(index).fadeIn(delay);
})();
try {
controller.children('.' + cls).removeClass(cls);
controller.children().eq(index).addClass(cls);
} catch (e) {}
currentIndex = index;
options.exchangeEnd && typeof options.exchangeEnd == 'function' && options.exchangeEnd.call(this, currentIndex);
} function stop() {
clearInterval(interval);
} function prev() {
stop();
currentIndex == 0 ? triggerPlay(length - 2) : triggerPlay(currentIndex - 2);
isAuto && autoPlay();
} function next() {
stop();
currentIndex == length - 1 ? triggerPlay(-1) : triggerPlay(currentIndex);
isAuto && autoPlay();
}
init();
return {
prev: function() {
prev();
},
next: function() {
next();
}
}
};
}(jQuery, window, document));
$(function() {
var bannerSlider = new Slider($('#banner_tabs'), {
time: 5000,
delay: 400,
event: 'hover',
auto: true,
mode: 'fade',
controller: $('#bannerCtrl'),
activeControllerCls: 'active'
});
$('#banner_tabs .flex-prev').click(function() {
bannerSlider.prev()
});
$('#banner_tabs .flex-next').click(function() {
bannerSlider.next()
});
})
<!--背景轮播 js结束-->
</script>
</div>
</body>
</html>
web图片轮播实现的更多相关文章
- H5如何做手机app(移动Web App)?图片轮播？ionic、MUI
移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Rub ...
- Unslider Web前端框架之图片轮播
前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...
- 图片轮播图插件的使用 unslider！！！
1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者int ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- 图片轮播插件-carouFredSel
carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...
- 使用纯css3实现图片轮播
<!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...
- SharePoint 门户网站的图片轮播-页面定制
这个想法是自己突然的一个想法,想想我们经常用SharePoint做门户网站,不知道你们多数项目都是怎么完成的,我们客户要求的效果都还是很严格的,所有展现起来,还是很漂亮的,但是很多时候的效果,还是难以 ...
- 推荐一款超级漂亮的HTML5 CSS3的图片轮播器
最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...
- MUI框架-06-静态页制作（图片轮播）
MUI框架-06-静态页制作(图片轮播) 轮播也是静态,是相对页面交互来说 上一篇介绍了如何设计一个简单的界面,还没有接触过,请先查看: MUI框架-01-介绍-创建项目-简单页面 轮播组件 之前也介 ...
随机推荐
- new和alloc init的区别
背景说明,new是较为老式的写法,后来发现只有一个new不好使,才引入了alloc和init这种写 法,保留new一是向后兼容,二是很多时候是一种更简单的写法.其实是一样的,new在内部调用 的all ...
- .net 应用迁移到Mono 工具 (Moma)
Mono Migration Analyzer (Moma) 是一个用于开发者使用的MS .net下开发的应用程序迁移到Mono平台的不兼容性检测工具.工具通过分析.dll或者.exe程序集的代码是否 ...
- centos 7.0 查看根目录下所有文件夹
centos 7.0最小化安装 第一行是登录 [root@localhost ~]# [root@localhost ~]# cd ../ [root@localhost /]# ls bin dev ...
- centos 7.0 安装
最小化安装的 主要查看硬盘使用时间 需要安装 smartmontools 这个 [root@localhost ~]# yum install -y smartmontools 已加载插件:fast ...
- RabbitMQ 命令行
用户命令 .添加用户 rabbitmqctl add_user username password .删除用户 rabbitmqctl delete_user username .修改密码 rabbi ...
- 程序日志输出实现-Log4j
学习开发的过程中,我们都应该用过System.out.println():来做一些调试工作,有时候确实很有用有没有.但是这种简单粗暴的方式让程序中到处存在着sysout.这种方式难免会有性能的影响,维 ...
- Struts2 自定义拦截器
自定义拦截器(权限管理),包含了对ajax和表单请求的拦截 package com.interceptor; import java.io.IOException; import java.io.Pr ...
- Mastering Web Application Development with AngularJS 读书笔记-前记
学习AngularJS的笔记,这个是英文版的,有些地方翻译的很随意,做的笔记不是很详细,用来自勉.觉得写下来要比看能理解的更深入点.有理解不对的地方还请前辈们纠正! 一.关于<Mastering ...
- Web渗透测试使用Kali Linux（一）渗透测试概要及环境部署
渗透测试是利用已经发现的漏洞,采用恶意黑客的惯用手段来尝试对漏洞进行攻击. Kali Linux是BackTrack的进化版,是Linux的衍生版本,专门开发用作渗透测试,其中提供了很多的渗透测试工具 ...
- 国内SEO如何过滤掉不良网络信息
对于站长们来说,首要任务就是和搜索引擎战斗,面对搜索引擎算法的不断更新,站长们也更加头疼.站长们都觉得,搜索引擎才是网站优化的"统治者",和谷歌优化相比,中国的SEO优化要复杂的多 ...