html+轮播图下标跳转代码,最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性:
素材图片:
代码一:
最简单的轮播广告
body, div, ul, li {
margin: ;
padding: ;
}
ul {
list-style-type: none;
}
body {
background: #;
text-align: center;
font: px/px Arial;
}
#box {
position: relative;
width: px;
height: px;
background: #fff;
border-radius: px;
border: px solid #fff;
margin: px auto;
}
#box .list {
position: relative;
width: px;
height: px;
overflow: hidden;
border: px solid #ccc;
}
#box .list li {
position: absolute;
top: ;
left: ;
width: px;
height: px;
opacity: ;
transition: opacity .s linear
}
#box .list li.current {
opacity: ;
}
#box .count {
position: absolute;
right: ;
bottom: px;
}
#box .count li {
color: #fff;
float: left;
width: px;
height: px;
cursor: pointer;
margin-right: px;
overflow: hidden;
background: #F;
opacity: .;
border-radius: px;
}
#box .count li.current {
color: #fff;
opacity: .;
font-weight: ;
background: #f
}
var box=document.getElementById('box');
var uls=document.getElementsByTagName('ul');
var imgs=uls[].getElementsByTagName('li');
var btn=uls[].getElementsByTagName('li');
var i=index=; //中间量,统一声明;
var play=null;
console.log(box,uls,imgs,btn);//获取正确
//图片切换, 淡入淡出效果我是用(transition: opacity .s linear)做的,不纠结、简单 在css里面
function show(a){ //方法定义的是当传入一个下标时,按钮和图片做出对的反应
for(i=;i
btn[i].className=''; //很容易看懂吧?每个按钮都先设置成看不见,然后把当前按钮设置成可见。
btn[a].className='current';
}
for(i=;i
imgs[i].style.opacity=;
imgs[a].style.opacity=;
}
}
//切换按钮功能,响应对应图片
for(i=;i
btn[i].index=i; //不知道你有没有发现,循环里的方法去调用循环里的变量体i,会出现调到的不是i的变动值的问题。所以我先在循环外保存住
btn[i].οnmοuseοver=function(){
show(this.index);
clearInterval(play); //这就是最后那句话追加的功能
}
}
//自动轮播方法
function autoPlay(){
play=setInterval(function(){ //这个paly是为了保存定时器的,变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
index++;
index>=imgs.length&&(index=);//可能有优先级问题,所以用了括号,没时间测试了。
show(index);
},)
}
autoPlay();//马上调用,我试过用window.onload调用这个方法,但是调用之后影响到了其他方法,使用autoPlay所以只能这样调用了
//div的鼠标移入移出事件
box.οnmοuseοver=function(){
clearInterval(play);
};
box.οnmοuseοut=function(){
autoPlay();
};
//按钮下标也要加上相同的鼠标事件,不然图片停止了,定时器没停,会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。
代码二:
首先第一步,下载好一个jquery库的插件,jquery.js 网上很多随处可以下载.下载的插件要放在目录下.然后在html文档中链接好
第二步,布局好一个DIV,如:
上一张
下一张
//上面的li要设定为显示,因为是第一张图片.
由于方便各位网友下载能够清晰明了,我就没有用图片路径了,因为到你们电脑上就看不到了,这里用背景颜色.
第三步,就到了写CSS的时候了.下面的CSS懂基础的人都看得懂.
#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//这里是给整个大的DIV设定属性.
#scroll ul{height:180px; list-style:none;}//DIV下的UL属性.
#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//DIV下的UL下的LI属性.注意:display:none;因为要将所有的li隐藏了先.当点击的时候在显示出来.
.subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一张按钮的属性.注意一个绝对定位.
.subr{
position:absolute;
bottom:20px; right:40%;
width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer;
}//下一张按钮的属性.注意一个绝对定位.
.subr:hover{ background:yellow;border-radius:10px;}
.subl:hover{ background:yellow;border-radius:10px;}
//以上两个hover是鼠标经过的效果.
第四步,就是jquery代码了!也很简单.先将代码看一遍,你就会用了!
/*轮播*/
$(function(){
var i=0;
var len=$("#scroll ul li").length-1;
$(".subl").click(function(){
if(i==len){
i=-1;
}
i++;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
});
//到这里分开!上面的是上一张点击的效果代码,下面的是下一张点击的效果代码.
$(".subr").click(function(){//获取类名的点击事件.
if(i==0){
i=len+1;
}
i--;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
});
});
/*轮播*/
四步轻松搞定一个简单的轮!
到此这篇关于最简单的JavaScript图片轮播代码(两种方法)的文章就介绍到这了,更多相关最简单的图片轮播内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
html+轮播图下标跳转代码,最简单的JavaScript图片轮播代码(两种方法)相关推荐
- 代码操作Word时,目录自动更新的两种方法
最近的项目中有一个功能点为:根据分析数据库并生成报告.不过不是大数据.数据挖掘之类,报告的内容.组织方式都是事先固定下来的.实现的方式为,在普通word文档中插入书签制成模板,然后程序使用OpenXM ...
- html轮播图兼容ie8,多功能响应式兼容IE8图片轮播
2016-09-27 10:02:56 前段时间在写一个官网,官网中很多地方都用到了图片轮播,但是需求中要求网站适配到IE8同时具有自适应的特点,适配各种尺寸的浏览器和移动端浏览器.于是我尝试了在网上 ...
- html轮播图水平传送带,经典的白富美型jQuery图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- c语言绘制松树图形代码,WPS怎么画松树? wps画松树的两种方法
wps中可以绘制一些图形,该怎么绘制松树图形呢?下面我们就来看看详细的教程. 方法一: 许多小伙伴可能只知道WPS文档是一款专门用于文字编辑的软件,其他它还可以是画画,是的,你没有看错,就是画画.今天 ...
- 详细简单的php图片轮播,最简单的JavaScript图片轮播代码(两种方法)_javascript技巧...
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告 代码二: 首先第一步,下载好一个jquery库的插件,jquery.js 网上很多随处可以下载.下载的插件要放在目录下. ...
- textView代码设置文字居中失效 textView设置文字居中两种方法
1.TextView的高度占据整个父控件的高度,然后设置TextView的Grayvity Center就可以了. 2.如果第一个方法不行,那么,textView的高度设置为warp_content, ...
- 两种方法判断是否为移动端访问,跳转到对应wap页面
随着移动互联网的迅猛发展,越来越多的用户选择使用移动端浏览器访问网页.当用户访问一个网站的pc端页面的时候,往往是非常影响用户体验的.我们希望当用户使用移动端浏览器访问我们的pc端网站的时候,自动跳转 ...
- 两种方法实现轮播图效果
实现轮播图 学习前端差不多两三个月,在这里记录分享一下.因本人菜鸟一枚,希望大佬们多多指点,勿喷. 通过计算每一张图片高度实现滑动轮播图 HTML代码: <div class="fat ...
- 【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
轮播图已经成了页面开发中不可缺少的一部分,日常生活中随处都能见到轮播图的身影,例如平常我们购物的淘宝,京东等等,都靠着轮播图在一片 有限的区域内展现出更多的商品.这也是前端程序员最早接触到的练手小项目 ...
最新文章
- 解决:Error: Aesthetics must be either length 1 or the same as the data (5): fill
- moco 搭建接口mock环境入门
- 3、HTML网页基本概念
- MySQL-获取有性能问题SQL的方法_慢查询 实时获取
- Eclipse 中修改android的Default debug keystore 搬家、备份后启动Android PANIC :Could not open D:\java2\android\and
- zookeeper集群介绍
- 为MongoDB添加身份验证
- 如何安装mavaen_Maven的安装及配置
- 【linux】Redhat 7 更新 yum源
- 电脑使用技巧提升篇2:修改电脑桌面固定图标
- 一个简单LEGv8处理器的Verilog实现【三】【工具使用和编程规范】
- 微博先锋:Twitter系统结构分析
- ps 去除gif水印
- html 灯箱效果样式,jQuery灯箱效果插件-Swipebox
- 快速查毒及电脑防毒的解决方案
- 《遥远的救世主》遵守客观规律(七)——文化属性
- IOS OpenGL ES GPUImage 滤色混合 GPUImageScreenBlendFilter
- 5.里氏代换原则依赖倒置原则
- 白手起家学习使用flex (5) 在Flash Builder5 中引用 fla 文件中的类( symbol )
- Matlab仿真图导入Visio高清可编辑