最近做了一个活动页面需要做到轮播效果,并且有左右点击,和上面的tab切换类似的。
就用原生代码写
html结果
<div class="img33" id="carousel"> <img src="images/img01.jpg" /> <a href="###" id="oleft" class="left"></a> <a href="###" id="oright" class="right"></a> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>
js代码:
<script type="text/javascript"> $(document).ready(function() { var oCar=document.getElementById("carousel"); var oLeft=document.getElementById("oleft"); var oRight=document.getElementById("oright"); var oImg=oCar.getElementsByTagName("img")[0]; var aLi=document.getElementsByTagName("li"); var arrUrl = [ 'images/img01.jpg', 'images/img02.jpg','images/img03.jpg','images/img04.jpg','images/img05.jpg' ]; var num=0; var timer = null; //定时器 function autoPlay(){ timer = setInterval(function(){ num++; num%=arrUrl.length; fnTab(); }, 3000); } // autoPlay(); //有用户来操作的定时器,开启之前一定要先关闭 setTimeout( autoPlay, 1000 ); oCar.onmouseover = function (){ clearTimeout( timer ); }; oCar.onmouseout = autoPlay; //初始化 function fnTab(){ oImg.src = arrUrl[num]; for( var i=0; i<aLi.length; i++ ){ aLi[i].className = ''; } aLi[num].className = 'active'; } fnTab(); //鼠标放上去显示本块内容 for( var i=0; i<aLi.length; i++ ){ aLi[i].index = i; // 索引值 aLi[i].onmouseover = function (){ num = this.index; fnTab(); }; } //左右轮播点击事件 oLeft.onclick= function(){ num --; if(num == -1){ num = arrUrl.length-1 } fnTab(); }; oRight.onclick = function(){ num ++ if(num == arrUrl.length){ num = 0 } fnTab(); } }); </script>
css代码
.img33 ul{ position:absolute; top:5px; left:0; width:1021px; height:66px;} .img33 ul li{ float:left; display:inline; width:200px; height:66px; line-height:66px; cursor:pointer; text-align:center; font-size:28px; float:left; display:inline; text-decoration:none; font-weight:700; color:#ffa100} .img33 ul li:hover, .img33 ul .active{ color:#fff10a; font-size:32px; font-weight:700;} .img33 img{ width:1021px; height:648px; border:none;} .img33 .left{ position:absolute; top:300px; left:2px; background:url(../images/left.jpg) no-repeat; width:48px; height:92px;} .img33 .right{ position:absolute; top:300px; right:2px; background:url(../images/right.jpg) no-repeat; width:48px; height:92px;}
相关推荐
绘制的axure轮播图,使用动态面板进行绘制,所用到的都是使用最简单的方式进行的实现,优化了好几次,功能包含底部小圆点,支持点击切换至对应的页面,自动轮播与左右切换,帮助你快速实现轮播功能
js图片轮播 左右箭头点击切换图片 底部小圆点点击切换图片 参考资源:本代码由js代码收集并编辑整理;js代码链接
1.轮播图主要结构,左右箭头,下方小圆点。 2.鼠标经过才显示左右箭头,鼠标离开时隐藏。 3.根据轮播图的图片个数,动态生成小圆点。 4.点击小圆点,滑动到对应图片。 5.点击右箭头,换一张图片,图片往后滑动一次,...
图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签; 整体思路 : ——————————————...
原生JS制作自动+手动轮播图,附带二级分类菜单 包含以下功能: 1、鼠标移开自动轮播 2、鼠标移入停止自动轮播 ...3、点击左右按钮可手动切换图片 4、点击索引小圆点可手动切换图片 5、鼠标移入一级菜单展开二级菜单
实现图片定时轮切效果,有较好的缓冲,不是简单轮切
1、先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有... 点击左右箭头切换上一张,下一张图片。 下方小圆点显示当前位第几张图片。 4、使用Vue实现 5、示例代码 结构html: <div id=slider>
如何实现轮播图 如何才能在js里面做成一个轮播图呢,比如下面这种的,可以自动生成图片对应的小圆点、点击左右箭头可以跳到上或下一张图片、每隔几秒自动轮播,还可以点击小小圆点去到指定的图片。 HTML结构 ...
点击轮播图左右按钮(点击图片可以平滑切换,下方小圆点也跟随图片变化),点击下方小圆点(可以平滑切换图片)
图片从左往右轮播,下面带小圆点标签,点击箭头左右翻页
支持左右翻页,自动翻页,点击圆点翻页
简易实现淘宝轮播图效果 功能: 1.点击左右两边的箭头按钮,可以前后滑动图片 2.自动轮播 3.底下小圆点随页面的变换而点亮和熄灭
自动轮播,鼠标移入轮播停止、移出继续,小圆点点击切图,左右箭头切图 效果图: ![轮播图] 思路: 将所有需要轮播的图片横向排列,可视区大小设置为只能显示一张图片,给容器设置移出隐藏后,可视区之外的部分被...
本人的原创轮播图的完整版代码,讲解在上一篇文章中,点击左右按钮切换图片,自动播放,点击小圆点播放,图片与小圆点同步,节流阀等均有实现,直接更换图片使用即可,注意图片路径不要搞错,有需要的小伙伴直接拿就...
自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型。改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,...
图片自动轮播,点击圆点有左右箭头切换。 包含两种方法:普通函数方法、面对对象封装方法
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果。轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是...
左右的小按钮(图片会随着左右的点击移动) 2**重点内容.还有位于中间的小圆点(点击小圆点会跳转到那个图片) 3重点内容**轮播图会自己向左滑动(里面有一个定时器自动播放) 分析完之后就是我们写代码(这个是仿京东的...
自动轮播,鼠标移入轮播停止、移出继续,小圆点点击切图,左右箭头切图 效果图: 思路 通过编写过渡动画实现轮播效果,图片的出现动画以及移出动画。显示区的图片移出,切换的图进入分别调用动画,程序关键点:哪...