jQuery实现大图轮播
程序员文章站
2022-04-06 10:14:30
css样式:
*{
margin: 0;
padding: 0;
}
ul{
list-style:none;
}
.slideshow{...
css样式:
*{ margin: 0; padding: 0; } ul{ list-style:none; } .slideshow{ width: 620px; height: 700px; /*其实就是图片的高度*/ border: 1px #eeeeee solid; margin: 100px auto; position: relative; overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/ } .slideshow ul{ width: 2500px; position: relative; /*此处需注意relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如果没有这个属性,图片将不可左右移动*/ } .slideshow ul li{ float: left; /*让四张图片左浮动,形成并排的横着布局,方便点击按钮时的左移动*/ width: 620px; } .slideshow .shownav{ /*用绝对定位给数字按钮进行布局*/ position: absolute; right: 10px; bottom: 5px; text-align:center; font-size: 12px; line-height: 20px; } .slideshow .shownav span{ cursor: pointer; display: block; float: left; width: 20px; height: 20px; background: #ff5a28; margin-left: 2px; color: #fff; } .slideshow .shownav .active{ background: #b63e1a; }
js代码规范:
<script src="../../../jquery/js/jquery-2.1.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ var slideshow=$(".slideshow"), //获取最外层框架的名称 ul=slideshow.find("ul"), shownumber=slideshow.find(".shownav span"), //获取按钮 onewidth=slideshow.find("ul li").eq(0).width(); //获取每个图片的宽度 var timer=null; //定时器返回值,主要用于关闭定时器 var inow=0; //inow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0 shownumber.on("click",function(){ //为每个按钮绑定一个点击事件 $(this).addclass("active").siblings().removeclass("active"); //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉 var index=$(this).index(); //获取哪个按钮被点击,也就是找到被点击按钮的索引值 inow=index; ul.animate({ "left":-onewidth*inow, //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移n个图片大小的宽度,n根据被点击的按钮索引值inowx确定 }) }); function autoplay(){ timer=setinterval(function(){ //打开定时器 inow++; //让图片的索引值次序加1,这样就可以实现顺序轮播图片 if(inow>shownumber.length-1){ //当到达最后一张图的时候,让inow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始 inow=0; } shownumber.eq(inow).trigger("click"); //模拟触发数字按钮的click },2000); //2000为轮播的时间 } autoplay(); slideshow.hover( function(){clearinterval(timer);},autoplay); 另外注意setinterval的用法比较关键。 }) </script>
主体代码:
<body> <div class="slideshow"> <!--图片布局开始--> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/111.jpg"/></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/112.jpg" /></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/113.jpg" /></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/114.jpg" /></a></li> </ul> <!--图片布局结束--> <!--按钮布局开始--> <div class="shownav"> <span class="active">1</span> <span>2</span> <span>3</span> <span>4</span> </div> <!--按钮布局结束--> </div> </body>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: Nginx配置多端口多域名访问的实现