转~~前端轮播简单实现啵啵啵！！！ 2016-09-21 14:32:53

需要实现的效果----》新闻，shopping ，物品的轮播展示，鼠标点击锁定。

　　效果图：

　　代码实现---》　　

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><title></title><link rel="stylesheet"href=""><style type="text/css">div,img,ul,li{padding:0px;margin:0px;}.content{width:480px;height:300px;border:1px solid red;margin:100px auto;}img{width:100%;height:100%;padding-bottom:10px;}ul li{list-style:none;float:left;border:1px solid orange;height:30px;width:58px;text-align:center;line-height:30px;}
</style>
</head>
<body><div class="content"><img src="./img/1.jpg"alt=""><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></div></body><script type="text/javascript">var oImg = document.getElementsByTagName('img')[0];var count = 1;function changePic() {count++;if (count > 6) {count = 1;}oImg.src = 'img/' + count + '.jpg';}var interID = setInterval(changePic, 1000);//鼠标移入停止播放
        oImg.onmouseover = function() {clearInterval(interID);}//鼠标移出继续播放
        oImg.onmouseout = function() { clearInterval(interID);interID = setInterval(changePic,1000);}//鼠标移入到数字上的时候,显示对应的图片var oLi = document.getElementsByTagName('li'); for (var num = 0;num < oLi.length;num++) { //给每个li标签增加属性，保存当前的索引位置
            oLi[num].index = num;//移到到数字上,停止播放
            oLi[num].onmouseover = function() { //停止播放
                clearInterval(interID);this.style.background = 'orange';count = this.index; //调用循环播放图片方法
                changePic();}//移出时,继续从停止的地方播放
            oLi[num].onmouseout = function() {clearInterval(interID);interID = setInterval(changePic, 1000);this.style.background = 'white';count = this.index;changePic();}}</script></html>

　　参考url：https://xianfei689.github.io/hg-canvas/pc/carousel/carousel.html

转载于:https://www.cnblogs.com/xianfei689/p/5892623.html

转~~前端轮播简单实现啵啵啵！！！相关推荐

web 完整轮播图前端轮播图详细
web 完整轮播图前端轮播图预览: 应用 HTML + CSS + JS HTML CSS JS 预览: 应用 HTML + CSS + JS JS代码分析如下: html代码比较简短,这里用j ...
来给你20个优秀的......前端轮播图插件
上期入口:24个 CSS 高级技巧合集这20个,可都是咱们村最好的,年龄都不超过25,一个比一个长的好看.你加人家微信先聊,总有一个你喜欢的.老大不小的人了,别太挑,遇到合适的,就去Github搬过 ...
iOS文字轮播简单实现（UILabel）
因项目需求,要做一个文字轮播用来展示一些通知内容,以前也有过这个需求,但之前都是在网上找的第三方,现在有点时间就自己写了个简单的. 整体思路:用一个UILabel来展示内容,通过UIView动画来实现 ...
前端轮播插件banner
写了一个轮播图滑动的动态效果,需要的码友可以来用哦,通过此js脚本可以配置轮播图是由有自动轮播,是否有左右按钮,配置轮播滑动的时长,是否可以通过页码点击来切换轮播图,轮播图页码显示的问题等. gith ...
Android 图片轮播框架 ImageSlider 炫酷轮播简单使用
1.Android studio用户添加依赖: compile 'com.squareup.picasso:picasso:2.5.2' compile 'com.nineoldandroids:li ...
前端轮播图，无缝衔接
1.假设三张图片轮播,首先要把三张图放在一个div里,但只显示一张图 <div class="window" style="width:1140px"&g ...
php前端轮播图代码,swiper轮播图代码实例
index .swiper-container{ width:100%; height:50%; } .he{ width:100%; height:100%; } var swiper = new ...
js图片轮播（翻页切换）
前面已经介绍了两种常见的图片轮播样式,今天将介绍一种更为常见的图片轮播形式,和淘宝的功能样式类似,这三种轮播基本上涵盖了常见网站图片轮播的所有类型,难度的话,个人认为淡入淡出是比较难的,但只要用心,仔 ...
php 更换轮播图片不显示不出来,layui 轮播图动态数据不显示问题
layui.use('carousel', function() { var carousel = layui.carousel; var ins = carousel.render({ elem: ...

转~~前端轮播简单实现啵啵啵！！！

转~~前端轮播简单实现啵啵啵！！！ 2016-09-21 14:32:53

转~~前端轮播简单实现啵啵啵！！！相关推荐

最新文章

热门文章

转~~前端轮播 简单实现 啵啵啵！！！

转~~前端轮播 简单实现 啵啵啵！！！ 2016-09-21 14:32:53

转~~前端轮播 简单实现 啵啵啵！！！相关推荐

最新文章

热门文章

转~~前端轮播简单实现啵啵啵！！！

转~~前端轮播简单实现啵啵啵！！！ 2016-09-21 14:32:53

转~~前端轮播简单实现啵啵啵！！！相关推荐