版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Cheng_May/article/details/78618014
今天把jQuery实现轮播的代码整理了出来,下面贴出代码!
script代码:
<script>
//1.初始化,让图片显示
$(document).ready(function(e) {
$(".img_left>li:first-child").css("display","block");
//当鼠标悬停在上
$(".right_text>li").mouseover(function(e) {
//删除li当前有的样式
$(".right_text>li").removeClass("currentStyle");
//添加样式
$(this).addClass("currentStyle");
//
var s = $(this).index();
$(".img_left>li").css("display","none");
$(".img_left>li").eq(s).css("display","block");
});
});
</script>
css代码:
<style>
body,ul,li{
margin:0px;
padding:0px;
font-size:14px;
}
ul{
list-style:none;
float:left;
}
#box_out{
width:615px;
height:265px;
border:2px solid #F00;
margin:50px auto;
}
#box_out>.img_left{
width:403px;
height:265px;
position:relative;
}
#box_out>.img_left>li{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
overflow:hidden;
display:none;
}
#box_out>.img_left>li>img{
width:100%;
height:auto;
}
/*left_text*/
#box_out>.right_text{
width:212px;
height:265px;
}
#box_out>.right_text>li{
line-height:38px;
background:url(img/bg_j04.jpg) repeat-x;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
padding-left:34px;
z-index:999px;
}
#box_out>.right_text>.currentStyle{
background:url(img/bg_j05.png) no-repeat;
margin-left:-13px;
width:225px;
height:38px;
font-size:12px;
padding-left:44px;
z-index:999px;
}
</style>
body中的代码:
<div id="box_out">
<ul class="img_left">
<li class="currentStyle"><img src="img/img1.jpg"/></li>
<li><img src="img/img2.jpg"/></li>
<li><img src="img/img3.jpg"/></li>
<li><img src="img/img4.jpg"/></li>
<li><img src="img/img5.jpg"/></li>
<li><img src="img/img6.jpg"/></li>
<li><img src="img/img7.jpg"/></li>
</ul>
<ul class="right_text">
<li class="currentStyle">极致美景 中国七大秋色斑斓地</li>
<li>畅游大理 体味民族风情</li>
<li>桂林初冬 浓妆淡抹最佳处</li>
<li>新疆库尔勒:铁关西天涯极目少行客</li>
<li>神秘美丽的内蒙古草原</li>
<li>历史遗产:兴安灵渠</li>
<li>回归自然 感受风情</li>
</ul>
</div>
jQuery库
<script src="js/jquery-1.11.0.min.js"></script>
这得需要去下载jQuery库,链接地址为http://jquery.com/download/
本人是个新手,如有错误请多多指教!谢谢