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-介绍-创建项目-简单页面 轮播组件 之前也介 ...
随机推荐
- asp.net+mysq 数据库操作类
对数据库操作的使用方法: 1.引入命名空间 2.操作.三四行代码即可完成数据操作.类似于: using System; using System.Data; using System.Text; us ...
- CodeLite的姿势
在Mac上安装cscope 1.下载cscope的Zip压缩包 2.解压 3.打开终端,进入解压目录,运行 ./configure make make install 4.在CodeLite中,在Pl ...
- 捕获EF提交异常
try { } catch (DbEntityValidationException dbex) { string errMsg = string.Empty; foreach (var eve in ...
- Helixoft VSdocman 是一个集成于Visual Studio并提供了命令行版本的帮助文档编译工具
http://www.helixoft.com/vsdocman/overview.html https://blog.fishlee.net/2016/01/14/helixoft-vsdocman ...
- phpcms v9 0day
index.php?m=member&c=index&a=login 后缀 username=phpcms&password=123456%26username%3d%2527 ...
- nodejs 相关
1.错误 fs.js:543 return binding.rename(pathModule._makeLong(oldPath), 上传图片->图片改名->保存->在页面显示该图 ...
- SQLServer中获取特定表的所有列名
1.获取特定表的所有列名: Select Name FROM SysColumns Where id=Object_Id('tableName') 参考:http://blog.csdn.net/wu ...
- Chrome插件开发
参考文档: http://open.chrome.360.cn/extension_dev/overview.html 参考博文: http://www.cnblogs.com/mfryf/p/370 ...
- ES6新特性--多行文本
由于多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用` ... `表示: `这是一个 多行 字符串`;
- shell学习之路:流程控制(while)
while循环: 介绍:while循环是不定循环,也称作条件循环.只要条件判断成立,循环就会一直继续执行,直到条件判断不成立,循环才会停止,这就是和for的固定循环不太一样了. while [ 条件判 ...