js轮播图实现简单代码点击图片左右切换,js轮播图实现简单代码可改变宽高,JS轮播图实现简单代码

js轮播图实现简单代码点击图片左右切换,js轮播图实现简单代码可改变宽高,JS轮播图实现简单代码

这篇文章主要为大家详细介绍了射流研究…轮播图实现简单代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了射流研究…轮播图实现代码,供大家参考,具体内容如下

思路:

1、首先要有个盛放图片的容器,设置为单幅图片的宽高,且溢出:隐藏,这样保证每次可以只显示一个图片

2、集装箱内有个放图片的目录进行位置的定位,其中的图片采用漂浮物的方式,同时当图片进行轮播时,改变目录的左边的值使得其显示的图片发生变化。

3、图片的轮播使用定时器,通过定时器改变目录的左边的值是的图片循环展示

4、当鼠标滑动到图片上时,清除定时器,图片停止轮播,当鼠标移出时继续进行轮播

5、图片上有一组小圆点用于与当前显示的图片相对应,同时可以通过点击的方式查看对应的图片

6、图片可以通过点击进行左右滑动显示

代码:

!文档类型超文本标记语言

html lang='en '

meta charset='UTF-8 '

标题轮播图/标题

style type='text/css '。容器{

边距:0自动;

宽度:600像素

高度:400像素

位置:相对;

溢出:隐藏;

边框:4px纯灰;

箱形阴影:3px 3px 5px灰色;

边框半径:10px

}。列表{

宽度:4200像素

高度:400像素

位置:绝对;

top:0px;

}

img{

浮动:左;

宽度:600像素

高度:400像素

}。圆点{

位置:绝对;

左:40%;

底部:30px

列表样式:无;

}。圆点李{

浮动:左;

宽度:8px

高度:8px

边界半径:50%;

背景:灰色;

左边距:5px

}。圆点。活动{

背景:白色;

}。前,下一个{

位置:绝对;

top:40%;

字体大小:40px

颜色:白色;

文本对齐:居中;

背景:rgba(128,128,128,0.5);

/*显示:无;*/

}。前{

左:30px

}。下一个{

右:30px

}

/风格

/头

身体

div class='容器'

div class=' list ' style=' left:-600 px;'

img src='img/5.jpg '

img src='img/1.jpg '

img src='img/2.jpg '

img src='img/3.jpg '

img src='img/4.jpg '

img src='img/5.jpg '

img src='img/1.jpg '

/div

ul class='dots '

li index=1 class='active dot'/li

li index=2 class='dot'/li

li index=3 class='dot'/li

li index=4 class='dot'/li

li index=5 class='dot'/li

/ul

div class='pre'/div

div class='next'/div

/div

脚本类型='文本/javascript '

var指数=1,定时器;

函数init(){

事件绑定();

autoPlay();

}

init();

函数自动播放(){

timer=setInterval(function () {

动画(-600);

网点指数(真);

},1000)

}

函数stopAutoPlay() {

间隙(定时器);

}

函数点索引(添加){

如果(添加){

指数;

}

否则{

索引-;

}

if(index5){

指数=1;

}

if(index1){

指数=5;

}

dot active();

}

函数dotActive() {

var dots=文档。getelementsbyclassname(' dot ');

var len=dots.length

for(var I=0;ileni ){

圆点[我].点';

}

for(var I=0;ileni ){

/*此处可以不用parseInt,当不用全等时*/

if(index===parseInt(dots[i].获取属性(' index '){

圆点[我].点活动';

}

}

}

函数eventBind(){

/*点的点击事件*/

var dots=文档。getelementsbyclassname(' dot ');

var len=dots.length

for(var I=0;ileni ){

(函数(j){

点[j]的缩写.onclick=函数(e){

var ind=parseInt(dots[j].获取属性(“index”);

动画((索引-索引)*(-600));/*显示点击的图片*/

索引=ind

dot active();

}

})(一)

}

/*容器的盘旋事件*/

var con=文档。getelementsbyclassname(' container ')[0];

/*鼠标移动到容器上时,停止制动滑动,离开时继续滚动*/

con.onmouseover=function (e) {

停止自动播放();

}

con.onmouseout=函数(e){

autoPlay();

}

/*箭头事件的绑定*/

var pre=文档。getelementsbyclassname(' pre ')[0];

var next=文档。getelementsbyclassname(' next ')[0];

pre.onclick=函数(e) {

网点指数(假);

动画(600);

}

next.onclick=function (e) {

网点指数(真);

动画(-600);

}

}

函数动画(偏移){

var列表=文档。getelementsbyclassname(' list ')[0];

var left=parse int(lists。风格。向左。切片(0,列表。风格。向左。(' p '))偏移量的索引;

如果(左-3000){

列表。风格。left='-600 px ';

}

else if(左-600){

列表。风格。left='-3000 px ';

}

否则{

列表。风格。left=左‘px’;

}

}

/脚本

/body

/html

精彩专题分享:jQuery图片轮播Java脚本语言图片轮播引导程序图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: