jQuery实现图片轮播效果,jQuery实现焦点新闻
本文转自:http://blog.csdn.net/tsyj810883979/article/details/8986157
效果图:
实现代码:
- <!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>
<!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>
附件中包含一张引用的图片,其它可以直接拷贝看效果。。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。