php js轮播图片代码,javascript实现焦点图轮播效果代码示例
本篇文章通过代码实例来给大家介绍一下javascript实现焦点图轮播效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
JS实现焦点图轮播效果
效果图:
(不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦)
代码如下,复制即可使用:
JS实现焦点图轮播效果
* {
margin: 0;
padding: 0;
text-decoration: none;
}
body {
padding: 20px;
}
#container {
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden;
position: relative;
}
#list {
width: 4200px;
height: 400px;
position: absolute;
z-index: 1;
}
#list img {
float: left;
}
#buttons {
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}
#buttons span {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
#buttons .on {
background: orangered;
}
.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: RGBA(0, 0, 0, .3);
color: #fff;
}
.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
}
#container:hover .arrow {
display: block;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
window.onload = function() {
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var len = 5;
var animated = false;
var interval = 3000;
var timer;
function animate(offset) {
if(offset == 0) {
return;
}
animated = true;
var time = 300;
var inteval = 10;
var speed = offset / (time / inteval);
var left = parseInt(list.style.left) + offset;
var go = function() {
if((speed > 0 && parseInt(list.style.left) < left) ||
(speed < 0 && parseInt(list.style.left) > left)) {
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go, inteval);
} else {
list.style.left = left + 'px';
if(left > -200) {
list.style.left = -600 * len + 'px';
}
if(left < (-600 * len)) {
list.style.left = '-600px';
}
animated = false;
}
}
go();
}
function showButton() {
for(var i = 0; i < buttons.length; i++) {
if(buttons[i].className == 'on') {
buttons[i].className = '';
break;
}
}
buttons[index - 1].className = 'on';
}
function play() {
timer = setTimeout(function() {
next.onclick();
play();
}, interval);
}
function stop() {
clearTimeout(timer);
}
next.onclick = function() {
if(animated) {
return;
}
if(index == 5) {
index = 1;
} else {
index += 1;
}
animate(-600);
showButton();
}
prev.onclick = function() {
if(animated) {
return;
}
if(index == 1) {
index = 5;
} else {
index -= 1;
}
animate(600);
showButton();
}
for(var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
if(animated) {
return;
}
if(this.className == 'on') {
return;
}
var myIndex = parseInt(this.getAttribute('index'));
var offset = -600 * (myIndex - index);
animate(offset);
index = myIndex;
showButton();
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
<
>
更多炫酷CSS3、html5、javascript特效代码,尽在:js特效大全
php js轮播图片代码,javascript实现焦点图轮播效果代码示例相关推荐
- html焦点图自动轮播,JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 ...
- js之焦点图轮播特效
js之焦点图轮播特效 一.原理介绍 焦点图在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思,只不过加上了图片.据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字.在很多购物网主页面 ...
- bxSlider——一个精悍的拥有一大波焦点图轮播滑动特效的Js程序
打开这个地址>>强大的支持手机端响应式的jQuery焦点图轮播特效插件bxslider.js(右键查看源代码) bxSlider官网:http://bxslider.com/ ****** ...
- jQuery焦点图轮播特效插件bxslider,使用说明 及免费下载四川智汇蓝图整理带bxslider免费下载地址
这里分享一个方便实用的JQ 焦点图插件,它的特点简单易用,灵活方便通用性强:支持包含内容不HTML,视频,图片等.出众的兼容能力,完美兼容Firefox,Chrome,Safari,iOS,Andro ...
- allinone rotator演示40种不同的焦点图轮播
[img]http://www.sucaihuo.com/jquery/2/249/big.jpg[/img] allinone 有15种类型,16 种过渡效果.支持文字左右上下四个方向的动画效果.支 ...
- 用JavaScript防PS里的羽化效果代码
代码简介: JavaScript圆形虚幻效果,跟PS里面的羽化效果有点像. 代码内容: View Code < html > < head > < meta http- ...
- php自动轮播图代码,JavaScript如何实现动态轮播图效果?(代码示例)
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 ...
- php详情页图片尺寸,拼多多主图轮播图详情页图片尺寸要求大全
1.拼多多商品轮播图: a. 尺寸宽度和高度都需要大于等于480px,正方形最好. b. 大小1M以内,不能超过1M. c. 数量限制在10张以内,等于10章. d. e. 主轮播图背景为纯白色(服饰 ...
- web实战(一)— — 焦点图轮播特效
(一).原理分析 1.参考淘宝网首页/极客学院首页的广告栏图片轮播 2.适用技能点有:DOM操作.定时器.事件运用.JS动画.函数递归.无限滚动 可以直接上http://www.imooc.com/l ...
- html小人动画效果代码,JavaScript+html5 canvas绘制的小人效果
本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: canvas中的缩放 #canvas ...
最新文章
- Centos 6.x 安装 docker
- 如何查看tomcat是否安装成功_如何查看网站是否被收录?
- 从零入门 FreeRTOS操作系统之信号量
- 生成word_Word生成员工信息表,每一页生成独立文件,还能自动命名
- 高一被清华姚班录取,高三委拒谷歌offer,一个重度网瘾少年到理论计算机科学家的蜕变...
- 吃鸡决赛圈直播却卡屏的我心好痛,立马找来开发刚了一波
- java方法的重载 编程题,java面试编程题:重载方法
- MySQL的 配置文件编写
- 【渝粤题库】陕西师范大学800005 人文地理学
- How Not to Crash #2: Mutation Exceptions 可变异常(不要枚举可变的集合)
- linux c 静态连接,Linux cmake 静态链接boost
- linux更换内核后无法上网,ubuntu 系统升级内核版本后网络不能正常启动问题
- 【C++】内建函数对象
- C# winForm启动最小化到任务栏右侧通知栏并交互操作
- 插件对计算机的运行有什么影响吗,电脑插件太多导致电脑运行缓慢怎么办 - 驱动管家...
- hotmail邮箱登录服务器,hotmail邮箱登录页面在哪 hotmail邮箱账号登录设置教程
- android8 avb检验,android avb(Android Verified Boot)验证
- antdesign 柱状图_你绝对想不到柱形图背后有这么多故事
- Linux头文件 C/C++头文件
- 程序员搞什么副业好?
热门文章
- Matlab使用-norm函数
- 华为MAGICBOOK安装win10专业版,华为MAGICBOOK win10专业版X64下载
- 教务系统自动评教_「四川大学教务处本科登陆系统」四川大学本科教务系统 - 一键评教 - seo实验室...
- php mysql 进销存_PHP进销存源码 仓库管理系统 WEB进销存 php+mysql 网络版进销存
- oracle 11g varchar/varchar2
- PHP-laravel框架一1
- 1991-2019年中国科技统计年鉴(EXCEL版)
- 谢晶:webpower中国区正在向“多渠道智能化营销”全面转型
- 关于虚拟机IP更改问题教给大家一个必杀技
- MarkDown简单使用教程