简单实现图片切换 呵呵
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{
width:140px;
height:120px;
line-height:25px;
border:#ccc 0px solid;
overflow:hidden
}
#scrollDiv li{
height:25px;
padding-left:10px;
}
.paging a {
border:1px solid #FFFFFF;
color:#EEEEEE;
font-size:75%;
font-weight:bold;
margin:0pt 0pt 5px;
padding:0pt 5px;
text-decoration:none;
}
</style>
<script type = "text/javascript">
var runTime
var curNew = 0;
var news = 0;
jQuery(function ($) {
news = $('#scroll-container li');
var paging = $("#paging");
$('#scroll-container li').each(function(i,el){
var n = $("<span></span>");
paging.append(n.html("<a href=\"javascript:;\" onclick=\"javascript:curNew="+(i-1)+";scroll_news("+(i)+");\">"+(i+1)+"</a>"));
});
scroll_news(curNew);
});
function scroll_news(index){
curNew=curNew+1;
if(curNew>=news.length)curNew=0;
$('#scroll-container li').each(function(i,el){
if(index==i) {
$(el).show();
} else {
$(el).hide();
}
});
$('#paging span').each(function(i,el){
if(index==i) {
$(el).css({ background: "red" });
} else {
$(el).css({ background: "#000" });
}
});
if(runTime)window.clearTimeout(runTime);
runTime=window.setTimeout("scroll_news("+curNew+")",4000);
}
</script>
<body>
<div id="scrollDiv">
<ul id="scroll-container" style="margin-top: 0px;">
<li><img width="120" height="120" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/120/199481072_b4a0d09597_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li>
</ul>
</div>
<div id="paging" class="paging">
</div>
</body>
分享到:
相关推荐
经典的jQuery图片广告轮番切换特效经典的jQuery图片广告轮番切换特效
jquery图片广告横幅图片滑动切换展示
好不容易找的,效果真的很不错的,在此和大家互动交流,效果很棒哦
2款jQuery图片自动切换常用广告代码.rar
jQuery电影广告图片上下滚动切换代码 jQuery电影广告图片上下滚动切换代码
jQuery 图片广告轮番切换特效.zip
2款jQuery图片自动切换常用广告代码
jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 jQuery图片特效404 jQuery图片特效CustomAnimationBanner jQuery图片特效FullPageImageGallery jQuery图片特效image Scroller图片滚动 jQuery图片特效...
jQuery仿京东的首页广告图片切换
jquery定时自动切换banner广告图片动画插件示例.rar
这是一款仿某视频网站广告图片左右切换手风琴代码特效,带有左右方向箭头,点击切换下一组广告。
jquery广告图片轮播,修改简单,可直接用,图片大小可修改等等
jquery 广告轮显插件,可以改进成图片轮显、广告图片切换等效果。这个插件是建立在easyslide的基础上,有此可扩展出很多图片幻灯片效果。
jQuery仿京东首页广告图片切换是一款带左右按钮控制切换和索引按钮切换效果的焦点图切换代码。 jQuery仿京东首页广告图片切换截图
jQuery仿京东首页广告图片切换
你下吧。还是挺好用的。阿里云首页轮播广告,淘宝首页轮播广告 JS,JQUERY图片轮播切换
Animation Banner 基于jQuery的广告图片切换特效插件.zip
EasySlide jQuery 图片轮显、广告切换、图片幻灯插件.zip
JavaScript 和 jQuery 分别实现广告图片切换效果 非常实用