首页 > 代码库 > 实现自动图片轮播
实现自动图片轮播
效果
<!DOCTYPE html> <html> <head> <title>图片轮播，新闻轮播，焦点新闻轮播</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var index=0; var slideFlag = true; var length=$(".roll-news-image img").length; function showImg(i){ $(".roll-news-image img") .eq(i).stop(true,true).fadeIn(800) .siblings("img").hide(); $(".roll-news-index li").removeClass("roll-news-index-hover"); $(".roll-news-index li").eq(i).addClass("roll-news-index-hover"); $(".roll-news-title a") .eq(i).stop(true,true).fadeIn(800) .siblings("a").hide(); } showImg(index); $(".roll-news-index li").click(function(){ index = $(".roll-news-index li").index(this); showImg(index); slideFlag = false; }); function autoSlide() { setInterval(function() { if(slideFlag) { showImg((index+1) % length); index = (index+1)%length; } slideFlag = true; }, 3000); } autoSlide(); }); </script> <style type="text/css"> * { padding:0px; margin:0px; } .roll-news { width:480px; height:300px; border:solid 1px #c1c1c1; } .roll-news-index-hover { background-color:white; } .roll-news-image img { width:480px; height:300px; } .roll-news-index { position:relative; top:-50px; margin-right:5px; float:right; } .roll-news-index { } .roll-news-index li { list-style:none; float:left; font-size:12px; font-weight:600; width:18px; height:16px; line-height:16px; cursor:pointer; margin:0 3px; background-image:url(opacity_50.png); text-align:center; } .roll-news-title { position:relative; top:-25px; padding-left:10px; height:22px; line-height:20px; background:url(opacity_50.png); } .roll-news-title a { font-size:12px; text-decoration:none; color:#222222; } .roll-news-title a:hover { color:red; } </style> </head> <body> <div class="roll-news"> <div class="roll-news-image"> <img src="http://h.hiphotos.baidu.com/album/w%3D2048/sign=e952491b5243fbf2c52ca1238446ca80/d4628535e5dde711bfe12fe5a6efce1b9d1661f5.jpg"> <img src="http://img2.duitang.com/uploads/item/201111/15/20111115104036_AcnUz.thumb.600_0.jpg" style="display:none"> <img src="http://img4.duitang.com/uploads/item/201202/29/20120229160925_jJ2Ei.thumb.600_0.jpg" style="display:none"> </div> <div class="roll-news-index"> <ul> <li class="roll-news-index-hover">1</li> <li>2</li> <li>3</li> </ul> </div> <div class="roll-news-title"> <a href="" target="_blank">图片1：点击后跳转</a> <a href="" target="_blank" style="display:none">图片2：点击后跳转</a> <a href="" target="_blank" style="display:none">图片3：点击后跳转</a> </div> </div> </body> </html>
改变Jquery.js和图片的路径就可以马上使用！
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。