自动滑动的banner图
实例:
HTML页面:
<div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-width: 1200px;">
<div class="slider" id="slider">
<div class="slider-inner">
<div class="item">
<img src="/public/home/images/1.jpg" ">
</div>
<div class="item">
<img src="/public/home/images/21.jpg" ">
</div>
</div>
</div>
</div>
CSS代码:
.slider {
position: relative;
height: 400px;
min-width: 1004px;
width: 100%;
overflow: hidden;
} .slider .slider-pointer {
position: absolute;
bottom: 20px;
color: #fff;
list-style: none;
padding:;
z-index:;
} .slider .slider-pointer li {
display: inline-block;
margin: 0 15px;
width: 15px;
height: 15px;
border-radius: 15px;
background-color: #ffffff;
opacity: 0.85;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
transition: all 320ms ease;
} .slider .slider-pointer li:hover {
background-color: #e30006;
} .slider .slider-pointer li.active {
background-color: #b00005;
} .slider .slider-inner {
width: 100%;
height: 100%;
position: relative;
} .slider .slider-inner .item {
width: 100%;
height: 100%;
float: left;
} .slider .slider-inner .img {
background-position: center top !important;
width: 100%;
height: 100%;
} .slider .slider-control {
position: absolute;
width: 30px;
height: 30px;
z-index:;
border-radius: 30px;
text-align: center;
font-weight:;
font-size: 20px;
line-height: 30px;
background-color: #ffffff;
opacity: 0.5;
cursor: pointer;
top: 40%;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
transition: all 320ms ease;
} .slider .slider-control:hover {
opacity: 0.65;
background-color: #b00005;
} .slider .slider-control:active {
opacity: 0.85;
} .slider .slider-control.prev {
display: none;
left: 20px;
} .slider .slider-control.next {
display: none;
right: 20px;
} .slider:hover .slider-control.prev {
display: block;
left: 20px;
} .slider:hover .slider-control.next {
display: block;
right: 20px;
}
Javascript代码:
/**
* Author : CheneyLiu
* Date : date
* isAuto: true, 自动播放
* transTime: 3000, 自动播放间隔
* animateSpeed: 1000, 动画速度
* sliderMode: 'slide', 类型//'slide | fade',
* pointerControl: true, 指示器开关
* pointerEvent: 'click', 指示器类型//'hover' | 'click',
* arrowControl: true, 左右控制
*/
;
(function($) {
$.fn.Slider = function(options) {
"use strict"; var settings = $.extend({
isAuto : true,
transTime : 3000,
animateSpeed : 1000,
sliderMode : 'slide', //'slide | fade',
pointerControl : true,
pointerEvent : 'click',//'hover' | 'click',
arrowControl : true,
}, options);
var interval;
var isAnimating = false;
var $slider = $(this);
var $sliderWrap = $slider.find('.slider-inner');
var sliderCount = $sliderWrap.find('> .item').length;
var sliderWidth = $slider.width();
var currentIndex = 0; var sliderFun = {
controlInit : function() {
// pointerControl
if (settings.pointerControl) { var html = '';
html += '<ol class="slider-pointer">';
for (var i = 0; i < sliderCount; i++) {
if (i == 0) {
html += '<li class="active"></li>'
} else {
html += '<li></li>'
}
}
html += '</ol>'
$slider.append(html);
// 指示器居中
var $pointer = $slider.find('.slider-pointer');
$pointer.css({
left : '50%',
marginLeft : -$pointer.width() / 2
});
}
// pointerControl
if (settings.arrowControl) {
var html = "";
html += '<span class="slider-control prev"><</span>';
html += '<span class="slider-control next">></span>'
$slider.append(html);
}
$slider.on('click', '.slider-control.prev', function(
event) {
sliderFun.toggleSlide('prev');
});
$slider.on('click', '.slider-control.next', function(
event) {
sliderFun.toggleSlide('next');
});
},
// slider
sliderInit : function() {
sliderFun.controlInit();
// 模式选择
if (settings.sliderMode == 'slide') {
// slide 模式
$sliderWrap.width(sliderWidth * sliderCount);
$sliderWrap.children().width(sliderWidth);
} else {
// mode 模式
$sliderWrap.children().css({
'position' : 'absolute',
'left' : 0,
'top' : 0
});
$sliderWrap.children().first().siblings().hide();
}
// 控制事件
if (settings.pointerEvent == 'hover') {
$slider.find('.slider-pointer > li').mouseenter(
function(event) {
sliderFun.sliderPlay($(this).index());
});
} else {
$slider.find('.slider-pointer > li').click(
function(event) {
sliderFun.sliderPlay($(this).index());
});
}
// 自动播放
sliderFun.autoPlay();
},
// slidePlay
sliderPlay : function(index) {
sliderFun.stop();
isAnimating = true;
$sliderWrap.children().first().stop(true, true);
$sliderWrap.children().stop(true, true);
$slider.find('.slider-pointer').children().eq(index)
.addClass('active').siblings().removeClass(
'active');
if (settings.sliderMode == "slide") {
// slide
if (index > currentIndex) {
$sliderWrap.animate({
left : '-='
+ Math.abs(index - currentIndex)
* sliderWidth + 'px'
}, settings.animateSpeed, function() {
isAnimating = false;
sliderFun.autoPlay();
});
} else if (index < currentIndex) {
$sliderWrap.animate({
left : '+='
+ Math.abs(index - currentIndex)
* sliderWidth + 'px'
}, settings.animateSpeed, function() {
isAnimating = false;
sliderFun.autoPlay();
});
} else {
return;
}
} else {
// fade
if ($sliderWrap.children(':visible').index() == index)
return;
$sliderWrap.children().fadeOut(
settings.animateSpeed).eq(index).fadeIn(
settings.animateSpeed, function() {
isAnimating = false;
sliderFun.autoPlay();
});
}
currentIndex = index;
},
// toggleSlide
toggleSlide : function(arrow) {
if (isAnimating) {
return;
}
var index;
if (arrow == 'prev') {
index = (currentIndex == 0) ? sliderCount - 1
: currentIndex - 1;
sliderFun.sliderPlay(index);
} else if (arrow == 'next') {
index = (currentIndex == sliderCount - 1) ? 0
: currentIndex + 1;
sliderFun.sliderPlay(index);
}
},
// autoPlay
autoPlay : function() {
if (settings.isAuto) {
interval = setInterval(function() {
var index = currentIndex;
(currentIndex == sliderCount - 1) ? index = 0
: index = currentIndex + 1;
sliderFun.sliderPlay(index);
}, settings.transTime);
} else {
return;
}
},
//stop
stop : function() {
clearInterval(interval);
},
};
sliderFun.sliderInit();
}
})(jQuery);
jQuery(document).ready(function($) {
$('#slider').Slider();
});
以上是做banner的基本代码实例。
自动滑动的banner图的更多相关文章
- JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
- 原生态JS实现banner图的常用所有功能
虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
- jquery自定义banner图滚动插件---(解决最后一张图片倒回第一张图片的bug)
banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...
- JQuery自定义插件详解之Banner图滚动插件
前 言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
- 简单易懂的banner图滚动源代码
banner图左右滚动简单易懂源代码 1 样式展示 css代码: * { padding: 0px; margin: 0px; } .banner { width: 100%; height: 450 ...
- 人工智能-智能创意平台架构成长之路(四)-丰富多彩的banner图生成解密第一部分(对标阿里鹿班的设计)
我们之前讲了很多都是平台架构的主体设计,应用架构设计以及技术架构的设计,那么现在我们就来分享一下丰富多彩的banner图是怎么生成出来的. banner图的生成我们也是不断的进行迭代和优化,这块是最核 ...
- swiper 窗口宽度变化,页面宽度高度变化 导致自动滑动 解决方案
又又又又是swiper问题 背景: pc端项目,rem布局,swiper作为步骤条(上一步,下一步)的功能. 发现在屏幕拖动,宽高的变化,窗口大小的变化 会引起swiper自动滑动(到下一步). 在下 ...
- 双击导航栏自动滑动ListView到顶部
有些app都实现了双击导航栏让页面的list自动滑动到顶部的feature. 先实现一个继承于OnTouchListener的监听多次点击事件的监听器,通过callback把连续点击的次数返回给客户代 ...
随机推荐
- js拖拽效果实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇
Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...
- Ubuntu安装SSH服务器故障分析及解决办法(错误1:E:软件包 openssh-server 还没有可供安装的候选者,错误2:E: 无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系)
• 微博: 小样儿老师2015 Windows下做Linux开发需要SSH强大功能的支持.安装SSH的过程会出现了很多问题,看完这篇文章可以让你少走些弯路,PS:折腾一下午的成果. Ubuntu ...
- Sicily 1153: 马的周游问题(DFS+剪枝)
这道题没有找到一条回路,所以不能跟1152一样用数组储存后输出.我采用的方法是DFS加剪枝,直接DFS搜索会超时,优化的方法是在搜索是优先走出度小的路径,比如move1和move2都可以走,但是如走了 ...
- JS trim
JS 去掉左右两边空格 /** * 去掉左右两边空格 * @param str * @returns {*} */function myTrim(str){ return str.replace(/( ...
- jQuery判断及更改checkbox状态
判断:jquery对象.prop("checked") 选中:jquery对象.prop("checked", true) 取消选中:jquery对象.remo ...
- Mongodb系统管理员权限设置
管理员账号无法执行show dbs .show collections Js代码 { "_id" : ObjectId("52a82bb26cea234c4deb06 ...
- codeblocks16.01 中配置Opencv3 姿势
VS太大安装时间长,考虑到效率问题,可以使用opencv+codeblocks opencv3没有codeblocks版本,需要自己编译,编译过程略. 已编译版本下载地址 http://pan.bai ...
- MATLAB的PLOT函数线型设置及横坐标为字符串的代码实例
2.横坐标为字符串的代码实例 cell={‘PLS’,’SVM’,’RF’,’NNET’,’NB’,’PLR’,’C5.0′,’PDA’,’KNN’,’GLM’,’BCT’};%分类方法yData=[ ...
- 通过style控制圆形imageView显示
1. 2.drawable--style <?xml version="1.0" encoding="utf-8"?> <layer-list ...