一主要逻辑

//--------图片轮播设计---------
//让box和window相对滑动
//超出部分不显示
//让图像宽度等于window的百分之xx
//上传图片
//根据图片个数创建img
//点击按钮时左右移动
//实时获取div宽度或者页面改变时候更新

html部分

内容：3个按键，分别是往左、往右、添加图片

 <div class="down_img_button" onclick="img_play_left()"><img id="down_img_button1" src="${pageContext.request.contextPath}/bootstrap/img/left.png" ></div><div id="down_img_window"><div id="down_img_box"><img class="down_imgs" src="${pageContext.request.contextPath}/Cloud_AI/Images/B_0-44.jpg" ><img class="down_imgs" src="${pageContext.request.contextPath}/Cloud_AI/Images/B_0-45.jpg" ><img class="down_imgs" src="${pageContext.request.contextPath}/Cloud_AI/Images/B_0-46.jpg" ><img class="down_imgs" src="${pageContext.request.contextPath}/Cloud_AI/Images/B_0-44.jpg" ><img class="down_imgs" src="${pageContext.request.contextPath}/Cloud_AI/Images/B_0-46.jpg" ></div></div><div class="down_img_button" onclick="img_play_right()"><img id="down_img_button2" src="${pageContext.request.contextPath}/bootstrap/img/right.png" ></div><div id="down_img_add_button"><img id="down_img_button3" src="${pageContext.request.contextPath}/bootstrap/img/add.png" ></div>

css部分

（未整理）


.down_img_button:hover   {cursor:pointer;
}
#down_img_add_button:hover   {cursor:pointer;
}#right{float:left;
width:83%;
height:750px;
padding:0;            /*清除内边距*/
margin:0;              /*清除外边距*/
background:#f0f4f7;
}#right_nav{background:#7030a0;
height:60px;
}
#right_main{background:#f0f4f7;
padding:0;            /*清除内边距*/
margin:0;
width:100%;
height:750px;
}
#right_top{height:30%;}
#right_down{height:70%;}
#text_data{height:50px;
width:100%;
float:left;}
#cont_data{width:96%;
margin-left:4%;
float:left;
}
#text_demon{height:50px;
width:100%;
float:left;
}
#cont_demon{width:96%;
margin-left:4%;
float:left;
}
#text_data p,#text_demon p{padding-top:15px;
padding-left:15px;
color:#655f5f;
float:left;
}.violet{height:70%;
margin-left:15px;
margin-top:10px;
width:10px;
background:#7030a0;
float:left;}
#title_box{width: 40%;height: 100%;float:left;}
#title_box img{width: 100%;height: 100%;max-width: 100%;max-height: 100%;  margin:0 auto;
}
#message_box{width: 55%;height: 100%;float:left;margin-left:10px;
}
.message_box2s{width:24%;
height:99%;
margin-right:1%;
background:#fff;
float:left;}
#message_box_1{width:99%;
height:30%;
background:#fff;
float:left;}
#message_box_2{width:99%;
height:60%;
margin-top:6px;float:left;
}#sau{float:right;
margin-top:35px;
margin-right:20px;
color:#aaa;}
.up_img_boxs{width:47%;
height:40%!important;
margin-right:2%;float:left;
}
.up_imgs{width:99%;
height:90%;}
.desc{text-align:center;
margin-top:3px;
color:#655f5f;
}.down_imgs{height:100%;float:left;}#down_img_window{width:70%;
height:45%!important;float:left;
margin-top:3%;
overflow: hidden;}#down_img_box{height:100%;width:3000px;position:relative;
left:0px;
}
.down_img_button{width:5%;
height:45%!important;
background:#7030a0;
float:left;
margin-top:3%;
margin-right:1.5%;
margin-left:1.5%;
position:relative;
}
#down_img_add_button{width:8%;
height:45%!important;
background:#fff;
float:left;
margin-top:3%;
margin-left:2%;
}
.down_img_button img{user-select: none;
position:absolute;
left:30%;
top:30%;
}
#down_img_add_button{position:relative;
}
#down_img_button3{user-select: none;
position:absolute;
left:15%;
top:30%;
}

js部分

（未全部完成，可以用但是上传图片还没写，还有一些可以优化的地方）


<script type="text/javascript">
var img_play_turn=0;
var w = $('#down_img_window').width();var img_w=w*0.32;var img_margin=w*0.015;
alert(img_w);
function img_play(){//获得window的宽度//获取高度// var h = $('#down_img_window').height();//获取宽度var x = document.getElementsByClassName("down_imgs");var i;for (i = 0; i < x.length; i++) {x[i].style.width = (img_w)+"px";x[i].style.marginRight= (img_margin)+"px";}//注意class和id修改style方式的不同}function img_play_right(){if (img_play_turn>-3000){img_play_turn=img_play_turn-(img_w+img_margin);document.getElementById("down_img_box").style.left=img_play_turn+"px";}
}
function img_play_left(){if (img_play_turn<0){img_play_turn=img_play_turn+(img_w+img_margin);document.getElementById("down_img_box").style.left=img_play_turn+"px";}
}img_play();//--------图片轮播设计---------
//让box和window相对滑动，(完成)
//超出部分不显示(完成)
//让图像宽度等于window的百分之xx(完成)
//根据图片个数创建img
//点击按钮时左右移动（完成）
//实时获取div宽度或者页面改变时候更新</script>

javascript实现图片轮播（一次显示多图片）相关推荐

Flexslider图片轮播、文字图片相结合滑动切换效果
Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...
H5图片切换，js图片轮播，js图片自动切换
没有插入图片,效果如下: 注意:下面代码为PC端显示样式,如果要放在手机端,需要微调下style #wrapper.#banner..bg width 自行修改,我的手机端iphone5s 为 wid ...
c语言实现图片轮播,纯css实现轮播图
轮播图的实现原理其实是比较简单的举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把好了,先介绍个 cs ...
Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的" ...
图片轮播器(swift)
如何实现一个无限循环,无缝衔接的图片轮播器自己实现一次以后就不用使用轮播器的框架了能用代码解决的问题就不在这里瞎BB了 O(∩_∩)O 首先先在Carousel文件件夹创建以下几个文件 Caro ...
html论坛原理,html图片轮播原理
素材:你要轮流播放的图片1,图片2,图片3,... 代码: 要怎么实现图片轮播呢? 图片是怎么放到网上的呢? 使用标签这个标签里面可以放1张图片, 在一个时间间隔之后, 改变为另外一张图片. 怎么更 ...
html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
15款jQuery带缩略图的图片轮播切换特效代码
JQuery宽屏电影大图幻灯片轮播切换代码 jquery带文字缩略图的图片轮播切换代码 jQuery OwlCarousel图片滚动插件世界杯图片轮播滚动代码 jQuery仿中国建设银行带缩略图控制滚 ...
php网页轮播图,JavaScript_JavaScript实现图片轮播的方法，本文实例讲述了JavaScript实现图 - phpStudy...
JavaScript实现图片轮播的方法本文实例讲述了JavaScript实现图片轮播的方法.分享给大家供大家参考.具体如下: 这里没有使用到JQUERY,没有过渡效果,图片可自行替换 . test2 ...

javascript实现图片轮播（一次显示多图片）

一主要逻辑

html部分

css部分

js部分

javascript实现图片轮播（一次显示多图片）相关推荐

最新文章

热门文章

javascript实现图片轮播（一次显示多图片）

一 主要逻辑

html部分

css部分

js部分

javascript实现图片轮播（一次显示多图片）相关推荐

最新文章

热门文章

一主要逻辑