html+css+js 实现图片轮播效果 |
您所在的位置：网站首页 › 怎么做图片轮播展示模板 › html+css+js 实现图片轮播效果 |
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果
图片轮播效果：
会自动 向左 || 向右 切换图片能手动点击按钮切换图片多用于商品展览等等  ——首先我们创建一个盒子进行展览，然后一个< ul>，< li>来存每张图片。 话不多说，放 代码： HTML
<
>
CSS 这里css的设置不算重要，大家根据我的注释看一下 #banner { height: 75%; width: 100%; overflow: hidden; position: relative; } #banner #ul { width: 6600px; /*ul的宽度我们选择业让那个js动态生成,这样可以减少后期修改带来的麻烦*/ height: 100%; position: absolute; left: -0350px; /*因为我的图片比较大,所以为了能让内容居中,于是移了一些出去*/ top: 0; } #banner li { float: left; /*浮动,使所有图片排成一行*/ width: 2200px; /*设置每个li的宽度(根据自己的图片width进行选择)*/ height: 100%; } #banner img { width: 100%; position: relative; } #banner #left , #banner #right{ /*两边的left、right按钮（< >）*/ width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background-color: cadetblue; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #000; opacity: 0.5; border: 1px solid #fff; } #banner #right{ right: 5px; left: auto; } #banner #left:hover , #banner #right:hover{ opacity: 1; border-color: #000; color: #fff; } #banner #ol{ /*底部的图片精准选择按钮*/ position: absolute; bottom: 10px; left: 50%; } #banner #ol li{ border-radius: 45px; /*令其呈圆形*/ width: 15px; height: 15px; background-color: #CCCCCC; cursor: pointer; /*鼠标呈 手 样式*/ line-height: 20px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 15px; color: #000; opacity: 0.5; /*设置透明度*/ border: 2px solid #333; float: left; margin: 0 10px; } #banner #ol li:hover{ opacity: 0.8; } #banner #ol .now{ /*当前展示图片所对应的数字按钮(这个.now我们由js动态设置)*/ opacity: 1; /*不透明*/ background-color: #333; } js部分 重头来啦~~~~~~~~~~~~~~~~~~~~首先我们先进行对象成员的赋值 obj.offsetLeft：获取对象的left属性值（只读）obj.offsetWidth：获取对象的width属性值（只读） var ul = document.getElementById("ul"); var ol = document.getElementById("ol"); var li = ul.getElementsByTagName("li"); var li_width = li[0].offsetWidth; //获得li的宽度 var left_start = ul.offsetLeft; //获取当前第一张图片的left ul.style.width=(li_width*li.length)+"px";然后是对< ol> < li>的初始化创建 var one=setInterval(“right()”,3000) setInterval() ：方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。返回一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。我们让它每过3秒就调用一次right()向右滑动我们在click的点击中先清除掉setInterval，再创建setInterval，这样可以让用户在选择是有足够的时间观看 var one=setInterval("right()",3000); //setInterval() ：方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 for(var i=0 ; i clearInterval(one); pic=this.id; ul.style.left = (left_start - (pic-1) * li_width) + "px"; //点击那个li就会跳转到那张图片 change(); //见下文 one=setInterval(right,3000); //前面取消了周期时间one，现在又把它开启，后面也会有这种操作，主要是为了使用方便 } }这里我们设置了一下逻辑功能，以及change()方法 pic：这里用来关联当前所展示的图片obj.className：设置标签的class名称，设置完毕后会被css所更改相应样式 var pic=1; var last=document.getElementById(pic); //定义last变量指向一个li标签 last.className="now"; //在css中我已经将class为now的样式设置为特殊设置，是为了突出 function change(){ //“改变”方法：动态设置当前显示的图片所对应按钮的格式 last.className=" "; //清除上一个的格式 document.getElementById(pic).className="now"; //为当前li添加className（需要css配合使用.now{设置格式}） last=document.getElementById(pic); //更新last }接下来就是最重要的部分了left()与right() 这里我自认为注释已经写得很全了，哈哈哈哈，若有那里不清楚的欢迎评论这里主要就是一些逻辑的部分，利用几个属性来回改变< ull>的left left值越少，就越到后面的图片 ul.style.transition="left 0.5s, right 0.5s"; //为图片轮播效果加一个transition过渡动画，当然是为了更好看啦 function left() { //向左按钮 clearInterval(one); //先暂停 /*if (ul.offsetLeft > left_start - li_width) { //考虑到当前图片已经是第一张，点击left按钮就跳向最后一张 */ // 这种方法出了Bug if(pic == 1){ ul.style.left = (left_start - (li.length - 1) * li_width) + "px"; pic=li.length; //li.length就相当于是最后一张图片的id了（见前面这只id部分） } else { ul.style.left = (ul.offsetLeft + li_width) + "px"; pic--; //向前翻一张，当然就减一了 // alert(ul.offsetLeft); } change(); //每次改变是都调用change()函数 one=setInterval(right,3000); //重新开始周期调用 } function right() { //向右按钮 clearInterval(one); /* if (ul.offsetLeft < left_start - (li.length - 2) * li_width) {//考虑到已经是最后一张的情况，跳向第一张 */ if(pic == li.length){ ul.style.left = (left_start) + "px"; pic=1; } else { ul.style.left = (ul.offsetLeft - li_width) + "px"; pic++; // alert(ul.offsetLeft); } change(); //调用改变函数 one=setInterval(right,3000); }好了，码字不易，欢迎 点赞 评论
|
【本文地址】
今日新闻 |
推荐新闻 |