详情
模板社小编整理的另外一种类jd首页轮播图效果图片选项卡
引入jq
<script type="text/javascript" src="style/js/jquery.min.js" ></script>
css
<style type="text/css">
*{margin:0;padding:0;text-decoration:none}
ul{list-style:none}
#container{position:relative;width:400px;height:200px;margin:20px auto}
.pic li{position:absolute;top:0;left:0;display:none}
.pic li img{width:400px;height:200px}
#position{position:absolute;bottom:0;right:0;margin:0;background:#000;opacity:.4;width:400px;text-align:center}
#position li{width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:#afafaf}
#position .cur{background-color:red}
.arrow{cursor:pointer;display:none;line-height:39px;text-align:center;font-size:36px;font-weight:700;width:40px;height:40px;position:absolute;z-index:2;top:50%;margin-top:-20px;background-color:RGBA(0,0,0,.3);color:#fff}
.arrow:hover{background-color:RGBA(0,0,0,.7)}
#container:hover .arrow{display:block}
#prev{left:20px}
#next{right:20px}
</style>
div
<div id="container">
<ul class="pic">
<li><a href="javascript:;"><img src="1.jpg" alt="pic1"></a></li>
<li><a href="javascript:;"><img src="2.jpg" alt="pic2"></a></li>
<li><a href="javascript:;"><img src="3.jpg" alt="pic3"></a></li>
<li><a href="javascript:;"><img src="4.jpg" alt="pic4"></a></li>
<li><a href="javascript:;"><img src="5.jpg" alt="pic5"></a></li>
<li><a href="javascript:;"><img src="6.jpg" alt="pic6"></a></li>
</ul>
<ul id="position">
<li class="cur"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ul>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div
js
<script language="JavaScript">
$(function(){
//第一张显示
$(".pic li").eq(0).show();
//鼠标滑过手动切换，淡入淡出
$("#position li").mouseover(function() {
$(this).addClass('cur').siblings().removeClass("cur");
var index = $(this).index();
i = index;//不加这句有个bug，鼠标移出小圆点后，自动轮播不是小圆点的后一个
// $(".pic li").eq(index).show().siblings().hide();
$(".pic li").eq(index).fadeIn(500).siblings().fadeOut(500);
});
//自动轮播
var i=0;
var timer=setInterval(play,2000);
//向右切换
var play=function(){
i++;
i = i > 2 ? 0 : i ;
$("#position li").eq(i).addClass('cur').siblings().removeClass("cur");
$(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);
}
//向左切换
var playLeft=function(){
i--;
i = i < 0 ? 2 : i ;
$("#position li").eq(i).addClass('cur').siblings().removeClass("cur");
$(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);
}
//鼠标移入移出效果
$("#container").hover(function() {
clearInterval(timer);
}, function() {
timer=setInterval(play,2000);
});
//左右点击切换
$("#prev").click(function(){
playLeft();
})
$("#next").click(function(){
play();
})
})
</script>
模板社为广大DeDeCMS爱好者和使用者提供DeDeCMS织梦模板、织梦模板下载、DeDeCMS技巧教程、DeDeCMS插件、banner焦点图特效、图片特效、客服侧边栏代码、导航特效、常用软件下载、TAB选项卡特效等素材资源分享下载。
