轮播的小demo（注意导入jquery-1.11.1.js）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播</title><style>*{margin: 0;padding: 0;}ul li{list-style: none;}div{width: 250px;height: 250px;border: 1px solid #ddd;margin: 20px auto;overflow: hidden;}.img1{width: 49px;border-right: 1px solid tan;float: left;}.img1 li{height: 27px;border-bottom: 1px solid #ddd;font-size: 12px;text-align: center;line-height: 27px;background: #f5f5f5;cursor: pointer;}.img1 .active{background:red;}.img2{float: left;}.img2 li{display: none;}.img2 .active{display: block;}</style><script src="js/jquery-1.11.1.js"></script><script>$(function(){var $Img1 = $(".img1 li");var $Img2 = $(".img2 li");var index = 0; var timer = null;$Img1.on("mouseenter",function(){index=$(this).index()console.log(index)$(this).addClass("active").siblings().removeClass();$Img2.eq(index).addClass("active").siblings().removeClass();})$("div").mouseleave(function (){timer=setInterval(function(){index++if(index >= $Img1.length){index = 0;}$Img1.eq(index).addClass("active").siblings().removeClass();$Img2.eq(index).addClass("active").siblings().removeClass();},1000);}).mouseenter(function (){clearInterval(timer);}).mouseleave();})</script>
</head>
<body><div><ul class="img1"><li class="active">女靴</li><li>雪地靴</li><li>冬裙</li><li>呢大衣</li><li>毛衣</li><li>棉服</li><li>女裤</li><li>羽绒服</li><li>牛仔裤</li></ul><ul class="img2"><li class="active"><img src="img/女靴.jpg" /></li><li><img src="img/雪地靴.jpg" /></li><li><img src="img/冬裙.jpg" /></li><li><img src="img/呢大衣.jpg" /></li><li><img src="img/毛衣.jpg" /></li><li><img src="img/棉服.jpg" /></li><li><img src="img/女裤.jpg" /></li><li><img src="img/羽绒服.jpg" /></li><li><img src="img/牛仔裤.jpg" /></li></ul></div>
</body>
</html>

轮播的小demo（注意导入jquery-1.11.1.js）相关推荐

原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想将一些图片在一行中平铺,然后计算偏移量再 ...
html轮播图水平传送带,12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
js轮播图片小圆点变化_用jQuery实现圆点图片轮播效果
在页面的指定位置实现的图片自动的左右轮流切换展示效果,当点击图片左下的标签(或中间的小圆点)切换到对应的图片.接下来通过本文给大家分享用jQuery实现圆点图片轮播效果实例代码,需要的朋友参考下图片 ...
里面使用轮播_小程序ColorUI框架初步使用教程及个人项目实战
小程序ColorUI框架初步使用教程及个人项目实战最近在写自己的一个微信小程序项目<阿涛技术博客>,目前还在写前端小程序部分,之前我有用过小Weiui,Linui等微信小程序UI框架,在 ...
banner轮播图以及nav导航栏Jquery
轮播图是非常常见的,主要方法是利用了*setInterval()*定时器.隔一段时间就自动显示下一张图片. 首先制作导航栏导航栏的制作非常简单.一般在写导航栏时,都是使用li+a标签的方式. 简单的 ...
TabLayout+ViewPager无限轮播加小圆点，XRecyclerView下拉刷新，加载更多
效果图要导入的依赖 compile files('libs/okhttp-3.9.0.jar') compile files('libs/okio-1.13.0.jar') comp ...
js轮播图片小圆点变化_原生js实现轮播图(两种方法)
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...

轮播的小demo（注意导入jquery-1.11.1.js）

轮播的小demo（注意导入jquery-1.11.1.js）相关推荐

最新文章

热门文章