用jquery的attr方法实现图片切换效果
利用jquery的attr方法实现如下简单的图片切换效果,希望大家喜欢
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片</title> <script src="js/jquery.min.js"></script> <style> /* intro */ .intro { width:470px; margin-top: 40px; padding: 25px 19px; border: 1px solid #e6e6e6; background-color: #fff; } .intro .pic-selector { /* width: 430px;*/ height: 256px; /* float: left;*/ } .intro .pic-selector .pic { width: 341px; height: 256px; overflow: hidden; float: left; } .intro .pic-selector .pic img { width:100%; height:100%; } .intro .pic-selector ul { width: 73px; float: left; margin-left: 5px; margin-top:0px; } .intro .pic-selector ul li { width: 80px; height: 60px; overflow: hidden; margin-top: 5px; cursor: pointer; opacity: 0.5; } .intro .pic-selector ul li img{ width:100%; height:100%; } .intro .pic-selector ul li.active { opacity: 1; } .intro .pic-selector ul li:first-child { margin-top: 0px; } </style> </head> <body> <div class="intro"> <div class="pic-selector"> <div class="pic"><img class="cover-size" src="img/0204_1.jpg" /></div> <ul> <li class="active"><img class="cover-size" src="img/0204_1.jpg" /></li> <li><img class="cover-size" src="img/0204_2.jpg" /></li> <li><img class="cover-size" src="img/0204_3.jpg" /></li> <li><img class="cover-size" src="img/0204_4.jpg" /></li> </ul> </div> </div> <script> $(function(){ // pic selector $('.intro .pic-selector ul li').hover(function () { $('.intro .pic-selector ul li').removeClass('active'); $(this).addClass('active'); $('.intro .pic-selector .pic img').attr('src', $(this).children('img').attr('src')); // makeImageCoverSize(); }); }) </script> </body> </html>
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17