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-介绍-创建项目-简单页面 轮播组件 之前也介 ...
随机推荐
- JavaScript学习笔记——流程控制
javascript流程控制流程:就是程序代码的执行顺序.流程控制:通过规定的语句让程序代码有条件的按照一定的方式执行. 一.顺序结构 按照书写顺序来执行,是程序中最基本的流程结构. 二.选择结构(分 ...
- RGB to HSI, HSI to RGB Conversion Calculator
The RGB color model is an additive system in which each color is defined by the amount of red, green ...
- Unity3D SceneView Camera
http://forum.unity3d.com/threads/moving-scene-view-camera-from-editor-script.64920/
- JAVA数组的典型操作
- sql FOR XML PATH
FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...
- jsp系统时间和时间对比（活动结束不结束）
jsp页面拿到系统时间 <jsp:useBean id="now" class="java.util.Date" /> <fmt:format ...
- 用apache-cxf生成webservice客户端的时候报错Parameter: shead already exists for method
版本apache-cxf-3.1.0 命令如下:wsdl2java -p com.wz.interfaces -d ./src -client ./ws/xxx.wsdl 报错如下: WSDLToJa ...
- QQ空间HD(4)-设置左侧菜单栏属性
DJHomeViewController.m #import "DJHomeViewController.h" #import "DJMenuView.h" ; ...
- （2）apply函数及其源码
本文原创,转载请注明出处,本人Q1273314690(交流学习) 总结: 就是MARGIN决定了你的FUN调用几次,每次传递给你的是什么维度的内容,而...是传递给FUN的(每次调用的时候都会被传 ...
- python 100例 （持续更新）
1.题目:列表转换为字典. 程序源代码: 1 #!/usr/bin/env python 2 # -*- coding: UTF-8 -*- 3 4 i = ['a', 'b'] 5 l = [1, ...