js-图片的轮播-设置主要界面-和鼠标点击进行切换图片

这里使用了一个大的ul

将超出部分隐藏

实现鼠标点击，控制图片的移动

对超链接添加标识，控制图片和超链接的联动显示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}#outer {width: 420px;height: 300px;background-color: #bfa;margin: 50px auto;padding: 10px 0;position: relative;overflow: hidden;}#imgList {list-style-type: none;/* width: 2520px; *//* 开启定位移动 */position: absolute;/*  每次显示到下一张图片 420px *//* left: -420px; */}#imgList li {float: left;margin: 0 10px;}#imgList img {width: 400px;height: 300px;}#navDiv {position: absolute;bottom: 15px;/* outer:宽度420navDiv:(宽度 ：超链接宽度+margin*2)*6个=15+10=25*6=150420-150=270270/2=135_不能写死*//* left: 135px; */}#navDiv a {float: left;width: 15px;height: 15px;background-color: red;margin: 0 5px;opacity: 0.5;/*   兼容IE8的半透明 */filter: alpha(opacity=50);}#navDiv a:hover {background-color: black;}</style><script src="tool动画.js"></script><script>window.onload = function() {var imgList = document.getElementById("imgList");//获取所有图片var imgArr = document.getElementsByTagName("img");imgList.style.width = 420 * imgArr.length + "px";//设置导航按钮var outer = document.getElementById("outer");var navDiv = document.getElementById("navDiv");navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";var allA=document.getElementsByTagName("a");var index=0;//由什么图片选定什么allA[index].style.backgroundColor="black";//点击超链接切换图片for(var i=0;i<allA.length;i++){//先执行for循环 再执行单击相应函数 i不会变//为每一个添加一个属性allA[i].num=i;allA[i].onclick=function(){//alert(this.num);index=this.num;//imgList.style.left=-420*index+"px";move(imgList,"left",-420*index,1,function(){})setA();}};//创建方法选中afunction setA(){//其他的设置为黑色for(var i=0;i<allA.length;i++){allA[i].style.backgroundColor="";//去除样式 就是默认样式}//将选中的变为黑色allA[index].style.backgroundColor="black";}}</script></head><body><div id="outer"><ul id="imgList"><li><img src="../img/a0.png" alt="图片"></li><li><img src="../img/a1.png" alt="图片"></li><li><img src="../img/a2.png" alt="图片"></li><li><img src="../img/a3.png" alt="图片"></li><li><img src="../img/a4.png" alt="图片"></li><li><img src="../img/a5.png" alt="图片"></li></ul><div id="navDiv"><a href="javascript:;" class=""></a><a href="javascript:;" class=""></a><a href="javascript:;" class=""></a><a href="javascript:;" class=""></a><a href="javascript:;" class=""></a><a href="javascript:;" class=""></a></div></div></body>
</html>

js-图片的轮播-设置主要界面-和鼠标点击进行切换图片相关推荐

基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
使用html和js实现的一个简单小练习轮播图.大概功能主要是: 1.使用时间函数自动切换图片: 2.在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型 ...
swiper轮播图 swiper-pagination 小圆点不显示，以及切换图片无效的问题
@[页面会报错]Property or method "swiperOption" is not defined on the instance but referenced du ...
图片竖轮播html,JS实现纵向轮播图（初级版）
本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下描述: 纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度 ...
JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播
效果一: 会自动进行轮播,当鼠标进入轮播图区域会停止轮播,点击左右箭头可以向前.向后进行切换图片效果二: 这种效果比第一种效果简单,只要删除一些代码和修改一些样式即可. 实现原理轮播图整体是放在u ...
Android实现一款不错Banner界面广告图片循环轮播
Demo实现的效果图如下: 工程目录如下图: 一个Application,一个实体类,一个Activity,另一个是自定义的AutoPlayingViewPager继承FrameLayout. 首先看 ...
html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法在页面中引入imgSwitch.min.js ...
html图片3djs轮播,原生js实现3D轮播图
3D轮播图是我做过复杂的图片轮播了,由于是利用坐标,层级之间的关系,所以实现起来原理比较简单但是bug巨多,在推推拖拖了好久后,下定决心重新整理成博客,与大家分享! 首先分析一下3D图片轮播的功能需求 ...
html轮播图原理,30_用js实现一个轮播图效果，简单说下原理
一.原理将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: 轮播图 1 2 3 4 5 < > 只有五张图片,却使用7张来轮播,这 ...

js-图片的轮播-设置主要界面-和鼠标点击进行切换图片

js-图片的轮播-设置主要界面-和鼠标点击进行切换图片相关推荐

最新文章

热门文章