jquery实现纵向焦点轮播

版权声明：本文为博主原创文章，未经博主允许不得转载。 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/

本人是个新手，如有错误请多多指教！谢谢