纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播
轮播原理说明<如上图所示>：
1. 画布部分（可视区域）属性说明：overflow:hidden使得超出画布部分隐藏或说不可见。position:relative 会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。使得使用了position：absolute 元素相对于画布位置进行定位；
absolute元素脱离了文档结构，产生破坏性，导致父元素坍塌，float元素也会脱离文档结构，absolute元素会悬浮在页面上方，遮挡其他部分显示，这点和PhotoShop图层相似，所以要使用z-index控制出现顺序
2.轮播注意点：左右无限滚动
prev-button 第一张图片的前一张是最后一张图片，
next-button 最后一张图片的下一张图片是第一张，
prev-button、next-button位置的偏移是通过设置prev-img-container、next-img-container的left<相对于画布>属性值
click-select-show-button区域，点击该区域小圆圈是通过上一次图片的所在index，当前点击myIndex, 计算公式：（myIndex-index）*(-图片的宽度width)
3.动画过渡注意点：点击prev-button、next-button、click-select-show-button小圆圈，判定当前是否处于动画状态中
4.定时器setTimeout()、clearTimeout
<实现效果图>
Css样式
/**CSS-style**/
/**画布大小*/
#container {
margin: auto;
width: 600px;
height: 400px;
overflow: hidden;/*超出画布部分隐藏*/
position: relative;/*相对定位*/
cursor: pointer;
}
/**图片容器*/
#list {
width: 4200px;
height: 400px;
position: absolute;
z-index:;
}
#list img { float: left; }
/**轮播选中按钮样式*/
#button {
position: absolute;
bottom: 25px;
left: 175px;
width: 250px;
z-index: ;
}
#button ul li {
list-style: none;
width: 15px;
border-radius: %;
padding: .5px;
height: 15px;
margin-right: 10px;
background: green;
float: left;
font:15px/15px "microsoft yahei";
text-align: center;
font-weight: bold;
color: white;
cursor: pointer;
}
#button ul li.chos {
background: orange;
} #container:hover .arrow{
display: block;
}
#pre {
left: 20px;
}
#next {
right: 20px;
}
/**pre next定位*/
.arrow {
position: absolute;
width: 40px;
height: 40px;
background: black;
z-index: ;
top: 180px;
text-decoration: none;
text-align: center;
line-height: 40px;
font-size: 40px;
color: white;
opacity: 0.3;
filter: alpha(opacity=0.3);
display: none;
}
/**pre next按钮透明度*/
#container a:hover {
opacity: 0.7;
filter: alpha(opacity=0.7);
}
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯javaScript实现个性化图片轮播</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script type="text/javascript" src="scripts/scroImg.js"></script>
</head>
<body>
<div id="container">
<div id="list" style="left:-600px">
<img src="data:images/5.jpg">
<img src="data:images/1.jpg">
<img src="data:images/2.jpg">
<img src="data:images/3.jpg">
<img src="data:images/4.jpg">
<img src="data:images/5.jpg">
<img src="data:images/1.jpg">
</div>
<div id="button">
<ul>
<li index=''></li>
<li index=''></li>
<li index=''></li>
<li index=''></li>
<li index=''></li>
</ul>
</div>
<a href="#" class="arrow" id="prev"><</a>
<a href="#" class="arrow" id="next">></a>
</div>
</body>
</html>
一、javaScript实现图片轮播
window.onload=function(){
var container=document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('button').getElementsByTagName('li');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
var index=;
var interval=;
var timer=null;
var animated=false;
//next
next.onclick=function(){
if (!animated) {
animate(-);
};
index+=;
if (index>) {
index=;
};
showButton();
console.info('next'+index);
}
//prev
prev.onclick=function(){
if(!animated){
animate();
}
index-=;
if(index<){
index=;
}
showButton();
console.info('prev'+index);
}
//animate
function animate(offset){
animated=true;
var left=parseInt(list.style.left)+offset;
var animateTime=;//位移总时间
var interval=;//时间间隔
var speed=offset/(animateTime/interval);//每次位移量
var go=function(){//animate内部函数
if ((speed< && parseInt(list.style.left)>left) || (speed> && parseInt(list.style.left)<left)) {//是否位移
list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval)
}else{
list.style.left=left+'px';
if (left<-) { //最后一张后面
list.style.left=-+'px'; //显示前一张
};
if(left>-){//第一张最前面
list.style.left=-+'px';//显示最后一张
}
animated=false;
};
}
go();
}
//chos
function showButton(){
for (var i = ; i < buttons.length; i++) {
buttons[i].className='';
};
buttons[index-].className='chos';
}
//buttons-click
for (var i = ; i < buttons.length; i++) {
buttons[i].onclick=function(){
if(this.className=='chos'){
return;
}
var myIndex=parseInt(this.getAttribute('index'));
var offset=(myIndex-index)*-; //偏移量
animate(offset);
index=myIndex;//set Index
showButton();
}
};
function play(){
timer=setTimeout(function(){
next.click();
play();
},interval)
}
function stop(){
clearInterval(timer);
}
play();
container.onmouseover=function(){
stop();
}
container.onmouseout=function(){
play();
}
}
二、jQuery实现图片轮播
$(function () {
var container = $('#container');
var list = $('#list');
var buttons = $('#container').find('li');
var prev = $('#pre');
var next = $('#next');
var index = ;
var len = ;
var interval = ;
var timer;
function animate (offset) {
var left = parseInt(list.css('left')) + offset;
if (offset>) {
offset = '+=' + offset;
}
else {
offset = '-=' + Math.abs(offset);
}
list.animate({'left': offset}, , function () {
if(left > -){
list.css('left', - * len);
}
if(left < (- * len)) {
list.css('left', -);
}
});
}
function showButton() {
buttons.eq(index-).addClass('chos').siblings().removeClass('chos');
}
function play() {
timer = setTimeout(function () {
next.trigger('click');
play();
}, interval);
}
function stop() {
clearTimeout(timer);
}
next.bind('click', function () {
if (list.is(':animated')) {
return;
}
if (index == ) {
index = ;
}
else {
index += ;
}
animate(-);
showButton();
});
prev.bind('click', function () {
if (list.is(':animated')) {
return;
}
if (index == ) {
index = ;
}
else {
index -= ;
}
animate();
showButton();
});
buttons.each(function () {
$(this).bind('click', function () {
if (list.is(':animated') || $(this).attr('class')=='chos') {
return;
}
var myIndex = parseInt($(this).attr('index'));
var offset = - * (myIndex - index);
animate(offset);
index = myIndex;
showButton();
})
});
container.hover(stop, play);
play();
});
学习网慕课网 http://www.imooc.com/video/665
源码下载 http://pan.baidu.com/s/1i4VA009
纯javaScript、jQuery实现个性化图片轮播的更多相关文章
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- js/jquery中实现图片轮播
一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- JQuery slidebox实现图片轮播
jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...
- JavaScript对象(document对象 图片轮播)
图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- JQuery插件开发初探——图片轮播
在熟悉了插件开发的结构以后,自己尝试着做了一个稍微复杂一点的小功能:图片轮播插件. 由于之前使用的一款图片轮播插件,性能不高,页面加载的时候需要载入全部的图片,因此速度很慢. 通过自己做这个小插件,能 ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
随机推荐
- C#异步编程(一)
异步编程简介 前言 本人学习.Net两年有余,是第一次写博客,虽然写的很认真,当毕竟是第一次,肯定会有很多不足之处, 希望大家照顾照顾新人,有错误之处可以指出来,我会虚心接受的. 何谓异步 与同步相对 ...
- 如何用百度MIP快速搭建体验友好的移动页面
在读这篇文章之前,请确定你已经了解MIP定义及加速原理.如果不确定的话,可以到MIP官网了解. 改造前期准备和注意事项: 你可以选择直接将原先的移动站点直接改成MIP站,也可以单独再做一套MIP站点与 ...
- Jexus 5.8.2 正式发布为Asp.Net Core进入生产环境提供平台支持
Jexus 是一款运行于 Linux 平台,以支持 ASP.NET.PHP 为特色的集高安全性和高性能为一体的 WEB 服务器和反向代理服务器.最新版 5.8.2 已经发布,有如下更新: 1,现在大 ...
- 来，给Entity Framework热热身
先来看一下Entity Framework缓慢的初始化速度给我们更新程序带来的一种痛苦. 我们手动更新程序时通常的操作步骤如下: 1)把Web服务器从负载均衡中摘下来 2)更新程序 3)预热(发出一个 ...
- 前端学HTTP之报文首部
前面的话 首部和方法配合工作,共同决定了客户端和服务器能做什么事情.在请求和响应报文中都可以用首部来提供信息,有些首部是某种报文专用的,有些首部则更通用一些.本文将详细介绍HTTP报文中的首部 结构 ...
- 算法与数据结构(十五) 归并排序(Swift 3.0版)
上篇博客我们主要聊了堆排序的相关内容,本篇博客,我们就来聊一下归并排序的相关内容.归并排序主要用了分治法的思想,在归并排序中,将我们需要排序的数组进行拆分,将其拆分的足够小.当拆分的数组中只有一个元素 ...
- Mysql命令大全
格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root -p,回车后提示你输 ...
- JAVA构造时成员初始化的陷阱
让我们先来看两个类:Base和Derived类.注意其中的whenAmISet成员变量,和方法preProcess(). 情景1:(子类无构造方法) class Base { Base() { pre ...
- HotApp小程序服务范围资质查询器
微信小程序提交审核需要选择资质服务范围,如果服务范围不对,审核会不通过, 开发小程序之前,最好先查询所开发小程序的资质范围,否则无法通过微信审核. 小程序的资质范围查询地址,数据同步微信官方 ht ...
- cmd窗口编码设置
问题描述:不知道误操作了什么,导致cmd窗口的鼠标显示位置出现错位,如下: 现在要将鼠标位置调整回来. 使用工具:cmd. 操作步骤: 1.查看cmd属性可以看到 可以看到是UTF-8编码格式的,我们 ...