Jquery6——1点击按钮左右移动图片2自动向上移动文字3点击标题切换相对应的文字显示

目录

点击按钮左右移动图片

自动向上移动文字

点击标题切换相对应的文字显示

---

点击按钮左右移动图片

效果图

 

 

Jquery：

        //图片滑动
        $(function () {
            var right = 2;
            $(".goLeft").click(function () {
                right--;
                if (right < 0) {
                    right = 2;
                }
                $(".prolist_content").animate({
                    "left": (-578) * right + "px"
                }, 1000);
            })
            var index = 0;
            $(".goRight").click(function () {
                index++;
                if (index >= 3) {
                    index = 0;
                }
                $(".prolist_content").animate({
                    "left": (-578) * index + "px"
                }, 1000);
            })
        })

CSS：

/*新款上市样式*/
.content_right .prolist { 
	position:relative; 
	height: 220px;
	margin-bottom:10px; 
	overflow:hidden; 
	border: 1px solid #AAAAAA;
	background:#FFFFFF;
}
.content_right .prolist .prolist_content{
 	position:absolute; 
	width:1800px;
	top:26px; 
	left:0px;
	padding:20px 0 0 8px;
}
.content_right .prolist ul{  
	margin-bottom:10px; 
    float:left;
	height: 220px;
}
.content_right .prolist ul li { 
	float:left;
	display:inline;
	text-align:center;
	margin-right:22px;  
}
.content_right .prolist ul li span { 
	display:block;
	overflow:hidden; 
}
.content_right .prolist ul li img { 
	display:block; 
	width:124px; 
	height:124px; 
	background:#EEE; border:0;
}
.module_left_right{ 
	position:absolute; 
	top:5px; 
	right:10px; 
	cursor:pointer;
}

 

HTML:

    <div class="content_right">            
        <div class="global_module prolist">
                <h3>新款上市</h3>
                <div class="prolist_content">
                    <ul>
                        <li>
                            <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a>
                            <span>免烫高支棉衬衣1</span>
                            <span>$120.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a&g