简单图片自动手动播放html,js手动播放图片实现图片轮播效果
本文实例为大家分享了js图片轮播具体实现代码,供大家参考,具体内容如下
一、html代码部分(et.thtml):
二、css代码部分(styleet,css):
#main span{
width: 22px;
height: 38px;
position: absolute;
display: inline-block;
cursor: pointer;
background: url("../images/1.png") no-repeat 0 0;
}
.span1{
background-position: 0 0;
left:20px;
top: 90px;
}
.span2{
background-position: -22px 0;
right: 20px;
top: 90px;
}
#main{
width: 500px;
margin: 20px auto;
text-align: center;
border: solid 2px red;
position: relative;
}
.initClass{
width: 50px;
border: solid 2px #fff;
margin: 10px 5px;
}
.focusClass{
width: 50px;
border: solid 2px red;
margin: 10px 5px;
}
三、js代码部分(et.js):
/**
* Created by LuanReco on 2015/8/28.
*/
var slide={
arrImg:new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg'),
initClass:'initClass',
focusClass:'focusClass',
index:1,
arrMax:7,
imgMain:'img'
}
slide.top={
//导航事件
navEvent:function(){
//上部分大图片显示累加后下标对应的图片
$$(slide.imgMain).src=slide.arrImg[slide.index-1];
//根据焦点下标值组合成导航图片名称
var n='img'+slide.index;
//执行对应导航图片单击事件
$$(n).click();
},
//处理页面上一部分的逻辑
clickRight:function(){
//点击向右按钮处理事件
console.log(slide.index);
//当下标小于或等于最大图片数量时
if(slide.index
//累加当前下标值
slide.index++;
slide.top.navEvent();
}
},
clickLeft:function(){
//点击向右按钮处理事件
console.log(slide.index);
//当下标小于或等于最大图片数量时
if(slide.index>1){
//累加当前下标值
slide.index--;
slide.top.navEvent();
}
}
}
slide.bottom={
initImgClass:function(){
//初始化全部对不图片的样式
for(var i=1;i<=slide.arrMax;i++){
var n='img'+i;
$$(n).className=slide.initClass;
}
},
click:function(){
//处理页面下一部分的逻辑
$$('imgL').οnclick=function(){
slide.top.clickLeft();
}
$$('imgR').οnclick=function(){
slide.top.clickRight();
}
//获取所有底部的小图片
for(var i=1;i<=slide.arrMax;i++){
//为每一张图片绑定点击事件
var n='img'+i;
$$(n).οnclick=function(){
//初始化全部样式
slide.bottom.initImgClass();
//图片元素本身获取焦点样式
this.className=slide.focusClass;
//在上部图片中显示点击小图片对应的大图片
$$(slide.imgMain).src=slide.arrImg[this.getAttribute('data-index')-1];
//重新记录焦点图片在数组中的对应下标位置
slide.index=this.getAttribute('data-index');
}
}
}
}
slide.autoplay={
play:function(){
var m=1;
//for(var i=1;i<=slide.arrMax;i++){
setInterval(function(){
var n='img'+m;
m++;
$$(n).click();
if(m>6)
m=1;
},1000)
//}
}
}
slide.autoplay.play();
slide.bottom.click();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
简单图片自动手动播放html,js手动播放图片实现图片轮播效果相关推荐
- android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果,先看一下效果图支持本地图 - phpStudy...
Android自动播放Banner图片轮播效果 先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...
- PPT 视频处理: 换电脑能正常播放 + 自动与手动播放
目录 确保插入ppt的视频在任何电脑上正常播放 思路:转为wmv格式 怎么转格式呢: 如果没有原视频文件怎么办呢? 视频的自动和手动播放 默认情况 手动播放: 自动播放: 确保插入ppt的视频在任何电 ...
- JS实现图片轮播效果(自动和手动)
本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS ...
- 纯js制作图片轮播效果
好久没有发博客了,最近都在复习,为了找工作做准备. 前段时间逛了下鼠绘漫画网追海贼王最新漫画,发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同,看起来更加有趣,于是我尝试了用js复写它. 前提 ...
- js图片轮播效果实现代码
这篇文章主要介绍了js图片轮播效果实现代码,文章对每一步进行了详细阐述,标注注意事项,为顺利实现js图片轮播效果做好铺垫,对轮播效果感兴趣的朋友可以参考一下 首先给大家看一看js图片轮播效果,如下图 ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
- 移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...
- js轮播图片小圆点变化_用jQuery实现圆点图片轮播效果
在页面的指定位置实现的图片自动的左右轮流切换展示效果,当点击图片左下的标签(或中间的小圆点)切换到对应的图片.接下来通过本文给大家分享用jQuery实现圆点图片轮播效果实例代码,需要的朋友参考下 图片 ...
- html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果 图片轮播效果: 会自动 向左 || 向右 切换图片 能手动点击按钮切换图片 多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
最新文章
- 策略路由实验,指定出口
- 详解Oracle介质恢复的内部过程
- 看着拆焊过程,很治愈
- 服务器性能 平均磁盘写入,磁盘系统IO性能测试
- 在Ajax程序中实现无刷新换肤功能(asp.net2.0)
- 合肥工业大学宣城校区计算机大赛,合肥工业大学宣城校区学子在2019年全国大学生电子设计竞赛中喜获佳绩...
- 配置管理规范 配置管理计划_配置管理简介
- 面试必问——你有什么问题问我吗
- SLAM学习笔记(Code3)----Eigen库中的Geometry
- SPI FLASH的dummy指的是什么?
- java bt下载_bt: Java种子下载程序
- DPDK Rx flexible descriptor 在Intel E810 网卡中的使用
- 利用webuploader实现超大文件分片上传、断点续传
- 基于weixin-java-tools集成微信小程序支付功能
- connection activation faild
- 论文成功写作技巧之行之有效的写作从“结果”开始(下)
- 注册域名需要资格吗_注册域名的条件是什么 注册域名需要了解哪些
- 多步操作产生错误,请检查每一步的状态
- 查看 修改自己电脑下NPM的镜像地址
- 织梦 tags.php静态化,教你dedecms织梦tag标签页面怎么实现静态化