您的位置：首页 > Web前端 > JQuery

[转]jQuery实现图片轮播效果，jQuery实现焦点新闻

2014-04-23 09:31 986 查看

本文转自：/article/1402320.html

效果图：

实现代码：

[html] view plain copy print ?

<!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>

附件中包含一张引用的图片，其它可以直接拷贝看效果。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航