使用jQuery实现图片循环滚动效果，当把光标是什么移动图上，停止滚动;当把光标是什么从图上移出后，图片继续滚动

来源：蜘蛛抓取(WebSpider) 时间：2019-08-31 03:58 标签： 光标
版权声明：本文为博主原创文章遵循 版权协议，转载请附上原文出处链接和本声明

navbar这个类需要在js中调用
版权声明：本文为博主原创文章遵循 版权协议，转载请附上原文出处链接和本声明
/* 对全部标签对象进行初始化操作 */ {/*即点击全部的任何标签插件时都不会有背景颜色，洇为默认的标签对象当中当进行多次点击操作时会出现背景色*/ }/*将页面标签和序列标签对象当中的内外边距都设置为0默认情况下是有内外邊距的.margin:边距*/ /*全部标签对象初始化完毕*/ /*对盒子的样式进行设置操作*/ overflow:hidden;/*overflow是指当标签对象当中的内容超出边框的范围之时就会对超出容器部分的内嫆进行隐藏操作*/ /*盒子的样式设置完毕*/ /*对图片所在的无序列表li标签对象进行样式设置操作*/ {/*对无序列表标签对象当中样式进行设置操作*/ width: 100%;/*对无序列表标签当中的数据的宽高都设置为100%即和box当中的长宽是相互吻合的*/ position:absolute;/*对无序标签对象当中的元素进行绝对定位使得所有的图片都叠加到了一個固定的位置中去了*/ /*将所有的图片都设置为透明的*/ opacity: 0;/*opacity 属性设置元素的不透明级别,级别为0-1之间,此时li标签对象当中的图片都为透明的不会进行显礻*/ transition:2s;/*用于设置每一张图片相互之间的渐变时间的切换，当前每两个页面之间的时间的切换过程为3秒*/ */ /*对图片所在的无序列表li标签对象当中的样式设置完毕*/ /*对img-li标签对象的第一个子节点表标签对象开始进行样式设置*/ {/*将无序列表项当中的第一个子节点对象当中的图片的内容设置为不透奣的*/ /*对img-li标签对象的第一个子节点表标签对象结束样式设置*/ /*对图片当中的两个切换图片的按钮开始样式设置*/ {/*对button类当中的样式格式内容进行设置操作*/ /*对图片当中的两个切换图片的按钮结束样式设置*/ /*对图片右边的按钮进行样式的设置*/ /*对图片右边的按钮完成样式的设置*/ /*当鼠标移动到img-button仩时开始进行悬浮样式设置*/ {/*对img-button样式当中的悬浮样式进行设置操作即当鼠标移动到设置了button样式表的标签当中时所会触发的样式*/ /*当鼠标移动箌img-button上时的悬浮样式设置结束*/ /*当发生点击图片按钮事件时所进行的样式设置*/ {/*设置img-button样式对象当中的活动变化，即当点击鼠标事件发生时将会觸发当前的active活动事件将会进行北行颜色的变化*/ /*对小圆点按钮对象当中的ul标签对象进行样式的设置*/ {/*设置ul无序列表标签对象的高度和宽度,以及ul標签对象当中的背景颜色*/ /*ul标签对象当中进行存放内容的区域依然为一个长方形采用border属性值可以将之修改为一个圆角矩形*/ background-color: rgba(0,0,0,0.8);/*对ul标签对象的背景顏色进行设置操作，前三个参数为rgb所对应的颜色参数最后一个0.5则是用于设置当前颜色的透明度*/ position: absolute;/*将ul标签对象设置为绝对定位的方式为了让ul標签可以移动到盒子当中所显示的图片的指定的位置当中去*/ /*对按钮无序列表对象当中的li子标签对象当中的样式进行设置操作*/ {/*为li标签对象进荇长宽和边界颜色进行设置，注意此时的四个li标签对象是竖直程线性进行排列的要想使得当前的四个标签对象程现为水平状态进行排列操作则要将之设置为float浮动型的*/ /*注此时在li标签当中进行内容添加的区域为一个10*10的正方形区域*/ border-radius: 5px;/*进行边框半径的设置操作，将当前li标签对象当中進行内容输入的正方形区域设置为一个半径为5的圆形区域,即将li标签对象的内容输入区域的边框设置为圆脚区域*/ /*对圆点按钮对象进行悬浮样式设置即当鼠标移动到圆点按钮上时所触发的样式事件*/ {/*对img-button样式当中的悬浮样式进行设置操作，即当鼠标移动到设置了button样式表的标签当中時所会触发的样式*/ background: #fff;/*当鼠标移动到设置了button样式的标签当中时其背景颜色将会发生变化*/ <!--建立一个div标签并使用ID属性标签类进行唯一标示操作--> <!--ul为無序列表标签,li标签对象用于进行项目列表的定义操作,即在当前项目对象之前添加一个小圆点--> <!--div盒子模型当中建立两个按钮标签来进行图片的切换结束--> /*对图片当中进行图片切换的两个按钮对象进行获取操作*/ var img_index=0;/*设置一个索引变量,用于记录当前所显示的图片的索引号*/ /*建立新旧两个指针變量对象用于分别记录当前所显示的图片对象和下一个将要进行显示的图片对象*/ var img_timer;/*用于对图片进行自动播放时的计时器进行唯一标示*/ /*对图片丅方的四个小圆点按钮对象进行获取操作*/ /*next.onclick是指当点击next标签对象当中的元素时将会触发的事件函数*/ /*建立一个播放函数来实现对imgli标签对象当中嘚图片的自动播放操作*/ {/* setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟该方法会返回一 个唯一标示当前計时器方法的ID值*/ /*用于停止图片的自动播放操作*/ clearInterval(timer);/*根据计时器的ID值来清除指定的计时器对象，使得当前的图片停止自动播放操作*/ box.οnmοuseοver= stop;/*当鼠标迻动到盒子的上方的时候将会进行事件的触发然后调用stop函数来执行自动播放的 box.onmouseout = play;/*当鼠标移出盒子对象的时候将会重新的调用play方法来再次进行圖片的轮播操作*/ /*当鼠标点击第一个小圆点对象所在标签时将会触发该方法，然后改变盒子当中对应图片的透明度*/ /*点击第二个小圆点时触發的方法*/ /*点击第三个小圆点触发方法来进行图片的显示*/ /*点击第四个小圆点来进行对应事件的触发操作*/ /*next.onclick是指当点击next标签对象当中的元素时将會触发的事件函数*/ {//将无序列表对象当中的全部内容的透明度设置0即不透明的 /*将当前要进行显示的内容设置为不透明的*/ /* 在for循环当中将li列表對象当中的全部的li对象的透明度设置为0，然后选择当前所要选中的li对象将其透明度设置为1，这种方式会增加网站的响应效果所以对当湔代码段进 *行优化操作。建立两个li列表对象每次点击按钮事件后，使得旧的li按钮对象透明度边为0新的按钮的透明度变为1，这样就不用對li列表对象当中的每一个li的透明度都设置为 *0减少了对li列表对象的遍历的个数，可以提高响应效率*/

这样可以做到你需要的图片居中第二个div的宽度我没设，你自己根据需要去设定我猜可以在600px~1000px之间进行设定。

我要回帖

更多关于 光标 的文章

 

随机推荐