使用 jQuery 制作京东网的焦点图

阅读：评论：0

使用 jQuery 制作京东网的焦点图

HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>京东</title><script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script><script type="text/javascript" src="js/test.js" ></script><link rel="stylesheet" href="css/test.css" /></head><body><div class="out"><ul class="img"><li><a href="#"><img src="img/1.jpg" alt=""></a></li><li><a href="#"><img src="img/2.jpg" alt=""></a></li><li><a href="#"><img src="img/3.jpg" alt=""></a></li><li><a href="#"><img src="img/4.jpg" alt=""></a></li><li><a href="#"><img src="img/5.jpg" alt=""></a></li><li><a href="#"><img src="img/6.jpg" alt=""></a></li></ul><ul class="num"></ul><div class="left btn"><</div><div class="right btn">></div></div></body>
</html>

　　CSS

*{padding:0; margin:0;}
ul{ list-style:none;}
.out{ width:730px; height:454px;  margin:50px auto; position:relative;}
.out .img li{ position:absolute; top:0;left:0;display: none;}.out .num{ position:absolute; bottom:20px;left:0; font-size:0px; text-align:center; width:100%;}.out .num li{ width:20px; height:20px; background:#666; color:#fff; text-align:center; line-height:20px; border-radius:50%; display:inline-block; 
             font-size:16px; margin:0 3px; cursor:pointer;}
.out .num li.active{ background:#a00}.out .btn{ position:absolute; top:50%; margin-top:-30px;width:30px; height:60px; background:rgba(0,0,0,0.5); 
          color:#fff; text-align:center; line-height:60px; font-size:40px; display:none; cursor:pointer;}
.out:hover .btn{ display:block;}
.out .left{ left:0}
.out .right{ right:0;}

$(document).ready(function(){//代码初始化var size=$(".img li").size();for(var i=1; i<=size; i++){var li="<li>"+i+"</li>";$(".num").append(li);}//手动控制轮播图$(".img li").eq(0).show();$(".num li").eq(0).addClass("active");$(".num li").mouseover(function(){$(this).addClass("active").siblings().removeClass("active");		var index=$(this).index();	i=index;$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);	})//自动轮播var i=0;var t=setInterval(move,1500);//核心向左运动函数function moveL(){i--;if(i==-1){i=size-1;	}$(".num li").eq(i).addClass("active").siblings().removeClass("active");$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);}//核心向右运动函数function move(){i++;if(i==size){i=0;	}$(".num li").eq(i).addClass("active").siblings().removeClass("active");$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);}//左边按钮点击事件$(".out .left").click(function(){moveL();})//右边按钮点击事件$(".out .right").click(function(){move()})//定时器的开始于结束$(".out").hover(function(){clearInterval(t)},function(){t=setInterval(move,1500);})})

　效果：

2017-09-22 21:53:08

转载于:.html

本文发布于:2024-02-01 14:53:53，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170677043537398.html

上一篇：京东静态html原理,京东网的那些商品页面都是伪静态的吗？

下一篇：交换机套装书获京东网双重重磅推荐

标签：京东焦点 jQuery

留言与评论（共有 0 条评论）